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
and the header – and replace that with the line
- Do the same with the footer divs – replace all that and the javascript at the bottom of the static html file with
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
or
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 thisand just before the
the_footer()
line, end the loop like this: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
Here is the title
Then you should replace it with
Similarly you can delete out all of the actual content of that post/page and replace it with
. 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
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' => '
', 'after_title' => '
', ));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' => '
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' => '