If you have basic PHP skills, and are looking to develop a responsive Bootstrap WordPress theme using the popular CSS framework Bootstrap, then this step by step tutorial is for you. I will cover the basics of building a WordPress theme using a starter Bootstrap template and create a basic blog feed (latest posts) page. I am assuming you have WordPress installed and running.

We will use one of the starter example templates from the Bootstrap website for this tutorial: the blog template which is a simple two-column blog layout with custom navigation, header, and type. So head on over to http://getbootstrap.com/examples/blog/ and take a good look at what we would end up incorporating into our very own theme.

Create Bootstrap WordPress Theme From Scratch

This is part 1 of the tutorial, which will have future installations that I will continue to list here as soon as they are written and complete. In this part, we will create all the basic files required for the Bootstrap WordPress theme and write code to list the latest posts (The Loop). The navigation and sidebar, along with other items such as widgets and some customization will be handled in the next part of the tutorial. In the third installment, we discuss adding a slider to the theme.

Hope you find this helpful and if you have any questions, please go ahead and ask away in the comments section and I’d be happy to help!

If you’d rather download the source code for this tutorial right away, here you go:

Download Source

Step 1: Create Your Theme Folder

The first thing to do is to create a new folder inside wp-content/themes. For now, leave this folder empty. Give it a relevant name – this is going to be your main theme folder. For the purposes of this tutorial, lets call it “bootstrapstarter”.

Step 2: Download Bootstrap

Download the latest Bootstrap (currently version 3.3.6) framework by going to this link. When extracted, the Bootstrap files are organized into three folders: css, js, and fonts. You can either extract them directly into your theme folder or create a folder called “bootstrap” and extract the files into that. I have used the latter option: I created a folder called “bootstrap” and then extracted the bootstrap-3.3.6-dist.zip file into it. So my folder structure now looks like this:

Step 3: Create Some Files

For the purpose of this template, we are doing the bare minimum required to get our theme up and running using Bootstrap. Create these six files in your theme folder:

  • style.css
  • functions.php
  • header.php
  • footer.php
  • sidebar.php
  • index.php

They can all be left blank for now. I’ll go through them one by one.

Step 4: Edit style.css

This is one of the required files for a valid WordPress theme. In your favorite code editor (I recommend Notepad++) edit your currently empty style.css and add a comment header. The style.css file always starts with a comment header which enables WordPress to identify the theme and display it in the Administration Panel under Appearance > Themes as an available theme option, along with any other installed themes. At minimum, you should include the following lines:

You can amend each of these lines to include information specific to you and your them. There are several other items that can be added to this header.

Step 5: Edit functions.php

This is an optional file but you would hardly see a WordPress theme out in the wild without one. If this file is present in a theme that you are using (the activated theme), it is automatically loaded during the WordPress initialization – both for the admin area and the external website. Read more about the functions.php file here but mainly, this file can be used to (but is not limited to) perform the following tasks:

  • Include or enqueue any CSS and JavaScript files and scripts. This is the recommended method of including stylesheet(s) in a theme instead of directly adding them to the theme HTML <head>.
  • Enable and declare theme support for features such as Sidebars, Navigation Menus, Post Thumbnails, Post Formats, Custom Headers, Custom Backgrounds and others.
  • Define any functions you wish to use throughout your theme – since this file will always be loaded, these custom functions of yours will be available to all your theme files.
  • At an advanced level, this file can also be used to set up options for theme customization that is available under Appearance > Customize.

So for our theme, edit functions.php add the following code to it – I will go through each line right after.

To summarize, this block of code includes the Bootstrap CSS and Javascript files as well as your own theme style.css (created in the previous step). We do this by creating a function that includes or enqueues the files and then hook the function to “wp_enqueue_scripts”. This hook is used to enqueue or include items that are meant to appear on the front end. Despite the name, this hook is used for both scripts (JS) and styles (CSS).

I have created two functions: one for including the CSS files and one for including the JS files. You can also go with a different approach and create one function that lumps together the enqueuing of both the CSS and JS files.

The first function, bootstrapstarter_enqueue_styles(), first registers the Bootstrap CSS file using wp_register_style(). This function is used to safely register a CSS style file for later use with wp_enqueue_style(). The reason we register first instead of directly including (enqueuing) the file is because we want to create a dependency between our style.css file and the Bootstrap CSS file – in other words, we do not want our style sheet to be loaded before the Bootstrap CSS file. This makes sense since we will be relying heavily on the base functionality provided in the Bootstrap framework and then adding custom rules in our theme style.css that build and depend upon the framework rules.

So after registering the Bootstrap CSS file, we go ahead and enqueue our main style sheet and pass an array of all dependencies i.e. an array of all registered script handles that this script depends on. In our case, our main style sheet only depends on the Bootstrap CSS file so our $dependencies array only has one handle in it: “bootstrap” (which we registered in just the line before).

