703.829.0809

WordPress Theme Templates

Wordpress Theme TemplatesWhat are templates?

A template is a PHP file that is used to display content on the front-end of the website. In WordPress, most themes will come with a few templates that defines the structure of the theme, which are:

  • header.php
  • index.php
  • footer.php

Each part is broken into sections because WordPress is a dynamic CMS that runs an entire site rather than just a single HTML page.

With templates, it allows you to re-use sections (templates) across different templates. For example, the footer.php file contains all of the footer content of your site. The header.php file contains all of the header content of your site. So instead of creating many files with the same footer information, you can just call the footer template to display the footer section on all pages.

Header.php

The header.php template contains all the content that is shown at the top on all the pages of your site. For example, the logo and main menu are on all pages so they will be added to the header.php file. The header.php template will also contain the Doctype, meta tags, title, wp_head function, styles, and scripts.

Here’s a basic example of a header.php:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <script type="text/javascript" src="script.js"></script>
    <?php wp_head(); ?>
 </head>
 <body> 
   <div class="container">
     <div id="logo"></div>
     <div id="main-menu"></div>

Those with HTML experience the code above should look familiar to you. The wp_head(), this is a very important function. WordPress adds code from plugins, usually style and script libraries, you must call this function.

Index.php

The index.php template contains all the default content (posts, pages, custom post types, etc.) that displays on your site. The important thing about the index.php template is to bring everything together.

Here’s a basic example of a index.php:

<?php get_header(); ?>
<div id="main">
  <?php
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post(); 
      // Post Content
    } // end while
  } // end if
  ?>
</div>
<?php get_footer(); ?>

The code above does several things:

  • The get_header() is a WordPress fuction to call the header.php template file.
  • The PHP code within the div id=”main” is known as The Loop. The Loop is PHP code used by WordPress to display content from posts or pages.
  • The get_footer(), similar to the get_header() function, instead calls the footer.php template file.

Footer.php

The last template we’ll cover is the footer.php template. Reason why we saved it for last is because the footer.php is also the last section to be call on your site. The footer.php template closes out all open HTML tags that the header.php template opened.

Here’s a basic example of a footer.php:

      <div id="footer-menu"></div>
    </div>
    <?php wp_footer(); ?>
  </body>
</html>

As you can see, the above code is mostly closing tags. Like the header.php template, you also noticed there’s a php function wp_footer(). This is also a very important function that you must call.

So we just covered three important templates, but in WordPress, through its powerful Theme system allows you to define as few or as many templates as you like. These template files can be configured for use under specific situations.

Go ahead and start creating your own custom templates and leave me a comment on what you come up with!


Related Posts


Comments

There are currenty no responses.

Leave a Reply

Your email address will not be published. Required fields are marked *

Request A Quote
Let's take your business to the next level. Fill out the form below to get started!