How to use Bootstrap with WordPress

A WordPress site’s level of mobile re­spons­ive­ness, that is, how well a website works on a mobile device, isn’t guar­an­teed auto­mat­ic­ally. Bootstrap is an excellent tool to help develop mobile re­spons­ive websites, or just generally develop a user-friendly theme for your website. Let’s take a look at how to use Bootstrap with WordPress, and why you’d want to do so in the first place.

1. Prepare Bootstrap and your WordPress site: Download Bootstrap and find or build the template you want to use. Make sure your WordPress site is ready for the theme update.
    
2. (Optional) Customise Bootstrap: You will be able to configure the Bootstrap version you download, so do this if you want. Some knowledge of how to code is required for this, and is an optional step. Download your Bootstrap code whether cus­tom­ised or not.
    
3. Integrate Bootstrap into WordPress’ theme files: Create a new folder under wp-content > themes. Upload Bootstrap to this new folder, ensuring the required files for a theme are in the folder.
    
4. Modify/update Bootstrap code: Here you have the chance to update your Bootstrap theme so it suits your current style without modifying the core code. It’s the final touch!
    
5. Activate your theme: Do this as you would any WordPress theme in the admin dashboard.

As you may be aware, Wordpress is one of the most suc­cess­ful content man­age­ment systems, also known as CMS. Bootstrap, on the other hand, is a kind of web framework used for design. It allows web designers to create templates in the languages CSS and HTML, and although it was ori­gin­ally developed for Twitter, it is now used as a WordPress framework and is now a popular way to stream­line and optimise websites.

Bootstrap’s main advantage is that it makes websites mobile friendly. Since more and more people are using mobile devices to visit websites, search engines like Google are favouring Re­spons­ive design. A website that is optimised for mobile browsing will score better in terms of SEO. In addition to using tools such as a content delivery network or CDN, using Bootstrap with WordPress can help increase the re­spons­ive­ness of your website.

There is a knack to using Bootstrap with WordPress, and you’ll find that even once you integrate Bootstrap, you’ll want to keep op­tim­ising it as your website develops. We’ve outlined five steps here for you to follow to get your WordPress site in­teg­rated with Bootstrap.

Ensure you’re set up properly to integrate Bootstrap with WordPress. That means having active hosting, and a WordPress account, and then down­load­ing Bootstrap. We have written a separate tutorial for how to download and use Bootstrap to help you out. Once you have your Bootstrap template – which is explained in the tutorial linked above – you can set about in­teg­rat­ing it with WordPress.

The main Bootstrap website has the pos­sib­il­ity to configure a cus­tom­ised version of Bootstrap. This is done by using a com­bin­a­tion of CSS, Component, and JavaS­cript files – you pick the files that you want to use in your version of Bootstrap. Clearly, you’ll need a good amount of fa­mili­ar­ity with some coding to be able to customise Bootstrap in this way.

If you’ve chosen to configure Bootstrap to a cus­tom­ised version, finish picking the options you want and then download your version. Otherwise, you can go right ahead and just download the standard version of Bootstrap. Once you have down­loaded Bootstrap, it will be possible to add Bootstrap to your custom WordPress site. The next step is to integrate Bootstrap with WordPress, so ensure it is unzipped and connected to your server via an FTP program.

In order to integrate Bootstrap files into your website’s main WordPress files, all you need to do is go to wp-content and then themes. Once you’re here, simply create a new folder for your Bootstrap theme. The files you unzipped in step 2 can now be uploaded to this new folder, while still making sure that the ‘footer.php’, ‘header.php’, ‘index.php’, and ‘style.css’ files are still there, as these are required by WordPress for your Bootstrap theme to work.

As mentioned above, there are some required files for your theme. If they aren’t present in your folder, simply duplicate the required files for making a WordPress theme from another file and add them to your new Bootstrap folder created in Step 2. Once this has been done, you just need to copy the Bootstrap code over into these files – this can be done by copying the code you down­loaded in Step 2.

At this stage, it is also possible to modify the Bootstrap code to suit the style of your theme, and ensure the right elements are present. This is a neat trick to avoid you having to modify Bootstrap’s core code and to simply adjust what you need. Those are the fi­nal­ising steps for in­teg­rat­ing Bootstrap into WordPress – once you’ve made your final tweaks, you’re ready for Step 5: Ac­tiv­a­tion!

Once you have uploaded and modified the Bootstrap code and files into your new theme folder, you’re ready to activate your theme. This is done in the same way as any WordPress website, so if you’re already familiar with the WordPress interface, this will be a breeze – simply manage the theme with WordPress’ admin dashboard.