We create a sidebar file as follows:
sidebar.php
in your theme directory.index.php
file and cut everything from the sidebar in your design. This is usually below the closing </content>
tag. For our theme, the code we need to cut is as below:<!-- #right sidebar --> <aside class="sidebar right third"> <div class="bdr grd-vt-main rnd shdw-centered"> <h2 class="features embossed">Features:</h2> <ul class="tocNav"> <li><a href="#">Article Name 01 Lorem ipsum dolor sit amet consectetuer adipiscing elit</a></li> <li><a href="#">Article Name 02 Lorem ipsum dolor sit amet</a></li> <li><a href="#">Article Name 03 Lorem ipsum</a></li> </ul> </div> <div class="bdr grd-vt-secondary rnd shdw-centered"> <h2 class="columns embossed">Columns:</h2> <ul class="tocNav"> <li><a href="#">Name of Category 01 Lorem ipsum (#)</a></li> <li><a href="#">Name of Category 02 Lorem (#)</a></li> <li><a href="#">Name of Category 03 Lorem ipsum dolor (#)</a></li> </ul> </div> <div class="bdr bg-light2 rnd shdw-centered"> <h2 class="pastIssues embossed">Past Issues:</h2> <ul class="tocNav"> <li><a href="#">Archive Link year/month 01</a></li> <li><a href="#">Archive Link year/month 02</a></li> <li><a href="#">Archive Link year/month 03</a></li> </ul> </div> <div class="push"></div> </aside><!--//.sidebar1 -->
The previous code doesn't include any widget areas and still consists of static markup—don't worry, we'll change all this in Chapter 4, Advanced Theme Features, and make our sidebars much more jazzy.
sidebar.php
file, and in your index.php
file, include the sidebar back in with the get_sidebar
include template tag at the very beginning of the file:<?php get_sidebar(); ?>
sidebar.php
and index.php
files and refresh your browser. Again, your page won't have changed.Warning!
The code you paste into your sidebar.php
file should contain only the code required to display the sidebar and nothing else. Don't copy any additional code between the closing </aside>
tag and the opening <footer>
tag, as the template files don't have a sidebar and so they don't include the sidebar.php
file.
We created a sidebar.php
template file to hold the code for our sidebar, moved the code for the sidebar into it, and then included it in index.php
with the get_sidebar
include template tag.
The final element of our theme, which we need to give its own file, is the footer. Footers these days are often much more than just a copyright notice and designer credit. Lots of sites make use of fat footers , which display much more information and list content from elsewhere in the site. You may have noticed that our design for Open Source Magazine includes one of these fat footers.
To create our fat footer, we'll add widget areas
to our footer as well as our sidebar, but not just yet. First we need to create our footer.php
file—we'll move on to adding the widgets in Chapter 4, Advanced Theme Features.