How to Build a Responsive WordPress Theme with Bootstrap

BadPorn · April 3, 2014

In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap. Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive WordPress theme.

You don’t have to have built a theme from scratch before to successfully follow along. However, we do assume that you are comfortable doing things like adding and editing posts in the admin area or installing plugins.

The theme we will build is based on the Basic marketing site example you can find over on the Bootstrap examples page. For this demo we will build out templates for the following pages and functionality:

Custom homepage design
About page
Contact page
News section with comments
A widgetized sidebar

[h=2]Getting Started[/h] Before we get started there are a few things you will need to do:

Install WordPress
Download and Unzip Bootstrap
Install the Theme Test Drive plugin*

* You only need this plugin if you will be building the theme using a live site and don’t want people to see the new theme while you are developing it.

Once you have these things ready, open the directory with all your WordPress files and navigate to wp-content > themes.

Once you navigate to that folder create a new folder called “wpbootstrap.” Inside of that folder paste in the bootstrap folder.

Inside of that folder create a new file named index.php.

Now we’re going to copy the source code from the example basic marketing site and copy and paste it into the index.php file. Here is the source code you want to use. We’ve just linked to a txt version of the code since it is too long to embed in the post here.

bootstrap-demo-source-code

Now that we have a static HTML page, we’re going to move on to creating the main CSS page. WordPress requires a specially formatted comment to appear at the top of the style.css page. It uses this comment to get all of the meta information about your theme.

In the same folder as your index.php page create a new file named style.css. WordPress requires a CSS file with the specific name style.css, so we can’t name it anything else or our theme won’t work.

Once you have created a style.css file at the same level as your index.php file, add this comment to the top.

/*

Theme Name: WP Bootstrap

Theme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial

Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.

Author: Zac Gordon

Author URI: Learn Web Design, Web Development, and More | Treehouse

Version: 1.0

Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)

License URI: Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0

This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site Bootstrap

*/

The last thing we need to do before we install and start building our new theme is to upload an image that will appear with our theme in the WordPress admin area. This image needs to be 300 x 225 px and named “screenshot.png” You can use this image or create your own.

Your folder structure should now look like this:

We’re now ready to go into the admin area and install our new theme. Login to the admin area and go to Appearances > Theme. You should see WP Bootstrap listed as one of the themes.

Click Activate under the WP Bootstrap theme to set it as the current theme for the site.

NOTE: If you are using a live site and do not want people to see this theme under development, make sure to install and activate Theme Test Drive plugin.

Once it’s activated, visit your site and you should see something like this.

It’s clear that none of the CSS is working on this site currently, so in the next step we’ll start the process of converting this static file into a working WordPress theme.

[h=2]Converting Bootstrap Files to WordPress Templates[/h] Most WordPress themes include the following files:

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

You will usually see a lot more than these files, but we’re going to start with these files and build from there. Go ahead create empty files for the header.php, footer.php, and sidebar.php.

What we are going to do is take all of the HTML that would usually be included at the top of every page and cut and paste it into the header.php file. Then we will do the same for all of the HTML that would normally appear at the bottom of every page and cut and paste it into the footer.php file.

Let’s look at what each of these files look like now. Again these are just .txt files that have been linked to because all of the source code would be too much to list here. You can copy and paste the code from these files into your own .php files.

The sidebar.php file is still empty.

Now we are going to use our first WordPress tags to include the header and footer back into the index.php page.

The two tags we will user are get_header() and get_footer(). These are built in WordPress functions that find the header.php and footer.php files and include them at the top and bottom of the page. WordPress can do this because we named our files header.php and footer.php. If we named the files my-header.php and my-footer.php this would not work.

Here is what our index.php file should look like now:

<?php get_header(); ?>

<h1>Hello, world!</h1>

<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>

<p><a class="btn btn-primary btn-large">Learn more »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn" href="#">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn" href="#">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<p><a class="btn" href="#">View details »</a></p>

</div>

<?php get_footer(); ?>

You may be wondering why we would do that? The reason is that later we will be creating multiple pages in which we will want to include the header and footer code. If we just left the header and footer HTML in all of these pages and went to change something in the header or footer, we would have to have to update the HTML across all of the pages. Using the “embed” or “include” method allows us to change the header or footer code in one place and have it automatically fixed across all of the pages. It’s similar to the benefit of linking to CSS files instead of including all of the CSS at the top of each page.

Now that we have this done, we are going to fix all of the broken links to our CSS and JavaScript files.

Let’s start in the header.

Find the links to the CSS files in the header and change them from this

body {

padding-top: 60px;

padding-bottom: 40px;

}

</style>

To this

The in your style.css file, add the following:

