The importance of Bootstrap for WordPress theme developers

esponsive design template development is one of the basic things that any WordPress theme designer or developer must take care of, given that there are several devices with different screen sizes through which these sites are browsed online.

Visits to websites originating from mobile phones are increasing day after day. Most people now prefer to use their phones to search for anything, and the use of desktop computers for browsing the Internet has declined. Therefore, the site’s responsiveness to small screen sizes and the ease of displaying, navigating, and browsing it easily on these small devices has become a necessity. Urgent.

In today’s article, we will highlight the importance of using Bootstrap in WordPress to develop responsive themes that fit all screen sizes. Website elements self-adjust according to the screen size and contribute to improving readability and improving the website user experience in general.

What is Bootstrap ?

Bootstrap is an open source framework that was created by the Twitter designer team, and then made available to the open source community. It is compatible with all modern browsers (Chrome, Safari, Internet Explorer, etc.).  

Bootstrap is mainly used to develop the front-end of mobile-responsive websites. It forces designers to create sites designed for small screen sizes first (Mobile First CSS framework) and then scale the designs for larger screens. It also consists of a set of ready-made software tools It makes the process of designing complex websites easier for developers.  

Bootstrap has become one of the most popular front-end frameworks due to its lightweight structure. It consists of a combination of HTML, CSS, and Javascripts and enables the design and construction of professional and responsive websites with minimal code and a minimal number of media queries. ) which is usually used to create custom formats for different types of devices. You can also avoid writing this query yourself entirely if you are not used to dealing with it.

The latest version of Bootstrap is Bootstrap 5 and it was launched in May (2021). It differs from previous versions in that it no longer uses jQuery to make it easier to use Bootstrap in projects that do not require or use jQuery. However, you can still use jQuery with Bootstrap if you need to use it in your website.

Learn Bootstrap

Although learning Bootstrap is of course not as easy as learning WordPress, it has a strong support community that you can use at any time. In order to learn Bootstrap, you basically need to learn Bootstrap’s ready-made classes, and understand the grid system on which this framework works.

1-Learn Bootstrap classes?

PostRap provides many ready-made, pre-formatted classes or classes (Utility Classes) that you can use to create layouts for your site pages and coordinate the elements within these pages in an easy and flexible way.

The version of Bootstrap 5 included a wide range of ready-made classes that were already present in Bootstrap 4 and added some new classes to them . These rows are used to quickly apply some formatting and styles to HTML elements without having to write any custom CSS rules, and they are divided into different groups.

• Classes for buttons
• Classes for formatting texts Typography
• Classes for forms
• Classes for carousel slides
• Classes for tables
• Classes for Navbar menus
• And many more..

For example, Bootstrap 5 provides nine classes for formatting buttons, as shown in the following image

All you have to do is add the required class within the HTML code of the button so that it is formatted in the custom style, and add its default JavaScript interaction directly.

You can browse all of these classes and learn how they work here .

2-Understanding the grid layout in Bootstrap

It’s important to understand how Bootstrap’s wireframe system works so that you can plan your page and make the most of all of Bootstrap’s features when preparing your design.

Bootstrap provides a flexible and responsive flexbox grid system that can accommodate up to 12 responsive columns that are based on percentages and automatically rearrange the elements inside them when the screen size changes.

Poststrap can be likened to a canvas that transforms a web page into a horizontal grid consisting of a basic container that represents a frame within which all other elements are collected. Each container has lines (div elements have the row class) and columns (div elements have the col class) and places the elements within the visible area of ​​the web page. (viewport) With increasing or screen size.

There are three types of container rows in Bootstrap that you can use for div (or section) elements on your page:

• container
• container-fluid
• responsive container

This network supports six responsive breakpoints. These breakpoints depend on the media query of the minimum size (min-width), which means that they affect this breakpoint and all points higher than it – as we will explain shortly – these points are:

• Very Small The default XS means the device size is smaller than 576 pixels (class prefix corresponding to .col-)
• Small sm means the device size is greater than or equal to 576 pixels (class prefix corresponding to .col-sm-)
• Average md, which means the device size is greater than or equal to 768 pixels (class prefix corresponding to .col-md-)
• Large LG means the device size is greater than or equal to 992 pixels (class prefix corresponding to .col-lg-)
• xl is very large, which means the device size is greater than or equal to 1200 pixels (class prefix corresponding to .col-xl-)
• xxl, which means the device size is greater than or equal to 1400 pixels (class prefix corresponding to .col-xxl-)

Each of these classes has a number from 1 to 12 attached to it, corresponding to certain percentage values. A combination of these classes can be used (i.e., declaring several classes at the same time in your design), so that the class mentioned first is the one that is applied first.
For example

