Time for action – creating the sidebar.php file

We create a sidebar file as follows:

  1. Create a file called sidebar.php in your theme directory.
  2. Open up your 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  -->

    Tip

    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.

  3. Paste that into your 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(); ?>
  4. Save both the sidebar.php and index.php files and refresh your browser. Again, your page won't have changed.

    Tip

    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.

What just happened?

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.

We'll finish off by repeating this process for our footer.

Finishing off with the footer

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset