We follow the same steps to create our footer template file as we did for the header and sidebar.
footer.php
in your theme directory.index.php
file and cut everything from the footer and below in your design. This will be everything from the opening <footer>
tag to the closing </html>
tag. In our theme, the code is:<footer> <h2 class="screen-reader-text">Footer Information:</h2> <aside class="general left two-thirds"> <h3>Socialize</h3> <ul class="grid4up"> <li><a href="#" class="soc facebook">facebook</a></li> <li><a href="#" class="soc twitter">twitter</a></li> <li><a href="#" class="soc rss">rss</a></li> <li><a href="#" class="soc google">gmail</a></li> </ul> <div class="push"></div> <h3>About us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </aside> <aside class="navigate right third"> <h3>Navigate</h3> <ul> <li><a href="#" target="" title="">title to link01</a> </li> <li><a href="#" target="" title="">another link02</a></li> <li><a href="#" target="" title="">a different title: link03</a></li> <li><a href="#" target="" title="">yet another link04</a></li> </ul> </aside> <div class="push"></div> </footer> </div><!--//#across--> </body> </html>
Again, this code doesn't include any widget areas yet—we'll correct this in Chapter 4, Advanced Theme Features.
footer.php
file, and in your index.php
file include the footer back in with the get_footer
include template tag at the very beginning of the file:<?php get_footer(); ?>
footer.php
and index.php
files and refresh your browser. Once again, your page won't have changed.When you save these files and reload your WordPress site, the result should look no different than when your footer markup and code was inside the index.php
file. Now from here onwards, for each new page type we create, we can just include the footer code with the get_footer
template tag.