Splitting the Page into Templates

Free WordPress Tutorial

Learn how to create header, footer, and sidebar templates in WordPress with this detailed tutorial, including exercise previews and step-by-step instructions.

This exercise is excerpted from Noble Desktop’s past WordPress training materials and is compatible with WordPress updates through 2020. To learn current skills in WordPress, check out our WordPress Bootcamp and coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this WordPress tutorial:

Creating header, footer, & sidebar templates, Adding header & footer functions

Web Design Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Exercise Preview

split into templates preview

Exercise Overview

In this exercise, we will divide the code for each area of the page into a series of mini-templates. That way when we create additional template pages later, we’ll have only one file to edit if we want to make a sitewide change to all the headers, footers, or sidebars across our templates. WordPress has a number of reserved filenames that we’ll take advantage of to make this easier.

If You Did Not Do the Previous Exercise

  1. In a web browser, go to localhost:8888/mrp/wp-admin (Mac) or localhost/mrp/wp-admin (Windows) and log in if prompted.
  2. On the left of the Dashboard, mouse over Appearance and click Themes.
  3. Click the Add New button.
  4. Click the Upload link, then the Browse (or Choose File) button.
  5. Navigate to Desktop > Class Files > WordPress.org Class and double–click mrpTheme-ready-for-templates.zip to open it.
  6. Click Install Now, then click Activate.

Making header.php

  1. In a code editor, open index.php from the mrpTheme folder if it isn’t already open.

  2. Select all the code from the start of the document through (including) the opening tag of the contentWrapper <div> (around line 25):

    <!DOCTYPE HTML>
<html>
<head>

    Code Omitted To Save Space 

    </head>
<body>
<div id="header">

    Code Omitted To Save Space 

    </div><!-- end header -->
<div id="nav">
   <div class="contentWrapper">
      <?php wp_nav_menu(); ?>
   </div>
</div><!-- end nav -->
<div id="mainContent">
   <div id="contentTop"><!-- for bg graphic --></div>
   <div class="contentWrapper">

  3. Hit Cmd–X (Mac) or Ctrl–X (Windows) to cut it.

  4. Create a new file.

  5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the header content.

  6. Save the file as header.php into the mrpTheme folder located here:
    • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
    • Windows: C: > xampp > htdocs > mrp > wp-content > themes

    NOTE: header.php is one of the reserved filenames that WordPress uses.

  7. In order to display the content stored in header.php, you must include the template in your index.php file. Switch back to index.php.

  8. On line 1, add the following to pull in the header.php file:

    <?php get_header(); ?>
   <h1>Welcome to MRP</h1>
   <div id="primary">

    NOTE: get_header() looks for a file called header.php and includes it.

  9. Save the file.

  10. Let’s make sure it still works. Open up a browser and go to:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

  11. Leave this page open so we can come back and reload to see the changes we make.

Making sidebar.php

  1. Switch back to your code editor.

  2. In index.php, below the Loop, select the entire #aside div and the end comment (around lines 18–29):

    <div id="aside">
   <h3>Our Promise To You</h3>

    Code Omitted To Save Space 

       <h3>We Are An Authorized<br>
      Dealer For</h3>
   <img src="<?php bloginfo( 'template_directory' ); ?>/img/authorized-dealer-logos.png" alt="" width="235" height="353">
</div><!-- end aside -->

  3. Hit Cmd–X (Mac) or Ctrl–X (Windows) to cut it.

  4. Create a new file.

  5. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the sidebar content.

  6. Save the file as sidebar.php into the mrpTheme folder located here:
    • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
    • Windows: C: > xampp > htdocs > mrp > wp-content > themes

  7. Switch back to index.php.

  8. Around line 18, add the following bold code to put the sidebar in:

                <p><br>Sorry, no posts matched your criteria.</p>
         <?php endif; ?>
      </div><!-- end primary -->
      <?php get_sidebar(); ?>
   </div><!-- end contentWrapper -->
</div><!-- end mainContent -->
<div id="footer">

  9. Save the file.

  10. Let’s make sure the site still works. Return to the browser and reload:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

Making footer.php

  1. Back in index.php, select all the code after the get_sidebar() line, starting around line 19 (which will be the footer):

       </div><!-- end contentWrapper -->
</div><!-- end mainContent -->
<div id="footer">
   <div class="contentWrapper">
      <div class="contactInfo">
         Monteith Restoration &amp; Performance • 856 S. Mt. Pleasant Rd., Lebanon, PA 17042 • 717-964-3345 • <a href="mailto:wes@monteithrestoration.com">wes@monteithrestoration.com</a>
      </div>
   </div>
</div><!-- end footer -->
<script type="text/javascript">
   try { Cufon.now() } catch(e) {}
</script>
</body>
</html>

  2. Hit Cmd–X (Mac) or Ctrl–X (Windows) to cut it.

  3. Create a new file.

  4. Hit Cmd–V (Mac) or Ctrl–V (Windows) to paste the footer content.

  5. Save the file as footer.php into the mrpTheme folder located here:
    • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
    • Windows: C: > xampp > htdocs > mrp > wp-content > themes

  6. Switch back to index.php.

  7. Below the sidebar code around line 19, add the following to put the footer in:

             <?php endif; ?>
      </div><!-- end primary -->
      <?php get_sidebar(); ?>
<?php get_footer(); ?>

  8. Save the file.

  9. To make sure it still works, go back to your browser and reload:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

Adding in Header & Footer Functions

Now that we have our header and footer templates created, there’s a couple of functions to add to them. WordPress and various plugins can use these functions to insert code, so we need to make sure that they are in there.

  1. Switch back to your code editor.

  2. Switch to header.php.

  3. Below the style sheet link around line 7, add the following:

    <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title>
<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet" type="text/css">
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo( 'template_directory' ); ?>/jquery/jquery-1.4.2.min.js"></script>

    NOTE: The wp_head() function is used to insert content like scripts and meta tags into the <head>. For example, the admin bar at the top of the page that shows up when you are logged in.

  4. Save the file.

  5. Switch to footer.php

  6. Right before the closing </body> tag, around line 13, add the following:

    <script type="text/javascript">
   try { Cufon.now() } catch(e) {}
</script>
<?php wp_footer(); ?>
</body>
</html>

    NOTE: Like the wp_head() function, this can be used by WordPress or a plugin to put code into the bottom of the page. It isn’t currently used in this theme, but it’s a good idea to put it in for future use.

  7. Save the file.

How to Learn WordPress

Master WordPress with hands-on training. WordPress is a content management system (CMS) commonly used to build websites and blogs.

Yelp Facebook LinkedIn YouTube Twitter Instagram