Understanding the second function, that handles the inclusion of the Javascript files, should be easy to understand now that you know the basics. bootstrapstarter_enqueue_scripts() first defines a dependency array, which includes just ‘jquery’. By default, the WordPress installation includes and pre registers many popular scripts commonly used by web developers besides the scripts used by WordPress itself, jQuery being one of them. Since it has already been registered by WordPress for you, all we need to do is define it as a dependency for our Bootstrap JS file.

Quick note: we’re using “false” as the last argument in the wp_enqueue_script() function while enqueuing the Bootstrap Javascript file in order to tell WordPress to load the file(s) in the footer just before the closing </body> tag instead of in the <head>.

Okay, that’s it for the functions.php file. Now lets move on to the actual presentation files: header.php, footer.php, sidebar.php and index.php.

Step 6: Page Structure

Looking at the page at http://getbootstrap.com/examples/blog/, we need to determine how to “cut up” or organize our template into our main page components. Here is a visual guide of the template that we are about to follow:

Now, head on over to http://getbootstrap.com/examples/blog/, and view the source of the page. We need to copy the source and save it in 4 parts, in 4 different files according to the map above.

So the header area (site title and navigation) goes in header.php. The sidebar goes into sidebar.php. The footer area along with the footer navigation and copyright information goes into footer.php. Whatever is left is the page content and it goes into index.php. So based on the diagram above, here is the content of each of the files, extracted from the starter template and split into the four files.





Now that the HTML code is all split into the correct files, lets edit each file and integrate it with WordPress.

Step 7: Edit header.php

Right now, your header.php file contains the static HTML content that we took from the Bootstrap example file, without any changes. We are now going to make the following edits:

  • Remove all references to any CSS files since we are using our enqueue functions and hooks to take care of including the style sheets.
  • We are also going to remove the meta tags (for author and description, since these can and should be added and managed using a plugin such as Yoast SEO) and the favicon (the favicon can be added using core WordPress functions as well).
  • Remove the <title> tag as well. We are going to let WordPress manage the title for us. For this, we need to make a small addition to our functions.php file – discussed below.
  • Use the language_attributes() function to display the language attributes for the <html> tag.
  • Use the bloginfo(‘charset’) function to display the encoding for pages and feeds set in Settings > Reading. It always echoes “UTF-8”, which is the default encoding of WordPress.
  • And lastly, use the wp_head() function right before the closing </head> tag. Any background functions and gathering of CSS and/or JS files etc. is performed by this function (hook) and this is crucial for the functionality and performance of most plugins.
  • Lastly, use the body_class() function which gives the body element different classes based on the page that is being generated.

So your final header.php file, for this tutorial, becomes:

Step 8: Edit functions.php, Again

So I just removed the <title> tag from the header.php file, which as we all know is a vital component of any web page. Without going into too much detail, lets just say that you can let WordPress plugins and themes to manage the document title tag by adding support for it by using add_theme_support(). This functionality became available in WordPress 4.1 An alternate but older approach is to use the wp_title() function. So, add this code to your functions.php in order to allow WordPress to take care of the title tag for you:

Step 9: Edit footer.php

We’ll do the same here as we did with header.php – remove all references of any Javascript files. We also use the wp_footer() function just before the closing </body> tag to fire the ‘wp_footer’ action. So your final footer.php file becomes:

Step 10: Edit index.php

We finally have all the files in place and all we need now is the main file that will display the recent posts in the default chronological order. We basically need to replace all our static content inside index.php with The Loop that uses standard WordPress functions to display the title, content, author name, date, etc.

The final index.php will look like this:

Please note, we’ve used these functions in place of the static HTML for the post block:

These are pretty self-explanatory but you can read more at the WordPress Codex about these functions. We start the loop by testing if there are any posts to be displayed on this page – if there are, we go ahead and start the while loop and for each of the post components, we replace the HTML with the corresponding function. So for the post title, we replaced the line


The next and previous links for the posts are the pagination links and can be generated using the functions:

Also note, we’ve used the get_header() and get_footer() functions at the very top and bottom of the page. These ensure that the header and footer of your theme are included on this page.

Step 11: Edit style.css, Again

Lastly, lets just copy all the rules from the starter template blog.css file (which is being referenced by the example template in the <head>) into our own theme style.css file. Be sure to add the CSS code after the comment header for your style.css file.


So that’s it – for now. This is a basic bare bones WordPress theme created using the blog template on the official Bootstrap website. There are elements that are not integrated such as the navigation, site header and description, sidebar, and footer which are all still static HTML. We will work on integrating them in the coming tutorials.

Now log into your WordPress administration area, go to Appearance > Themes and you will see something like this:

Activate your new theme and then go to the front end website – and voila!

That wraps up the first part of this tutorial series. Hope it helped and that you enjoyed it. You can download the source for this part below.

Download Source