WordPress Bootstrap Theme

May 28, 2012

Table of contents:

The files we are going to need
Creating the stylesheet
The header
The footer
The sidebar
The Index file
Post pages
Pages
Conclusion

When I was first learning how to make WordPress themes, I searched long and hard for a stripped back skeleton theme where I could see the exact inner workings of WordPress, how the individual files functioned together, and most importantly a simple working example I could repeatedly break to fully understand how WordPress themes worked. Eventually I gave up and ended up just buying a very simple theme, and with the help of a handful of tutorials, managed to reverse engineer everything I needed to make my own themes from scratch.

Even to this day, I like to have a stripped back theme with just the basic functionality as my starting point when creating a new theme. I have forgotten how many themes I’ve now created, yet I still haven’t made myself a bootstrap theme I can use as a foundation each time I create a new WordPress site.

And so, I decided this would be a good opportunity to document my bootstrap WordPress theme once and for all.

I think this post will be helpful for a number of different people. From Designers and Developers who are looking for a basic starting point for each new website, to someone who is trying to get to grips with how WordPress themes work.

If you have any questions about this post, or WordPress themes in general, feel free to leave a comment.

The files we are going to need

The following is a list of files that we are going to be creating in this tutorial. This will cover the minimum you need to get your theme off the ground. There are many additional files you can add to further expand WordPress, but we’ll leave them for another day.

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

Creating the stylesheet

The first file we need to create is style.css. This is used to hold your Theme details and allows you to select your theme from the WordPress back-end.

Create a file called style.css and save it into your WordPress theme directory. Copy and paste the following into your style.css file and fill in your details.

/*
Theme Name: My theme
Theme URI: https://thissite.com/
Description: This is a description of my theme
Author: My name
Author URI: https://mysite.com
Version: 1.0
*/

There are additional details and comments you can add into this section, but for now this is all you need to worry about. Save this file and then go into your WordPress back-end. Go to Appearance > Themes and you should see your new theme as a new option. Click Activate, then go to the front-end of your site. You should see a blank page. Congratulations, you have your theme up and running.

The header

Next we will create the header.php file. Your header file should contain everything you want to keep constant at the top of your page. By creating your theme like this, should you ever want to change any aspect of this area of your website, you will only have to change it once.

In this example I’m only going to show you the basics, but it’s a good idea to have certain elements like your navigation structure within your header.php file.

Create a file called header.php and copy and paste the following.

<!doctype html>
<title><?php wp_title(""); ?></title>
<link href="<?php bloginfo(
    "stylesheet_url"
); ?>" media="screen" rel="stylesheet" type="text/css" />
<?php wp_head(""); ?>

As you can see, we use a couple of PHP tags in the header. Here’s an explanation of what they do.

wp_title - This automatically inserts the title of your WordPress site and the page or post into your HTML title tag. This is very important for SEO, so you don’t want to miss it out or put a static title in there.

bloginfo( ‘stylesheet_url’ ) - Usually when you are linking to a stylesheet, you would simply write “/path/to/style.css”. However, because your stylesheet is within your theme’s directory, we have to link to a long path name. This tag automatically inserts this path, so you don’t have to.

wp_head - WordPress and some third-party plugins sometimes need to insert stuff into your header.php file. The wp_head tag allows any required code to be automatically inserted so you don’t have to alter your header.php file when installing new plugins.

The footer is even easier than the header.

<?php wp_footer(); ?>

Here we just close the body and html tags and include the wp_footer tag which does the same job as the wp_header tag, but in the footer. Again, if you want to have a constant footer throughout your website, you would write the code here.

The sidebar is the constant area down the left or right hand side of your website. Depending on the design of your theme, this is likely to be very customised.

If you want to widgetise your sidebar, you will need to use this file to dynamically choose which widgets to display. I’m not going to go into depth about how to do this as it is out of the scope of this tutorial.

For this tutorial, I’m just going to keep the sidebar as a simple unordered list of links.