• Class .col-xs-1 will be 8.333333333333332% wide of the phone screen.
• Class .col-xs-2 will be 16.666666666666664% of the width of the phone screen.
• The .col-xs-3 class will be 25% of the phone’s screen width
• And so on until we reach the class .col-xs -12, which will be 100% of the width of the phone screen

The same applies to other classes, for example

• The class will be .col-sm-1, with a width of 8.333333333333332% of the width of the tablet screen.
• Class .col-sm-2 will be 16.666666666666664% of the width of the tablet screen.
• The .col-sm-3 class will be 25% of the width of the tablet screen
• The .col-sm-12 class will be 100% of the tablet screen width

note:

Bootstrap is a mobile-first responsive system (min-width), so if you declare only the .col-xs class in your design, this class will be available to all devices and applying it to an element will not only affect its design on small phones but also on other devices. Larger ones, such as tablets and medium and large desktop computers, in the absence of other rows.

Also, using the .col-sm row in an element will not only affect its design on the tablet, but will also affect its design on larger devices such as small and large desktop computers in the absence of the .col-md- and .col-lg- rows.

So when you design your site’s page layout you can customize the size of your columns to extra small, small, medium, large or extra large as you see fit. It is preferable to first declare the class that corresponds to the devices of the users who visit the site the most, and then declare the classes that make your design responsive to the rest of the devices.

In order to plan any page according to a wireframe layout, you must first create a div element that represents a container in which to place all of your website content. Bostrap uses containers as the foundation of its network system. You can use as many containers as you want, but the containers should not be overlapping.

You can then place columns inside lines, and lines inside containers, and each container can contain one or more lines and you must include at least one line of columns in each container.

After adding the container, first add lines for each container. A row in Bootstrap is simply a group of horizontal Bootstrap columns that can be divided into 12 parts.

Finally add columns and define the divisions for this column. The line is the one that will contain your col elements and the number of columns within the row must be up to 12.

Understanding Bootstrap classes and grid system Bootstrap may take some time to learn and understand but once you understand it well you can create amazing layouts in no time.

I recommend you check out the Bootstrap documentation from the official website to see how to add features to your website, and get appropriate code snippets for what you want.

How can you benefit from Bootstrap in WordPress?

Bootstrap allows you to create entire websites independently or within another system. But you can also take advantage of Bootstrap within the WordPress system to develop custom WordPress templates or add-ons as add-ons to create image galleries or other add-ons that add a professional aesthetic appearance to your site and look great on mobile devices.

But in this article, we will focus on the aspect of developing a WordPress template through the Bootstrap framework. If you are a WordPress template developer, then you can add Bootstrap support to your WordPress template and benefit from its powerful features.

There are many WordPress templates based on Bootstrap in the template repository. Search for Bootstrap on the official WordPress templates page and you will get nearly a thousand results of free, distinctive, responsive templates whose design is based on the Bootstrap framework in its various versions.

The following question may come to your mind: What are the benefits of developing my template using PostRap ?

Here’s the answer:

• Developing a WordPress template using Bootstrap makes the elements on the site easily responsive to all screen sizes
• Developing a WordPress template using the Bootstrap framework allows you to take advantage of the ready-made design elements it provides to you, such as ready-formatted buttons, tables, and lists based on CSS and JavaScript codes in the WordPress system, to develop visually attractive and responsive WordPress templates for your site.
• Because Bootstrap is open source, it has a large support community and many learning resources. It is constantly updated and properly managed by a strong team. This means that it rarely crashes or suffers from serious problems, and you can use it safely to obtain visually attractive designs.
• Bootstrap is also distinguished by the fact that it is well integrated with HTML5. In addition to the fact that it includes special design classes, it includes all designs for a complete set of HTML5 elements that you can use in your template. Designing all of these things from scratch is tiring and takes time, so it saves you a lot of work.

So Poststrap is a design framework, and WordPress is a content management system (CMS), and although they are two completely different things, each of them provides many technical elements and hides them behind an easy-to-use interface, and all the site developer has to do is simply use them without paying attention to all the complex details that These items were accomplished through her.

In order to be able to work with Postrap to develop a WordPress theme, you need to have the following skills:

• HTML/CSS basics
• Basics in dealing with the WordPress system
• Basics of the PHP programming language
• The basic structure of template files in WordPress
• Basics of template design in WordPress
• Basic knowledge of programming in the general sense

Read also: Learn about the WordPress programming system and its basic components

Practical steps to build a PostRap template in WordPress

In order to be able to build a Bootstrap template for WordPress, you must have the necessary knowledge about designing and creating templates in WordPress in advance. Here we will not explain how to create a fully functional WordPress template. We will focus more in the explanation on explaining how to use Bootstrap in designing and developing this template.

Step 1 – Create a template folder and its basic files

The WordPress template, as we know, has a predefined file structure. You can view these files and their names in the template through the following article.