@import tag to link to the Bootstrap CSS files from our main style.css file. Your site should now look like this: Much better! Before we move on to the footer, there is one more tag we have to add to the header. The wp_head() function is an important hook that allows for plugin developers to dynamically add CSS or JavaScript to your site. If we do not include this in our template, some plugins may not work. While we’re at it, we’re also going to remove a few extranious tags from our header. Your header.php template should look like this.

<head>

<title>Bootstrap, from Twitter</title>

<!--[if lt IE 9]>

<![endif]-->

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

</head>

<body>

</a>

<?php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?>

</ul>

</div>

</div>

Now, let’s go on to clean up the footer. The example file we download has links to a lot of JavaScript files that we don’t need for our site. So, we are going to start by deleting them. Update your footer so it looks like this. Your updated footer.php file should look like this:

<hr>

<p>© Company 2012</p>

</footer>

</div>

<!-- Le javascript

================================================== -->

</body>

</html>

Next we are going to add the wp_footer() tag that serves the same function as the wp_head(). We will place this right before the closing body tag. We are also going to change the way we load our JavaScript files and move them to the header.php file.

So, update your footer.php file so it looks like this:

<hr>

<p>© Company 2012</p>

</footer>

</div>

<?php wp_footer(); ?>

</body>

</html>

Now we can go back and add our JavaScript in the way WordPress recommends loading JavaScript. This method includes using the wp_enqueue_script() function.

First, we are going to use this function to load jQuery right about the wp_head(). Go ahead and place the following code into your header.php file like so.

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

Next we will load our JavaScript using the wp_head() function. Remember, the wp_head() function is what plugins and themes use to add CSS and JavaScript to the header.php file.

To do this we will have to create a new file called functions.php and load our JavaScript from there. This may seem like a lot of extra steps to load a JavaScript file, but as your themes get more complex it will help everything stay clean and organized.

In the same folder as your header.php file, create and open a functions.php file.

Paste into that file the following code:

<?php

function wpbootstrap_scripts_with_jquery()

{

// Register the script like this for a theme:

wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );

// For either a plugin or a theme, you can then enqueue the script:

wp_enqueue_script( 'custom-script' );

}

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>

To test that this is working, navigate to your site, resize it to be a tablet or mobile size and click on the menu drop down. It should drop down and look like this:

If that dropdown doesn’t work it means something went wrong linking to the JavaScript files. Make sure that you have properly uploaded the bootstrap > js folder and that your code is correct. You don’t want to build a responsive site with a broken mobile and tablet menu!

[h=2]Creating the WordPress Homepage[/h] Now that we have our basic static template setup, let’s make it dynamic by creating a homepage in WordPress and having it display on our site instead of the hardcoded HTML we have now.

To do this, go to the WordPress admin area and click Pages > Add New. Title the page “Home” and then click on the HTML tab above the Content Editor. Now we will cut the remaining markup from the index.php file and paste it into this page and click “Publish”. Your Home page should look like this.

All your index.php file should have in it now are the header and footer includes.

<?php get_header(); ?>

<?php get_footer(); ?>

To include the Home page content that we added in the WordPress admin area back into our our template dynamically we are going to use probably the most famous WordPress function called, the Loop.

The WordPress Loop does what it sounds like. It loops through a page or post and pulls in its title and content, as well as a lot of other information like the date it was published, the author who published it, and even any comments associated with the post or page.

The basic loop looks like this.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

Here is what your index.php file should look like with the loop in it.

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

<?php get_footer(); ?>

What we will do now is add in the WordPress code that pulls in the title and content of the page. The code for the title looks like this the_title() and the code for the content looks like this the_content(). You can see that they look very similar to the header and footer tags. Here is what the it looks like along with the loop.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

Before we can test this in the browser, we have to update a setting in WordPress to make it display our Home page as the front page instead of recent blog posts. To do this navigate in the admin area to Settings > Reading and under “Front page displays” and click on the “A static page” radio button. Next select “Home” from the “Front page:” dropdown.

Click save changes and then reload the homepage. We should now see the contents of the Home page we added in the admin area.

WordPress allows us to use a special file called the front-page.php file just for the home page of the site. Go ahead and save the index.php file as front-page.php and remove the get_title() from the template since we don’t want “Home” appearing in an h1 at the top of the page.

Your front-page.php file should look like this:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

You can leave the index.php page as is.

To show that this is all working, let’s try editing the homepage content in the admin area and see the changes reflected on the front of the site. Go back and edit the Home page content and remove the the buttons that appear under the three h2 headings. The modified code should look like this.

Now, revisit the front of the site. It should look like this.

Our home page is looking good. Let’s move on to adding the other pages of our site.

[h=2]Adding More Content and Navigation[/h] Go ahead and add an About, News, and Contact page in the admin area. We are going to use dummy content for now, but you can go back and add your own content later. Go ahead and add two or three blog posts as well.