Create a file called sidebar.php and copy and paste the following code.

<h2>My favourite links</h2>
<ul>
<li><a href="#">My friend's site</a></li>
<li><a href="#">My company's site</a></li>
<li><a href="#">My dog's site</a></li>
</ul>

The Index file

Next we need to create the index.php file which is the default file to load when someone visits your homepage. Usually with a WordPress blog, this is a list of blog post titles in reverse chronological order.

The first thing to do is to call the header, footer and sidebar files into the index file.

Create a file called index.php and copy and paste the following into it.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now when you load your WordPress theme in your browser, you should see the contents of the three files you’ve just made. Now whenever you make a change to any of these files, it will be reflected across your whole site.

Next we need to add in our reverse chronological list of blog posts. To do this, WordPress uses something called The Loop. The Loop is basically just a way of querying the WordPress database and then outputting it to the screen.

So to add your list of blog posts, copy and paste the following into your index.php file under the header tag and before the sidebar tag.

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

<h2><a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<div class="meta">
<span>Posted by <?php the_author_posts_link(); ?></span>
<span>on <?php the_time("F jS, Y"); ?></span>
<span> | <a href="<?php the_permalink(); ?> #comments"><?php comments_number(
     "No Comments",
     "1 Comment",
     "% Comments"
 ); ?></a></span>
</div>

<?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>">Read more</a>

<?php
    endwhile; ?>
<?php
else:
     ?>

<p>Sorry, no posts matched your criteria.</p>

<?php
endif; ?>

Save your index.php file and then reload your WordPress theme in your browser. You should now see the “Hello World” WordPress post and any additional posts you might have entered.

Hopefully the code above should be pretty self-explanatory from what you can see on screen. Although the WordPress tags can seem a little overwhelming, remember they are just there to show dynamic content.

Post pages

Next we are going to create the file that displays individual posts to the user. This is when a user clicks on the title of one of your blog posts to read more. Generally this will include a couple of different elements than your homepage so it’s a good idea to use a different file.

Create a file called single.php and copy and paste the following code.

<?php get_header(); ?>

<?php if (have_posts()) {
    while (have_posts()) {
        the_post();
    } ?>
<h1><?php the_title(); ?></h2>

<div class="meta">
<span>Posted by <?php the_author_posts_link(); ?></span>
<span>on <?php the_time("F jS, Y"); ?></span>
<span> | <a href="#">0 comments</a></span>
</div>

<?php the_content(); ?>

<?php comments_template(); ?>

<?php
} else {
     ?>

<p>Sorry, no posts matched your criteria.</p>

<?php
} ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

A couple of things to note about the code above. Firstly, you will see that now we are using a h1 tag instead of a h2 tag for the post title and it is no longer a link. Secondly, we are using the_content WordPress tag to display the full post and not just the excerpt. And finally we are using comments_template to display the comments of this post. I’m not going to show you the finer details of the comments template in this post as there is a lot to talk about, however, I would recommend using Disqus which I use on this site. All you have to do is install the plugin, sign in and Disqus will automatically start working with your WordPress theme.

Pages

And finally, we have the pages theme file. Pages are simple semi-static pages of text that you might use to talk about your website or allow people to contact you. These differ from post pages as you would not normally have people leave comments.

Create a file called page.php and copy and paste the following code.

<?php get_header(); ?>

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

<h1><?php the_title(); ?></h2>

<?php the_content(); ?>

<?php
    endwhile; ?>

<?php
else:
     ?>

<p>Sorry, no posts matched your criteria.</p>

<?php
endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

As you can see, this is essentially just a stripped back version of the single.php file.

Conclusion

Now you should have everything you need to start building your theme. I’ve purposely missed out all style and markup attributes to allow you to start with a clean slate. If you look at this theme in your browser it is going to look terrible, but it does give you the foundation to start marking up and styling your theme without the bloat of other bootstrap of skeleton themes.

What aspects of a WordPress theme would you like me to show you how to make?