In the following paragraphs, we will explain in detailed steps how to create a simple, basic template for a WordPress website based on the PostRap framework as follows.

First, we will create a folder called wpartheme to save our template files under the /wp-content/theme directory of the site (you can use the file manager in the control panel or an FTP program to deal with the files on the server).

This folder will be our Bootstrap template folder, within which we will create a set of empty files necessary for the template. Some of these files are optional and others are mandatory in order for WordPress to recognize the template.

• The first one we have to create is the style.css file which is a mandatory file that contains the template’s layouts. In addition, this file also has another task, which is to provide information that describes the template, such as the template name, description, author name, template version, and other details.

• The second file is the index.php file . It is a mandatory file that represents the main WordPress template template that WordPress relies on to display any page if it is not possible to find any other template file that is more customized to display the page.

Read more about the theme file calling hierarchy in WordPress

There are many optional files that you can add to the template to customize it further for each part of the site, but for our illustrative template in today’s article, we will only add the header and footer files:

• Header.php file : It is used to plan and design the template header, which is usually displayed on every page of the site. This file usually includes information such as the title and description of the site, defines what format files we will typically use on the site, and other information.

• Footer file footer.php: This file is responsible for displaying the information that is included at the end of each page of the site. Here, it is preferable to include Javascript codes so as not to cause slow loading of the page.
• Template functions file functions.php In this file we will write the necessary code for the template to work.
• We will also add an image file and call it screenshot.png to be the image for the template that will appear when you browse the template in the site’s control panel.

Step 2 – Add Bootstrap to your WordPress template

The WordPress system does not support PostRap by default, so in order for you to be able to use PostRap as a basis for a WordPress template and benefit from the strengths of both systems, you can follow one of the following methods – knowing that there is no significant advantage for one over the other, and you can adopt the method you prefer –

The first method – refer to the Bootstrap source files from the Content Delivery Network (CDN).

In this case, we do not need to download the PostRap files into our template folder. It is sufficient to indicate the CDN link for the files we need, as follows:

We will reference Bootstrap’s css file by adding the following link in the header.php file under the <head> tag and before any call to any other style file:

This link contains the CSS library and allows you to use Bootstrap classes in your web pages.

We will reference Bootstrap’s JavaScript file in the footer.php file before the closing </body< tag.

Also, instead of including Bootstrap embed codes in the template’s template files (in the header and footer), you can add the linking code within the template’s functions file functions.php through the queue functions wp_enqueue_script/wp_enqueue_style, which are special functions in WordPress known as “ hooks ,” which are just Another way to include Bootstrap’s CSS and JavaScript codes (and your own code as well) in the template

Note:

You also need to add the Arabic language tag “lang=”ar” and the direction tag in “dir=”rtl HTML codes

See more about RTL support in Bootstrap 5 docs at the following link

Second method: Download the PostRap source files.

You can download your desired version of the PostRap framework by going to the following link and clicking the Dowmload button. We will download the latest version as shown in the following image.

You will then get a zip file (bootstrap-5.0.2-dist.zip) which you have to move to the template folder and unzip it.

We will move the file to the wpartheme template folder that we created in the previous step and unzip the Bootstrap file into it. As a result of decompressing, we will get a folder called css and another named javascript, and inside each folder is a group of files as shown in the following image:

Each of these folders contains a set of different versions of layout files and JavaScript files (both regular and mini versions).

We won’t need all of these files in our theme so we’ll just keep bootstrap.css and bootstrap.js, and delete all other versions of the files.

You must pay attention to an important point, which is that these files and formats do not replace the style.css template format files that must be present in every template.

Remember that the wpartheme folder will be your final theme folder (it can be called anything else you like) and it now includes the addition of PostRap’s css and javascript folders (index.php, style.css, header.php, footer.php, functions.php)

Now we need to make our theme recognize the Bootstrap framework files, which are the built-in layout file (bootstrap.css) and the built-in JavaScript functions file (bootstrap.js), so we need to reference these files either in the other template header and footer files or in the theme’s functions file.php.

We will adopt this method in our template and explain it in more detail when preparing the template function file in the next paragraph when we start adding the actual code to the template files.

Step 3- Programming and designing the template files

We will now begin programming and preparing each template file as usual, but using Bootstrap classes to complete the design. Below we will explain how to program the basic files of our template.

1- Programming the style.css template file

We will add to this file the information that describes our template in the form of a comment, such as the name of the template, the description of the template, the name of the template developer, and other descriptive information as follows. Of course, you must change the information according to your template.

Then you can add any formatting you want to the template as usual. It should be noted here that you may need to add your own classes and formatting rules, or you may need to change some of the default formats in Bootstrap to match the identity of your site. For example, if you want to override the default Bootstrap container, you can write the following code

If you want to add some formatting to the body, such as using a specific font, adding an inner margin at the top, and making the font color dark blue, you can write the following code:

