The Unconventional Guide to Making WordPress Themes with Bootstrap

Have you ever thought to yourself, ok, I’m ready to jump off from the ‘buying a theme’ bandwagon, and actually creating your own WordPress theme, catered to exactly what I need design wise and UI wise, only to realise that it’s a mammoth task? The documentation might as well be written in Klingon, you don’t know where to begin and you find that when you go and do the tutorials on YouTube, they so long 27 videos packed with things you don’t even necessarily need.

Have you ever thought to yourself, ok, I’m ready to jump off from the ‘buying a theme’ bandwagon, and actually creating your own WordPress theme, catered to exactly what I need design wise and UI wise, only to realise that it’s a mammoth task?

The documentation might as well be written in Klingon, you don’t know where to begin and you find that when you go and do the tutorials on YouTube, they so long 27 videos packed with things you don’t even necessarily need.

I JUST WANT A BESPOKE THEME FOR MY BUSINESS, NOT A WHOLE DEGREE IN WORDPRESS THEME DEVELOPMENT!

Disgruntled small startup owner

Well look, I hear you, I was there, so I went away and really had to think about because I had to think of a fast and efficient way to develop custom WordPress themes. A lot of trial and error. So this guide tells you how you can go about creating your own WordPress theme, the smart way, doing it in as little time as possible.

In a nutshell this is what you need to do to create your own more than WordPress theme.

  1. Download Bootstrap starter framework
  2. Download ACF
  3. Access your theme files
  4. Create page templates
  5. Wrap your HTML within the php with the aid of Advanced Custom Fields

These steps encompass a philosophy and a way to think about how you build your WordPress websites.

WHAT IS OUR PHILOSOPHY? TO BUILD SOMETHING THAT WORKS, THAT’S PROFESSIONAL AND GIVE THE USER A GREAT EXPERIENCE, WITHOUT SPENDING VAST AMOUNTS OF RESOURCES AND TIME.

um.. me.

Are you like most people you just want something that’s yours that’s valuable that you can work on and you can change but that you can also learn quickly as a way of thinking and approaching the problem.

Time is of the essence and if you can do something fast yet keeping options for yourself, not letting someone else have too much control over your product, then what I will show you is the way forward, especially if you’re a small business owner or freelancer who knows their way around WordPress, or if you are if you are semi-technical person. Maybe you know your way around WordPress here in there but you don’t know a lot if any PHP. Perhaps your business has a WordPress theme and you’ve gone in there and you’ve messed around a little bit, putting some plugins here and there. Well this is the extra step that will give you more control.

It’s all about custom functionality:The magic of WordPress

I might not know you are but if you were here, then I know that you have a certain interest in developing or having a WordPress website, particularly your own theme. Paherps you have many, you are a dev or freelancer. Now you might know why it’s so good to have a WordPress website, certainly if you are a writer having a WordPress website allows you to have your own website without having to code it. It’s an easy way to manage your content.

If you are a company and you have a marketing team or even if you are an individual and you are running your own business, it’s so easy to plug in functionality to help you create, for example, marketing campaigns, invoicing, data analysis and all sorts of stuff. You can actually create a web application platform using WordPress and using that above way of thinking.

Having a WordPress theme creation is a great investment, remember, these are the shopfronts of the future.

But then you ask yourself ok if I can’t create a nice looking website for myself then what can I do alright I can either hire a developer and I can spend a lot of money trying to get a great website or I can purchase a theme, and if you’re a small business or if you are sole trader for your Bootstrapping then you would most likely purchase a team that’s a great way to go or…

The dirty secret about other people’s theme

Now that you’ve got your theme everything is going on well however you decide that you want to do a little bit of AB testing with a design, or something breaks and right at that point, this great developer that you bought the theme from, is AWOL. Maybe they have abandoned the project or they can’t access the email anymore. These things happen, I have gone through them myself. Now you’re stuck because you made an investment into this project, you can’t update things because when you update things, other things start to fall apart.

Since it’s not your own code, it’s complicated to determine what the issue issue is, so you have to hire a developer who knows exactly that code is, it becomes a mess. That’s the reason why it can be a great idea to begin, but then if something really goes wrong, you want to have more control, you want to know that at least you can prevent certain issues from happening. Understandably you can’t get everything, you have to take some code here and there, but this is a much better way of approaching it.

Why would you want to build your own WordPress theme?

You can create something that you have more control over and more control means you are able to put better designs, you’re able to shift things around and you able to create a great looking pages on the fly. You able to change your branding anytime, key ui elements, if you pop ups, you are in control as to exactly how they look. That’s the benefit of what I want to show you and most importantly it would take you a fraction of the time to do, as opposed to doing it the long way I shall say.

You have to stop looking at your website as something that is just there that might aid you get leads and here and there, you have to look at it as a dynamic shopfront that changes with the seasons, think of all the seasons greetings, welcomes, announcements. Your website is a dynamic investment.

You have to know it as much as you can as a non technical or semi technical person. You must be able to move around things, change around things, add a banner wishing your clients happy whatever holiday, without having to pay people to do small things like that.

