These days I recommend using the Genesis Framework for WordPress and in the sites I build I incorporate the new Bootstrap v4 grid system into that.
11. The single post template
Right, we’re on the home stretch now, and the most complicated bits are behind us. By default, the index.php file is what is used to generate each single post. If it’s a simple site with not many different post types and templates then you could edit that one, or we can create a template called single.php – which will control the single posts. That’s what we’ll do here as having a more specific template name makes it easier to identify at a glance what’s controlling what.
Making this template is similar to making the home page one, but we’ve already done most of the work and learned all about the loop. The process is pretty familiar now
- Strip out the
<head>and the header – and replace that with the line<?php the_header(); ?> - Do the same with the footer divs – replace all that and the javascript at the bottom of the static html file with
<?php the_footer(); ?>in the single.php one. Already your page is looking much shorter and simpler! - Next we can strip even more code from our template by removing everything inside the sidebar and replacing it with the WordPress equivalent — in the next step we’ll see how to replicate it using the WordPress widgets functionality. Don’t remove the sidebar itself, just the content inside it. You will want to keep its container div in the template. This is usually something like
<aside class="span4 sidebar">or<div class="span3"> id="sidebar-main">
We’ve already seen the WordPress loop in action, and we’re going to invoke it again here.
After the the_header() line, start up the loop like this
<?php while ( have_posts() ) : the_post(); ?>and just before the the_footer() line, end the loop like this:
<?php endwhile; ?>In the rest of the template you can leave all the layout and structural divs. For instance if the title of the page in the original template is something like
<h1 class="page-title">Here is the title</h1>
Then you should replace it with
<h1 class="page-title"><?php the_title(); ?></h1>
Similarly you can delete out all of the actual content of that post/page and replace it with <?php the_content(); ?>. Anything you put into the WordPress editor screen will appear where this the_content tag is. Again, if you want to make sure it’s contained in a span6 div for example, then you need to make sure those opening and closing div tags are hard-coded in the template.
Lastly we’ll do that sidebar. As you might expect by now, the process is that we remove all the actual sidebar content itself and replace it with
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Main Sidebar') ) : ?>
<?php endif; ?>
You’ll probably recognise that as being very similar to the way we printed the footer widget areas earlier.
12. The sidebar
We’ve added in that dynamic_sidebar(‘Main Sidebar’) tag, but WordPress won’t recognise that yet.
Let’s go back to our functions.php file and add in the sidebar underneath the Footer widget areas we made in step 5.
register_sidebar(array(
'name' => 'Main Sidebar',
'id' => 'sidebar-main',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2 class="upper2 title3"><span>',
'after_title' => '</span></h2>',
));
Check the CSS styling of the titles of the sidebar items in your original HTML template – and make sure you’re replicating that in the 'before_title' => '<h2 class="upper2 title3"><span>', array items above. Similarly, if each sidebar item in the html template is is wrapped in a div with a certain class (like
'after_title' => '</span></h2>',<div class="widget">), then you can copy and paste that in like this:
'before_widget => '<div class="widget">'
'after widget' => '</div>'
13. Archive/category pages
By now I hope you’ve seen enough to be able to figure out the rest of the pages you need to build. The archive pages work pretty much the same as the loop on the home page that showed the list of posts in step 8.
14. Other WordPress templates
You will probably also want to create a 404 page, a search results page and you might want to make some custom post templates. As an example of what these do, I use a separate template for the blog posts and charity website toolkit posts – so each can be styled differently and have different sidebars in them.
15. Bootstrap shortcodes
If you don’t fancy typing out all the Bootstrap HTML for each element you add (or some of your content editors aren’t familiar with HTML) then there’s some good WordPress Bootstrap Shortcode Plugins that enable you to use a shortcode like this [BS_BUTTON color=”success” type=”submit” value=”y”]Submit[/BS_BUTTON] to output buttons, icons, popovers, carousels, image styles and much more. I don’t a plugin because it’s just me that adds content to this site and I like using the full Bootstrap code so I know exactly what’s going where. Have a look at some of them on Google to see if there’s one that might be useful to you.
16. Next steps/troubleshooting
Bootstrap version 3 is out now. You might want to upgrade to that, but bear in mind it uses a different layout grid naming system and so you’ll need to update all of your span1-12 divs. It also handles image carousels differently so your existing ones will break if you just update the codebase without also changing the actual coding of the carousel.
If you run into any problems with any of the steps in this tutorial then leave me a note in the comments below and I’ll see if I can point you in the right direction.