You are free to add whatever formats you want here, and you are free to rely on the default Bootstrap classes, or pass them, or write special classes and format them as you want.

2- Programming the template functions file functions.php

We previously talked about how there are several ways to support Bootstrap in WordPress. In this paragraph, we will rely on using WordPress hooks inside the template functions file functions.php to include Bootstrap’s CSS and JavaScript files, and then all we have to do is call these hooks on every page we want to include them on.

We will edit the template functions file that we created in the template folder in any text editor and add the following code to it:

The wp_enqueue_style method is a WordPress function whose task is to insert and load the formatting file passed to it as an argument, and here we passed both the Bootstrap CSS formatting file and our custom CSS formatting file to it.

The wp_enqueue_script function is also a WordPress function whose task is to place the script passed as its argument in the queue and load it, and here we designed to use it to load Bootstrap’s JavaScript file.

 The method get_template_directory_uri gets the URI of the current active template directory.

2- Programming the template header file

We will edit the header template file header.php that we created in the template folder and add the following code to it:

In the code above, we added descriptive information to the WordPress site header, such as the site title wp_title and site name bloginfo(‘name’) to the header section, and we called wp_head() to implement the wp_head hook that WordPress uses in order to add links and other functions to the site header.

Here, in designing our website header, we relied on ready-made Bootstrap classes to create a responsive navbar navigation menu , but we have a problem here, which is that this navigation menu is not dynamic, that is, it is not integrated with WordPress menu functions.  

In other words, we cannot create a WordPress menu in the site admin control panel and see it displayed on the front end of our website. So we’ll give this Bootstrap menu the power of WordPress like this:

To do this task, we need to create a walker class that enables you to display tree data structures in HTML code. You can search for the ready file file for this class (Bootstrap 5 WordPress Nav Walker Class) and paste it in your theme folder directly.

In this file, we will provide you with bootstrap_5_wp_nav_menu_walker within the template files, and you can rely on it to display the template navigation menu dynamically.

Now you have a walker class that can create Bootstrap navigation menu in template files. Modify the nav tag in the previous code to make it dynamic as follows 

This code assumes that we have created a menu in the admin control panel and that we have pages stored in the WordPress database, and it displays links to these pages in the menu by calling the wp_nav_menu() method, to which we will pass several parameters.

The walker parameter is a new object of the bootstrap_5_wp_nav_menu_walker class responsible for displaying the Bootstrap code for the navigation menu.

For more information about the parameters of this function and how to set it up and use it correctly in WordPress, I recommend looking at the following link

3- Programming the template footer file

Finally, we will edit the footer.php file that we created in the template folder and add the following code to it:

In this code, we displayed information about the website template, and a link to move up to the footer area. We also called the wp_footer() hook, which WordPress usually uses to place various elements at the bottom of the website page, such as links to format files, JavaScript files, etc.

4- Programming the main template file index.php

We will now edit the index.php file in the template folder and add the following code to it to include the header and footer that we designed in the previous steps:

Between the header and the footer (in the Main Content here) we will display the site’s posts using the WordPress loop, which is the default mechanism that WordPress uses to display posts in the template’s template files.

This code first checks the presence of any posts on the site through the have_posts method. This method returns true if there are posts and false otherwise. Then, if there are posts, we call the_post method. This method does not return any value, but it makes WordPress ready to display posts (retrieves the next post, prepares it for display, and sets the in_the_loop property to true).

These posts are then passed one after the other within the iterative loop, and the title and content of each post are displayed. (You can of course view any additional information such as the date the post was published, its author, comments associated with it etc..)  

The site will look like this:

We will suffice with this explanation of the template files that constitute the basic building blocks of any WordPress template, and you can of course unleash your design and template development skills and add additional template files and formats as much as you want.

You can also download the code for the template that we created in this detailed explanation from here

A helpful way to speed up the process of building a Bootstrap template in WordPress

If you do not want to spend a long time writing all the code, you can rely on the plugin website them.es, which provides you with the service of preparing the necessary files to create an integrated Bootstrap template in WordPress.

Go to the following link , enter the metadata for the template, select the Bootstrap version, and click the Download button to start the creation process.

The site will create a Starter theme for you with a basic layout and all you have to do is add their own code to create a completely custom look for their site without having to create the theme from scratch.

Conclusion

Websites that are not mobile responsive are known to rank lowest on web search engines due to the poor experience they provide to most visitors. By relying on Bootstrap to design your WordPress template, you will ensure that you get responsive websites easily and quickly.

I hope that this article has helped put you on the path to learning how to take advantage of the PostRap framework within the WordPress content management system. Of course, you must then delve deeper into understanding the foundations and rules of Bootstrap and begin researching and experimenting until you are able to master it and begin building professional, responsive templates through it.