You need to be able to add a contact form for you or change the design of this contact form, etc. and that’s the benefit of doing it this way, using these technologies together, leveraging their power. That’s why you want to be able to put together your own theme that you can build up on as your website changes, adapts and reacts to growth, using powerful web technologies to supercharge it, Bootstrap and Advanced Custom Fields.

The undisputed Bootstrap

So now that you’ve decided that ok, I want to have a go at this and you’re looking at Bootstrap you’re on the website and you thinking, what’s all the fuss about, it just looks, well, basic?

Let me explain to you what it’s is all about. Bootstrap is a UI system or a library of UI components. A button is a ui component, it behaves a certain way visually that allows us to experience that we clicked something. All UI libraries have buttons, but they appear and interact differently, for example, some have drop shadows, like Bootstrap, some do not. Bootstrap is amongst the best out there because its backed by Twitter, and with resources that came from that, having been designed and refined over the years as to how people interact with device.

Bootstrap is mobile first and it’s one of the best technologies for mobile out there. Not only that, it looks good and is aesthetically pleasing, so people are more likely to have a pleasing experience with Bootstrap as the UI framework and UI components on it. As I mentioned, There are other ones such as Google’s very own Material Design. Bootstrap however works well for our purposes and it looks good for more commercial websites as opposed to platforms and web applications.

Bootstrap is very flexible and you can have a whole range of websites that can look totally different because it’s flexible like that. The grid system is very good, and one of the reasons why I love the grid system is that it allows you to center things vertically and horizontally in a very easy way, which has always been a problem in the past where you had to use things like css: margin: 0 auto, and fight with it with more CSS. But with Bootstrap all you have to do is to use a CSS class and depending on the way you’ve sorted out everything, you are good to go.

The menu system is easy and it adapt well to mobile. Everything is moving to mobile so it’s a great decision to use Bootstrap as well as to make it the basis of your UI framework for your web systems web applications.

The hidden assassin Advanced Custom Fields

Now that you have Bootstrap you can’t just put Bootstrap into WordPress without something that plugs in and makes it more flexible and this is where Advanced Custom Fields pro comes in. Advanced Custom Fields pro makes it so easy to customise the whole WordPress ecosystem in terms of your theme creation. It makes it so easy to start from fresh, you don’t even need to start with a Bootstrap starter theme, you can even start off with just a framework such as the Underscores framework, but then it puts more time, which is against our philosophy.

So with Advanced Custom Fields pro you can create layouts of pages and within these layouts you can have sections. It makes it so easy to work from the back end of the theme of WordPress with the backend within the admin panel of WordPress. It’s so easy to understand, It looks so daunting at first but you’ll find out soon enough that most of the staff is repetitive and you only have to change a few things here and there and the rest is just, rinse and repeat, rinse and repeat. Which is great, and that’s why I love it. It unleashes the power of WordPress and Bootstrap, and that’s what you need.

Putting it all together.

Now that you have all these put together, what you now need to do is, open your theme files, create your first template file in the root of your theme. These template files are going to tell WordPress for example, if you create a template file called home, when you go to create a page in WordPress under templates, the drop down, click the one that says home. And then when you do that, you go back to the template file and then you do your necessary wrapping up with the PHP and then you go to Advanced Custom Fields, get the field name that you want to use, such as the flexible field. Then you come in and place it in your home template file. Go to WordPress admin and then you create that field in the Advanced Custom Fields pro, then create your first section, which would be a section purely for headers for example. You might want different headers such as a main header, and you might want a header for page types such as blog posts or category posts.

Create fields in that layout, such as the header background image, header title, call to action button and the the product image. Once you have those fields in place make sure that if it’s an image, select image type and if is a URL you select URL type, double check everything, those little mishaps can lead to time wasted debugging.

When you have done that you go back to the template page, you create the necessary html using bootstrap grid and classes, for example, for the title, you can use the .h2-responsive class that makes your title respond to the view port. Place in all the fields and there you have it, you’ve literally created your first theme, congratulations.

Modular and reusable Code

What you really want to do is you want to create code that you can reuse for example you want to look at sections in the most basic elements if you have a feature section that has a image on the right on the left it’s got a title a subtitle a paragraph and a call to action you have to look at that as a component that you can reuse again and again so you look at that as modular code or blocks of code that you then take and then instead of using it as features you can use it as contact us or maybe product details etc so there you have it.

Extra Tips

Another thing that will help you develop even faster without having to worry about Bootstrap code, is go and look for Bootstrap snippets online. Maybe you want to create an accordion or tabs, or you want a menu system that has a certain feature or has a different colour. Maybe you need one that behaves in a certain way, then go ahead and type that in Google and most likely CodePen will have some options for you complete with the bootstrap code. You can just copy the code and change it a little bit the way you want it depending on your expertise instead of hiring somebody to do that for $200 or $500 or however much it takes two code a menu system. it’s all about cutting your cost and cutting your time but also creating a really great website and product. You are leveraging people who have had the talent and time and you’re putting it together to create your product.

Conclusion

And there you have it, I hope that you have learnt quite a bit about the philosophy of building something that works, that’s professional and give the user a great experience, without spending vast amounts of resources and time. So go forth and create a great website efficiently.