[h=3]Navigation[/h] The next thing we will do is replace the static navigation menu on the site with one that will show the pages we just added in the admin area. To do this, find the unordered list with the class “nav” and delete the list items. We are also delete the sign in form since we will be logging into the site directly from the WordPress admin login screen.

The markup inside of the div with the class “navbar” should now look like this:

</a>

<a class="brand" href="#">Project name</a>

</ul>

</div>

</div>

Now we are going to use the WordPress code wp_list_pages() for listing the pages. We won’t go into depth on the options for this tag, but what it is doing is creating a list item and a link for each of the pages. Add the following code inside of the empty unordered list with the “nav” class.

<?php wp_list_pages(array('title_li' => '')); ?>

</ul>

If you go look at your site now you should should see the WordPress pages reflected in the main navigation.

There are two things we have to fix about this. First, we have to correct the order of the pages, and second we have to delete the Sample page. We’ll assume that you can delete (or move to trash) the sample page. To change the order of the pages go to the admin area and click on Pages.

Then hover over the the About page and click Quick Edit. Change the Order field to 1. Click Update. Change the News page order to 2 and the Contact page to 3. The Home page should keep the page order of 0.

When you visit your site now, the navigation should appear in the correct order.

We now have working navigation. However, since the WordPress navigation markup is slightly different from the Bootstrap markup, particularly in terms of the classes they use for current or active pages, we will have to modify the bootstrap.css file slightly.

In your theme folder go into bootstrap > css and open the bootstrap.css file. Around line 4595 you should see some styles for the Bootstrap .active class. Add the following styles to the rule.

.navbar-inverse .nav .active > a,

.navbar-inverse .nav .active > a:hover,

.navbar-inverse .nav .active > a:focus,

.navbar-inverse .nav .current_page_item a,

.navbar-inverse .nav .current_page_item a:hover,

.navbar-inverse .nav .current_page_item a:focus,

.navbar-inverse .nav .current_page_parent a,

.navbar-inverse .nav .current_page_parent a:hover,

