Using Bootstrap to Design WordPress Themes
A popular HTML, CSS, and JS framework, Bootstrap is increasingly used to develop adaptive, mobile-first web projects, particularly on WordPress. Although it has not been developed especially for WP, it can be integrated to improve adaptiveness, increase the page load speed, and support web-to-mobile compatibility. So how can developers use Bootstrap to design WordPress themes and sites?
Why Use Bootstrap for WordPress
For a start, what benefits does use Bootstrap provides for your WP blog? Here are some of the most obvious advantages.
Whether or not you and your development team can do coding, it is always easier to have the existing framework at your fingertips. Bootstrap code can be customized with CSS or even HTML, so you can always adapt it to your company’s style and needs.
Although Bootstrap was not originally designed to go with WordPress, its popularity has led to accumulating an impressive knowledge base and formulating best practices. This means that you can benefit from demos, tutorials, and even existing solutions that you can learn from and peruse some details.
Maintenance and Documentation
Since it was introduced in 2004, Bootstrap has been regularly updated and maintained. As a result, it is not ridden with bugs and does not provoke questions about its legitimacy.
The fact is that Bootstrap is free to use contributes to its popularity among developers. As much as you need to consider various expenses, you certainly do not have to worry about allocating budget for Bootstrap.
Using Bootstrap to Design a WordPress Theme
There are many ways to use Bootstrap to design your WP theme. There are special Bootstrap for WordPress theme builders, Bootstrap Starter themes in WordPress, and if you are confident enough, you can try and develop a BS theme yourself.
Design a Bootstrap WP Theme Yourself
If you like to dabble in technology, then you should certainly try and design a Bootstrap theme for your WordPress site yourself.
After you download the Bootstrap .zip file from their official site, start by creating a “bootstrapstarter” theme folder but leave it empty. You can then extract Bootstrap straight to it, or put it into a subfolder first. All Bootstrap files are located in three folders: css, js, and fonts.
Now, each WordPress theme has some prerequisite files that need to be replicated in Bootstrap. They are:
The rest of the work with Bootstrap will involve modifying each file. When you edit style.css, for example, you have to begin it with a comment header that will let WP to correctly display the theme in Appearance > Themes in the Admin Panel.
Note: the lines in every file may be amended to include the information you need for your theme.
The next important file to work with is functions.php. It ensures a correct theme loading and helps to add different stylesheets without overloading the <head> block. This file also supports features, such as Sidebars and Menus, and various custom options and functions.
Following that, you will need to design a page structure. By default, any WP page consist of the following 4 blocks:
So, when you edit the header.php block, you will need to remove:
- all references to CSS files;
- all meta tags and favicons;
- all title tags.
Important: with the footer.php block, you will need to extract all JS references and use the wp_footer() function just before </body> tag to initialise the ‘wp_footer’ action.
After this add the following elements:
- the language_attributes() that displays the language attributes for the <html> tag.
- the bloginfo(‘charset’) that displays the encoding for pages and feeds;
- the wp_head() that sits just before the closing </head> tag;
- the body_class() that provides the body element with different classes based on a generated page.
Adding the add_theme_support() (for WP 4.1 and above) to the functions.php file means that WP<title> tag will now be managed directly by WP plugins and themes.
After all these changes, you will be able to work on the main index.php file. It allows to display the posts in chronological order, but rather than in the static HTML, you can add the following functions:
As a result, the static index.php file will be replaced with the loop that uses the above standard functions.
Note: to ensure both header and footer are shown on the page, apply the get_header() and get_footer() functions to the top and bottom lines of the page.
In end, copy all rules from the starter template blog.css file into your own theme style.css file and add the CSS code after the comment header.
Using Ready-Made Bootstrap Solutions
Thanks to Bootstrap popularity, companies and professionals have designed both theme builders with Bootstrap framework and Bootstrap themes for WordPress. You can choose either option if coding is not your thing.
Attention: BS-based WP themes deploy drag-and-drop functionality that offers endless customization opportunities.
Bootstrap is a great solution for responsive WordPress sites and blogs. You can create really simple and straightforward websites, or you can unleash your creativity and work on elements that exist in WordPress but are not supported by Bootstrap. Thanks to this framework, the coding is minimal (unlike with traditional CSS), while your websites load quicker and look nicer on mobile phones. And if you join WooCommerce and Bootstrap on your WordPress project, you will have the best of all worlds!