DocsWP — WordPress Help

THB Tutorials: Under Construction

Template Files

Create Template Files for Your Theme

Now it’s time to add some more standards files to the theme that you started in Your First Theme.  While many themes have around 30+ files, you’ll start by adding just 5 new files to your theme. Right now your theme should have index.php and style.css.

You’re going to create the following files.  Most are self-explanatory from their name alone. This section will only cover creating the files, you’ll find out more about how the code works in later sections.

  • header.php – generates the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.Header The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.(s) for all your theme’s pages
  • footer.php – generates the footer(s) for all your theme’s pages
  • page.php – generates a static page
  • home.php – generates your main blog posts page
  • single.php – generates a single blog post

The tutorial follows these broad steps:

  1. Breaking the code contained in index.php into modular parts (i.e. the header and footer)
  2. Using a template tag in index.php to include these modular parts
  3. Duplicating your index.php file to use as the basis for other parts of your theme (your homepage, single post, and static page)

Header.php

1. Open the theme folder you created in Your First Theme in wp-content/themes/my-first-theme.

2. Create a new file called header.php.

3. Open the index.php file and cut out the following code. It’s important that you cut the code, don’t just copy it, as you’re going to place it in the new file.

<br />
&lt;!DOCTYPE html><br />
&lt;html><br />
 &lt;head><br />
 &lt;meta charset=&quot;&lt;?php bloginfo( &#8216;charset&#8217; ); ?>&quot;><br />
 &lt;title>&lt;?php wp_title( &#8216;|&#8217;, true, &#8216;right&#8217; ); ?>&lt;/title><br />
 &lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;?php echo esc_url( get_stylesheet_uri() ); ?>&quot; type=&quot;text/css&quot; /><br />
 &lt;?php wp_head(); ?><br />
 &lt;/head><br />
 &lt;body><br />
 &lt;h1>&lt;?php bloginfo( &#8216;name&#8217; ); ?>&lt;/h1><br />
 &lt;h2>&lt;?php bloginfo( &#8216;description&#8217; ); ?>&lt;/h2><br />

4. Paste the code into header.php file. Save both files.

Footer.php

1. Create a footer.php file.

2. Cut out the following code from your index.php file:

<br />
           &lt;?php wp_footer(); ?><br />
	&lt;/body><br />
&lt;/html><br />

3. Paste the code into your footer.php file. Save both files.

Update Index.php

Now that you’ve pulled out the header and footer sections of code from your index.php file you need to add 2 codes snippets for your index.php file to include the header.php and footer.php files.

1. Add this to the very top of your index.php file.

<br />
&lt;?php get_header(); ?><br />

2. Add this to the very bottom of the file.

 <?php get_footer(); ?>

These two snippets of code are examples of template tags which you can read more about later.

Page.php, Home.php, & Single.php

Finally, open your index.php file and “save as” page.php, repeat to create home.php and single.php.

Even though index.php, page.php, home.php and single.php all are identical code right now, page.php, home.php, and single.php will render pages differently just by the way WordPress interprets the type of template file that they are.

You’ll eventually tweak each of theses files to make them unique.

Template Heirarchy

The Template Hierarchy in Practice

Let’s tweak the files you made earlier in Template Files so you can see the hierarchy in practice.

1. Open your theme folder in wp-content/themes/my-first-theme.  

Refer back to Your First Theme and Create Template Files for Your Theme if you need help.

You should have these files in your folder:

  • footer.php
  • header.php
  • home.php
  • index.php
  • page.php
  • single.php
  • style.css

2. Open your index.php, home.php, page.php, and single.php files.  Right above this line of code:

<br />
&amp;lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&amp;gt;<br />

Add a line that says the file name.  For example in your home.php file it should look like this:

<br />
This is the home.php file.<br />
&amp;lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&amp;gt;</p>
<p>&amp;lt;h3&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/h3&amp;gt;<br />
&#8230;<br />

Repeat this process for every file and save them.

3. Let’s check the website in your browser.

Refer back to setting up a development environment and your first theme if you need help.

If you haven’t yet, you should have a few posts and these pages: Home, Blog, About on your local site.

Visit each of these pages and posts (since you haven’t created a navigation bar yet, you’ll have to manually enter the url, e.g. http://mysite.com/home). You should see the name of template file above each page’s title.

Play around with your latest post and static page settings in the Settings → Reading to see how the templates change depending on the settings.

To make a template file invisible to WordPress, just rename it to something WordPress doesn’t recognise, for example by adding _ to the front of the file name. Try renaming your page.php, home.php, and single.php files with an “_” in the front: like _page.php to temporarily make the file invisible to WordPress and see how the hierarchy is affected.

 

Page Templates

Creating Custom Page Templates for Global Use

This section will show you how to create a page template that can be used globally by any page, or by multiple pages.  We’ll start by creating a two-column template file.  If you’re following along and building the theme we started in Your First Theme, open wp-content/themes/my-first-theme and add a new folder called page-templates.

 

1. Open page.php and save as two-columns.php in the page-templates folder

Some developers will group their templates with a filename prefix, such as page_two-columns.php

 Important! Do not use page- as a prefix, as WordPress will interpret the file as a specialized template, meant to apply to only one page on your site.

For information on theme file-naming conventions and filenames you cannot use, see reserved theme filenames.

A quick, safe method for creating a new page template is to make a copy of page.php and give the new file a distinct filename. That way, you start off with the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.HTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.HTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. structure of your other pages and you can edit the new file as needed.

 2. Write an opening PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/index.phpPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. general-purpose scripting language that is especially suited for web development and can be embedded into HTML. https://www.php.net/manual/en/index.php comment that states the template’s name.

Add this opening statement to the very top of the file. It states the template’s name.

<br />
&lt;?php /* Template Name: Two Columns Template */ ?><br />

In your own projects, you can replace “Two Columns Template” with any name you like. It’s a good idea to choose a name that describes what the template does as the name is visible to WordPress users when they are editing the page. For example, in your other page templates you could call it Homepage, Blog or Portfolio.

 

This example from the TwentyTwelve theme creates a page template called Front Page Template:

&lt;?php<br />
/**<br />
* Template Name: Front Page Template<br />
*<br />
* Description: A page template that provides a key component of WordPress as a CMS<br />
* by meeting the need for a carefully crafted introductory page. The front page template<br />
* in Twenty Twelve consists of a page content area for adding text, images, video &#8212;<br />
* anything you&#8217;d like &#8212; followed by front-page-only widgets in one or two columns.<br />
*<br />
* @package WordPress<br />
* @subpackage Twenty_Twelve<br />
* @since Twenty Twelve 1.0<br />
*/<br />

3. (optional) Add a statement to identify your template file on the front end

Add the following <p>This is a global page template for two columns </p> under your <?php get_header(); ?> so that when you load a page using the template you can see that it’s working.  You’ll remove this at the end of your project.

4. Add a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.Sidebar A sidebar in WordPress is referred to a widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. to make your template two columns

Right above <?php get_footer(); ?> code at the bottom of the file add <?php get_sidebar()?>.  When you build your sidebar later on, this template tag will pull in your sidebar and make your page have two columns.  We’ll talk more in depth about these topics later on in this handbook.  Be sure to save your file.

5. Activate your new template

basics-page-templates-03Once you upload the file to your theme’s folder (e.g., page-templates), go to the dashboard Page > Edit screen to assign your new custom page template to your Blogs Page on the right hand side under attributes you’ll see template.  Select the Two Columns Template. Update the page and you’ll have successfully implemented your first global template.

The select list has a maximum width of 250px, so longer names may be cut off.

 

 

Creating a Custom Page Template for One Specific Page

To create a template for one specific page, copy your existing page.php file and rename it with your page’s slug or ID:

  1. page-{slug}.php
  2. page-{ID}.php

For example: Your About page has a slug of ‘about’ and an ID of 6. If your active theme’s folder has a file named page-about.php or page-6.php, then WordPress will automatically find and use that file to render the About page.

 

To be used, specialized page templates must be in your active theme’s folder: /wp-content/themes/my-first-theme/

1. Save your page.php file as page-about.php in main folder of your theme

Change the statement you added in the Template Heirarchy tutorial section to This is the page-about.php file and save.  Now when you visit your About page on your website WordPress will use this file to render the page. Neat!