.navbar-inverse .nav .current_page_parent a:focus {

Note: As you make more WordPress themes, you should look into using the custom Menus ability that WordPress includes. You can read about them here and here.

In the next section we will create the template for the pages and posts.

[h=2]Creating the Page, Post and Post Listing Templates[/h] [h=3]Pages Template[/h] Start with taking the index.php file and saving it as page.php. This will serve as the as the template for our pages.

First we should change the text that reads “Sorry, no posts matched your criteria.” to read “Sorry, this page does not exist.”

Next, we are going to add some Bootstrap markup to create a two column layout.

Modify your page.php template to include the Bootstrap “row” class and a “span8” and “span4” class. We’ll use the span8 for the page content and the span4 for sidebar content.

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

</div>

</div>

<?php get_footer(); ?>

Since we are going to be using the sidebar on some of the other templates we are going to take advantage WordPress’s get_sidebar() tag that works in the same way as the get_header() and get_footer() tags.

To do this we are going to create a new file called sidebar.php and paste in the following code

<h2>Sidebar</h2>

[h=3]Sidebar Template[/h] We will come back and modify this code later, but this will work for now.

Now go back to the page.php file and add in the get_sidebar() code inside the “span4” div like this.

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

If we take a look at one of our pages now we can see that we have the title, main content, and sidebar.

Our page template is looking pretty good. Let’s move on now to the News page.

[h=3]Posts Listing Page[/h] The news page is going to work a little differently because it needs to list out posts, not just page content. There are a couple ways to go about this, but we are going to take a very simple approach here.

To start save the page.php template as home.php. In WordPress, the home.php template is reserved for the page that lists out posts. In our case this is the template we will use for the News page.

The first thing we are going to do is hardcode an h1 tag into the top of the main content area that says News. This tag should be placed above the loop.

On this home.php template, the loop is going to loop through all of the blog posts. So, instead of using an h1 tag for the post titles we are going to change it to an h2, since the h1 will be used for the title of the page.

We are also going to add a new tag, the_permalink(), that we can use with an anchor tag to link from the main news page to individual news articles. This is what the markup with around the_title() should look like now.

Let’s make a few other tweaks to this template before we move one. First let’s change the no results text to say “Sorry, there are no posts.”

Next, we’re going to remove the post content from appearing. We’ll just list out the titles as links to the pages and let the viewers read the content after they click on the post title.

In the place of the content we’re going to add in the date of the post using a tag called the_time(). If you’ve used PHP before you may recognize you may recognize this tag. This tag is able be customized to display the date in pretty much any format you want. We are going to display the date in the following format:

Monday, October 1st, 2012

To do this we are going to use the_time() function customized like this:

the_time('l, F jS, Y')

Finally we are going to add an hr tag under the date separate the posts from each other.

The final home.php template should look like this.

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<hr>

<?php endwhile; else: ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

Now, in order to get the News page to display properly we will have to go back into the admin area to back to where we set the Home page to display as the front page. Navigate to the admin area and go to Settings > Reading. Select the News page from the dropdown next to the “Posts page:” label and click “Save Changes.”

Once this is done you should see should see the Posts listed when you go back to the News page.

[h=3]Single Post Template[/h] This leaves us one template left to do and that is the template to display individual posts. This template is going to look very similar to our page.php template so we’ll start by opening the page.php file and saving it as single.php. In WordPress, the single.php template is used to display individual posts.

The first change we will make here are to include the date of the post underneath of the title. We’ll use the same code as before.

The biggest change we are going to make to this template is adding the ability to post comments. While there is a lot of complex code that is required behind the scenes to make comments work, it is actually pretty easy to add comments to the template thanks to the comments_template() tag.

Once we add this below the content tag we will have comments enabled on our posts. We’ll also add an hr tag above the comments to help separate them from the post content. Our final single.php template should look like this.

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(); ?>

<hr>

<?php comments_template(); ?>

<?php endwhile; else: ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

We now have all of our basic template files complete. In this last section we’re going to clean up a few loose ends and finish up our basic responsive Bootstrap WordPress theme.

[h=2]Finishing the Theme[/h] [h=3]Updates to the Header[/h] One of the first details we need to take care of are the title tags. Title tags are an important part of a web site, especially in regards to its search engine optimization. Ideally we want to have the name of the page or post in the title as well as the name of the site.

We can accomplish this using a WordPress tag called the wp_title() tag. We will customize this tag slightly in the following way

wp_title('|',1,'right');

This will give us the page or post title we want, but we still want to have the name of the site as well. We can get this by using the bloginfo() function we used before but this time like this bloginfo(“name”). If we use these two together with the title tag we will get this.

Add this to the header.php file in place of the current title tag. You should now see the title tags appearing at the top of the page exactly how we want.

Next we are going to make the site title in the top left of the site match our site name and make it link to the homepage. This is how we will do that.

We will take this:

<a class="brand" href="#">Project name</a>

And convert it to this:

You can see we are using bloginfo(“name”) that we used in the title tag. The site_url() tag is new, but it does exactly what you think it would. It creates a link to the homepage of the site.

Now that we have created a link to the homepage we can remove the “Home” link from the page listing. We can do this by adding an extra option to the wp_list_pages() function. This option is the “exclude” option. In order to use it we have to have to look up the id of the Home page. To do this we navigate to the page in the admin area and look in the URL of the page.

In this example the Home page has an ID of 4. It may be different for your site. Once you have this ID, update the wp_list_pages() function like so (replacing the 4 with the ID of your homepage):

wp_list_pages(array('title_li' => '', 'exclude' => 4))

Note: If you use this in future themes you will need to update the ID with the ID of the new homepage.

[h=3]Widgetizing the Sidebar[/h] The last major step we are going to take is to do what’s called Widgetizing our theme. What this will do is allow us to use WordPress widgets in our sidebar.

To do this we will need to add some more code to our functions.php file.

Open the functions.php file and add the following code to the file.

<?php

function wpbootstrap_scripts_with_jquery()

{

// Register the script like this for a theme:

wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );

// For either a plugin or a theme, you can then enqueue the script:

wp_enqueue_script( 'custom-script' );

}

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

if ( function_exists('register_sidebar') )

register_sidebar(array(

'before_widget' => '',

'after_widget' => '',

'before_title' => '<h3>',

'after_title' => '</h3>',

));

?>

Once this is setup we are going to go back to our sidebar.php and replace the static content with the code that will allow us to update the sidebar with widgets via the admin area.

Update the sidebar.php so it looks like this:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php endif; ?>

[h=2]Download the Theme[/h] If you had trouble following along with this tutorial, you can download the finished theme here: wpbootstrap.zip

[h=2]Congratulations![/h] At this point we have a simple theme that you can begin customizing with your own content and styles. You can add any of your custom CSS to the styles.css file in your theme folder.

You should also feel comfortable editing the basic templates that we’ve created here on your own. If you’re interested, check out the list of all the possible WordPress Template Tags that you can use on your site.

If this was your first WordPress theme, you’re off to a good start. As we move on learning about building WordPress themes, we will learn how to make more and more things dynamic and customizable from the admin area, instead of in the code.

Source: How to Build a Responsive WordPress Theme with Bootstrap

Dubfx · April 4, 2014

Mersi! Bookmarked.

z4rk · April 4, 2014

Folositor. Multumesc

Sign In

How to Build a Responsive WordPress Theme with Bootstrap

Recommended Posts

BadPorn

Dubfx

z4rk

Join the conversation

Browse

Activity

Pages