Skip to main content
April 1, 2026Noble Desktop Publishing Team/7 min read

Splitting the Page into Templates

Master WordPress Template Organization and File Structure

WordPress Template Components

Header Template

Contains DOCTYPE, HTML head section, site header, and navigation. Reusable across all pages for consistent branding.

Sidebar Template

Houses widgets, promotional content, and secondary navigation. Maintains consistent layout structure throughout the site.

Footer Template

Includes contact information, copyright, and closing scripts. Provides consistent site closure and legal information.

Topics Covered in This WordPress Tutorial:

Creating Header, Footer, & Sidebar Templates, Adding Header & Footer Functions

Exercise Preview

split into templates preview

Template Modularity Benefits

By splitting page components into separate templates, you create a single point of control for sitewide changes. Edit header.php once to update headers across all pages instantly.

Exercise Overview

In this exercise, we'll implement one of WordPress development's most powerful organizational principles: template modularity. By breaking down our monolithic page structure into focused, reusable components—header, footer, and sidebar templates—we're establishing a foundation that will save countless hours down the road. When you need to update navigation across your entire site or modify footer content, you'll edit just one file instead of hunting through dozens of templates. WordPress provides a sophisticated system of reserved filenames specifically designed to make this modular approach seamless and intuitive.

If You Did Not Do the Previous Exercise

  1. In a web browser, navigate to localhost:8888/mrp/wp-admin (Mac) or localhost/mrp/wp-admin (Windows) and authenticate if prompted.
  2. From the Dashboard sidebar, hover over Appearance and select 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 select it.
  6. Click Install Now, then click Activate.

Now let's begin the systematic process of modularizing our theme. We'll start with the header component, which contains everything from the DOCTYPE declaration through the opening of our main content area.

WordPress Theme Installation Process

1

Access WordPress Dashboard

Navigate to localhost:8888/mrp/wp-admin (Mac) or localhost/mrp/wp-admin (Windows) and log in if prompted

2

Navigate to Themes

Mouse over Appearance in the left sidebar and click Themes to access theme management

3

Upload Theme File

Click Add New, then Upload, browse to mrpTheme-ready-for-templates.zip and install

Creating Header.php

  1. In your code editor, open index.php from the mrpTheme folder if it isn't already active.

  2. Select all the code from the document's beginning through and including the opening tag of the contentWrapper <div> (approximately line 25). This encompasses your entire document head, header section, and navigation:

    <!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. Cut this selection using Cmd–X (Mac) or Ctrl–X (Windows).

  4. Create a new file in your editor.

  5. Paste the header content using Cmd–V (Mac) or Ctrl–V (Windows).

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

    NOTE: The filename header.php is part of WordPress's template hierarchy—the system automatically recognizes and can reference this file through built-in functions.

  7. To display the content stored in header.php, you need to include a template call in your index.php file. Switch back to the index.php tab.

  8. At line 1, add the following WordPress function to pull in your newly created header.php file:

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

    NOTE: The get_header() function is WordPress's standard method for including header.php—it automatically handles the file path and inclusion logic.

  9. Save the file and preserve your work.

  10. Test your modular header by opening a browser and navigating to:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

  11. Keep this browser tab open—you'll use it to verify each change as we continue building our modular template system.

With the header successfully modularized, let's tackle the sidebar component. This process follows the same pattern but focuses on the aside content that appears consistently across your site pages.

Creating Sidebar.php

  1. Return to your code editor and ensure index.php is active.

  2. Locate and select the complete #aside div section below the Loop (approximately lines 18–29). This includes all sidebar content and its closing comment:

    <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. Cut this selection using Cmd–X (Mac) or Ctrl–X (Windows).

  4. Create a new file in your editor.

  5. Paste the sidebar content using Cmd–V (Mac) or Ctrl–V (Windows).

  6. Save this file as sidebar.php in your mrpTheme folder:
    • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
    • Windows: C: > xampp > htdocs > mrp > wp-content > themes

  7. Switch back to the index.php file.

  8. Around line 18, insert the WordPress sidebar function call in the location where your sidebar content was previously located:

    <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 your changes to maintain version control.

  10. Verify your sidebar modularization by returning to your browser and reloading:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

Now we'll complete our template modularization with the footer component. This final step will give you complete separation of concerns across your theme's major structural elements.

Creating Footer.php

  1. In index.php, select all remaining code after the get_sidebar() function call, beginning around line 19. This encompasses your entire footer structure and closing HTML tags:

    </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. Cut this selection using Cmd–X (Mac) or Ctrl–X (Windows).

  3. Create a new file in your editor.

  4. Paste the footer content using Cmd–V (Mac) or Ctrl–V (Windows).

  5. Save this file as footer.php in your mrpTheme folder:
    • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
    • Windows: C: > xampp > htdocs > mrp > wp-content > themes

  6. Return to index.php.

  7. Below your sidebar code around line 19, add the WordPress footer function call:

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

  8. Save the file to preserve your modular template structure.

  9. Confirm your complete template system works by refreshing your browser:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

Your template modularization is now complete, but we need to add two critical WordPress functions that enable proper plugin integration and administrative functionality. These hooks are essential for professional WordPress development in 2026.

Implementing Essential WordPress Hook Functions

Now that your header and footer templates are properly separated, we need to implement two crucial WordPress hook functions. These functions serve as integration points where WordPress core and plugins can inject necessary code—from admin bars and SEO meta tags to analytics scripts and performance optimizations. Omitting these hooks is a common oversight that can break plugin functionality and limit your theme's professional compatibility.

  1. Switch back to your code editor and open header.php.

  2. Locate the stylesheet link around line 7 and add the wp_head() function immediately after it:

    <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 WordPress's primary injection point for head content. This includes critical elements like the admin bar CSS, plugin-generated meta tags, SEO optimization code, and performance monitoring scripts. Modern WordPress development relies heavily on this hook.

  3. Save header.php to implement the head hook.

  4. Switch to footer.php in your editor.

  5. Locate the closing </body> tag around line 13 and add the wp_footer() function just before it:

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

    NOTE: The wp_footer() function provides the injection point for footer scripts and tracking code. Many performance optimization plugins, analytics tools, and JavaScript frameworks depend on this hook to load resources efficiently at page bottom. While not immediately visible in this theme, it's essential for future scalability and plugin compatibility.

  6. Save footer.php to complete your professional template structure.

Key Takeaways

1WordPress template separation improves maintainability by creating single points of control for sitewide changes
2Reserved filenames like header.php, sidebar.php, and footer.php are automatically recognized by WordPress functions
3The get_header(), get_sidebar(), and get_footer() functions include their respective template files in any WordPress page
4Template files must be saved in the active theme directory: wp-content/themes/themename/
5The wp_head() function should be placed before the closing </head> tag to enable WordPress and plugin functionality
6The wp_footer() function should be placed before the closing </body> tag for proper script and tracking code insertion
7Cutting and pasting code between files during template creation maintains existing functionality while improving organization
8Testing after each template creation step ensures the website continues to function properly throughout the development process

RELATED ARTICLES