WordPress.org
Get WordPress

Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

Difference between revisions of "Stepping into Templates"

m (→‎Template File Resources: clarify hierarchy)
m
 
(43 intermediate revisions by 25 users not shown)
Line 1: Line 1:
 +
{{Languages|
 +
{{en|Stepping Into Templates}}
 +
{{ja|テンプレート入門}}
 +
{{ru|Основы_шаблонов}}
 +
{{zh-cn|模板入门}}
 +
}}
 +
 
__TOC__
 
__TOC__
−
[[Templates|Template files]] are the building blocks of your WordPress site. They fit together like puzzle pieces to generate any web page on your site. Some are used repeatedly for every web page, like the header and footer template files, while others are used only under specific conditions.
+
Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.
 +
 
 +
A traditional web page consists of two files:
 +
 
 +
*The [[Glossary#HTML|HTML page]] to hold the structure and content of the page and
 +
*the [[Glossary#CSS|CSS Style Sheet]] which holds the presentation styles of the page.
  
−
A traditional web page consists of two files: the '''HTML page''' to hold the structure of the page and the '''style sheet''' which holds the presentation styles of the page. In WordPress, the style sheet is still present, but the HTML structure is broken up into various parts and pieces, blocks if you will, that can be put together in many different ways to generate a single web page. These blocks are known as '''template files'''.
+
In WordPress, the (X)HTML structure and the CSS style sheet are present but the ''content'' is generated "behind the scenes" by various [[Templates|template files]]. The template files and the style sheet are stored together as a [[Using Themes|WordPress Theme]]. To learn more about creating Themes, read [[Theme Development]].
  
−
Each [[Using Themes|WordPress Theme]] is made up of a style sheet and the building blocks or template files to generate the different page views found on a WordPress site.
 
  
−
== Simple Page Structure ==
+
== The WordPress Page Structure ==
  
−
Let's look at a very simple web page structure.  Most web pages feature a header, the content, and a footer. Three "blocks" that make up the whole of the page.
+
A simple WordPress web page structure is made up of three basic building "blocks": a header, the content, and a footer. Each of these blocks is generated by a template file in your current WordPress Theme.
  
 +
<div style="margin:5px;float:right">
 
<div style="background:white; border:2px blue solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
<div style="background:white; border:2px blue solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
Header
 
Header
Line 18: Line 30:
 
<div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
<div style="background:white; border:2px purple solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
Footer
 
Footer
 +
</div>
 
</div>
 
</div>
  
−
Inside of the '''header''' block or template file is all the information that needs to be at the ''top'' of your web page, such as the <tt>doctype</tt>, <tt>meta tags</tt>, links to style sheets, the start of the <tt>body</tt> tag, and the [[Designing Headers|header information]] itself which typically includes the title of your site.
+
* The '''header''' contains all the information that needs to be at the ''top'' &mdash; i.e. inside the <tt style="font-weight:bold; color:#036"><nowiki><head></nowiki></tt> tag &mdash; of your XHTML web page, such as the <tt style="font-weight:bold; color:#036"><nowiki><doctype></nowiki></tt>, <tt style="font-weight:bold; color:#036"><nowiki><meta></nowiki></tt> tags, and links to style sheets. It also includes the opening <tt style="font-weight:bold; color:#036"><nowiki><body></nowiki></tt> tag and the visible [[Designing Headers|header]] of your blog (which typically includes the title of your site, and may also include navigation menus, a logo bar, the description of your site, etc.).
  
−
The '''content''' holds the documentation, articles, posts, the ''meat'' of your site.
+
* The '''content''' block contains the posts and pages of your blog, i.e. the "meat" of your site.
  
−
The '''footer''' usually holds information like links to other [[Pages]] or categories on your site in a [[Good_Navigation_Links|navigation menu]], copyright, contact information, and other details.
+
* The '''footer''' contains the information that goes at the bottom of your page, such as links to other [[Pages]] or categories on your site in a [[Good_Navigation_Links|navigation menu]], copyright and contact information, and other details.
  
−
=== Building a Template Foundation ===
 
  
−
As with all building blocks, you have to start with a good foundation upon which to build. In WordPress, the core template file is the <tt>index.php</tt> found within your [[Using Themes|WordPress Theme's]] folder. The code inside the <tt>index.php</tt> template file begins the ''call'' to other blocks or template files and the [[The Loop|WordPress Loop]] to gather information from the database to create the final web page. 
+
=== Basic Template Files ===
  
−
In the <tt>index.php</tt> template file, the call for the header and footer looks like this:
+
To generate such a structure within a [[Using Themes|WordPress Theme]], start with an <tt style="font-weight:bold; color:#036">index.php</tt> template file in your Theme's directory. This file has two main functions:
 +
* Include or "call" the other template files
 +
* Include the [[The Loop|WordPress Loop]] to gather information from the database (posts, pages, categories, etc.)
 +
 
 +
For our simple structure, we only need to include two other template files: the '''header''' and the '''footer'''. These must be named <tt style="font-weight:bold; color:#036">header.php</tt> and <tt style="font-weight:bold; color:#036">footer.php</tt>. The [[Template Tags]] that include them look like this:
  
 
<pre><?php get_header(); ?>
 
<pre><?php get_header(); ?>
 +
 +
 
<?php get_footer(); ?></pre>
 
<?php get_footer(); ?></pre>
  
−
To add another block to our web page's structure, we could add a '''sidebar''' that includes more [[Customizing Your Sidebar|navigation features]] and information about your website.
+
In order to display the posts and pages of your blog (and to customize how they are being displayed), your <tt style="font-weight:bold; color:#036">index.php</tt> file should run the [[The Loop|WordPress Loop]] between the header and footer calls.
  
−
<pre><?php get_sidebar(); ?></pre>
+
== More Complex Page Structures ==
  
 
<div style="margin:5px;float:right">
 
<div style="margin:5px;float:right">
Line 53: Line 71:
 
</div>
 
</div>
 
</div>
 
</div>
−
These "get" commands are called [[Stepping Into Template Tags|template tags]] which instruct the page to "get" or include these template files in the final page.
 
  
−
Notice that we haven't included a template tag to "get" the content.  That is because the content is in the <tt>index.php</tt>. The <tt>index.php</tt> template file is the foundation upon which the building blocks are laid. It compiles the blocks all together around the content instructions in the <tt>index.php</tt>.
+
Many WordPress themes include one or several [[Sidebars]] that contains [[Customizing Your Sidebar|navigation features]] and more information about your website. The sidebar is generated by a template file called <tt style="font-weight:bold; color:#036">sidebar.php</tt>. It can be included in your <tt style="font-weight:bold; color:#036">index.php</tt> template file with the following [[Template Tags|template tag]]:
 +
 
 +
<pre><?php get_sidebar(); ?></pre>
  
−
Here are the basic steps it takes for a simple layout on a WordPress web page:
+
=== Where's the Beef? ===
  
−
# Initiate <tt>index.php</tt>
+
Notice that we have not included a template tag to "get" ''the content'' of our web page. That is because the content is generated in the [[The Loop|WordPress Loop]], inside <tt style="font-weight:bold; color:#036">index.php</tt>.
−
# Get the <tt>header.php</tt>
 
−
# Generate the content within the <tt>index.php</tt>
 
−
# Get the <tt>sidebar.php</tt>
 
−
# Get the <tt>footer.php</tt>
 
−
# Display entire page in the browser
 
  
−
The process of determining where and how these blocks or template files "look" on your final web page are determined within the style sheet file. Inside the style sheet are instructions for the header, sidebar, content, and footer to place the header at the top, put the sidebar on the right or left, and make sure the footer sits below the content. For more information on styling your WordPress Themes and web pages, see [[Blog Design and Layout]].
+
Also note that the Theme's style sheet determines the look and placement of the header, footer, sidebar, and content in the user's browser screen. For more information on styling your WordPress Themes and web pages, see [[Blog Design and Layout]].
  
 
== Template Files Within Template Files ==
 
== Template Files Within Template Files ==
  
−
You have seen how WordPress includes template files within the <tt>index.php</tt> template file. You can include multiple template files within template files.
+
You have seen how WordPress includes standard template files (header, footer, and sidebar) within the <tt style="font-weight:bold; color:#036">index.php</tt> template file. You can also include other template files within any of your template files.
  
−
Inside of the <tt>sidebar.php</tt> is typically another template file for getting the <tt>searchform.php</tt> to include a search form box in the sidebar.
+
For example, <tt style="font-weight:bold; color:#036">sidebar.php</tt> might contain a template file that generates a search form &mdash; <tt style="font-weight:bold; color:#036">searchform.php</tt>. Because this is not one of WordPress's standard template files, the code to include it is a little different:
  
−
<pre><?php include (TEMPLATEPATH . '/searchform.php'); ?></pre>
+
<pre><?php get_search_form(); ?></pre>
  
−
While the command structure is different, it does the same thing. Instead of using the WordPress template tags to "get", it uses the [http://us3.php.net/manual/en/function.include.php PHP command <tt>include</tt>] to "include" the template file. It also uses the <tt>TEMPLATEPATH</tt> to find the appropriate template file within your Theme's folder.
+
We should no longer be using include and TEMPLATEPATH to get our search forms into themes as WordPress supplies the above template tag.
  
−
This method allows other template files to include other template files as needed to build the structure of the final generated web page.  The '''<tt>get</tt>''' command template tags call to standard template files. The '''<tt>include</tt>''' PHP command gets template files that are standard AND non-standard template files.
 
−
 
−
For example, if you are using a query in your [[The Loop|Loop]] that asks "if displaying a post from category ID 14, use <tt>header2.php</tt> and <tt>sidebar2.php</tt> instead of the normal header and sidebar", you would use the <tt>include</tt> function as [http://www.cameraontheroad.com/?p=623 part of that query]. While the innards of <tt>header2.php</tt> may be exactly the same as <tt>header.php</tt> except for a slight change in the style sheet link to style posts within category 14 differently from the rest of the category posts, because <tt>header2.php</tt> isn't the "standard" header template file, you need an <tt>include</tt> command.
 
−
 
−
<pre><?php include (TEMPLATEPATH . '/header2.php'); ?>
 
−
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
 
−
</pre>
 
 
<div style="margin:5px; float:right">
 
<div style="margin:5px; float:right">
 
<div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px">
 
<div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px">
Line 92: Line 99:
 
Content
 
Content
 
</div>
 
</div>
−
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
+
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size: 130%; text-align: center; width:120px; height:80px">
 
Comment Form
 
Comment Form
 
</div>
 
</div>
Line 106: Line 113:
 
</div>
 
</div>
  
−
Most WordPress Themes include a variety of template files within templates to generate the different web pages on the site. For example, within the sidebar template file is a call for the search form template to be included.  The following template files are typical for the front page (<tt>index.php</tt>) of a WordPress site:
+
Most WordPress Themes include a variety of template files within other templates to generate the web pages on the site. The following template files are typical for the main template (<tt style="font-weight:bold; color:#036">index.php</tt>) of a WordPress site:
  
−
# <tt>header.php</tt>
+
* <tt style="font-weight:bold; color:#036">header.php</tt>
−
# The Content (<tt>index.php</tt>)
+
** <tt style="font-weight:bold; color:#036">theloop.php</tt> (The Content)
−
## <tt>wp-comments.php</tt>
+
** <tt style="font-weight:bold; color:#036">wp-comments.php</tt>
−
# <tt>sidebar.php</tt>
+
* <tt style="font-weight:bold; color:#036">sidebar.php</tt>
−
## <tt>searchform.php</tt>
+
** <tt style="font-weight:bold; color:#036">searchform.php</tt>
−
# <tt>footer.php</tt>
+
* <tt style="font-weight:bold; color:#036">footer.php</tt>
  
−
A lot of the blocks are interchangeable, allowing you to move template files around in the structure of your site. Some Themes feature the search form in the header, moving it from the sidebar. Others don't use a footer, leaving the footer template off their design. Other users don't want comments, so they eliminate or [[Commenting Code|comment out]] the call for the comments form.
+
However, this structure can be changed. For instance, you could put the search form in your header. Perhaps your design does not need a footer, so you could leave that template out entirely.
  
−
Customized templates can also be used with [[Pages]], allowing these to be uniquely styled and structured. You can also create your own custom templates to add or replace any of the parts and pieces, such as an alternative header, sidebar, feeds, asides, whatever building block you want to add all the time or occasionally to your web pages.
+
== Special Template Files ==
  
−
Remember, the styles are in the style sheet, but any structural elements can be put into a template tag and then called with an <tt>include</tt> command.
+
WordPress features two '''core page views''' of web pages in a WordPress site.  The '''single post view''' is used when the web pages displays a single post. The '''multi-post view''' lists multiple posts or post summaries, and applies to category archives, date archives, author archives, and (usually) the "normal" view of your blog's home page. You can use the <tt style="font-weight:bold; color:#036">index.php</tt> template file to generate all of these types of pages or rely on WordPress' [[Template Hierarchy|template hierarchy]] to choose different template files depending on the situation.  
  
−
== Using Alternative Template Files ==
+
The WordPress Template Hierarchy answers the following question:
 +
<blockquote>''What template file will WordPress use when a certain type of page is displayed?''</blockquote>
  
−
WordPress features two '''core page views''' of web pages in a WordPress site.  The '''single post view''' showcases the view of a single post web page. The '''multi-post view''' lists the posts or post summaries of more than one post. These are usually sorted by category, date (archives), author posts, and other ways. While some of the multi-post views can be generated from the <tt>index.php</tt> template file, WordPress' inherent [[Template Hierarchy|template hierarchy]] allows specific templates to be used instead of the <tt>index.php</tt> file. This allows even more fine-tuning and customization.
+
WordPress automatically recognizes template files with certain standard names and uses them for certain types of web pages. For example, when a user clicks on the title of a blog post, WordPress knows that they want to view just that article on its own web page. The WordPress [[Template Hierarchy|template hierarchy]] will  use the <tt style="font-weight:bold; color:#036">single.php</tt> template file rather than <tt style="font-weight:bold; color:#036">index.php</tt> to generate the page &mdash; if your Theme has a <tt style="font-weight:bold; color:#036">single.php</tt> file. Similarly, if the user clicks on a link for a particular category, WordPress will use the <tt style="font-weight:bold; color:#036">category.php</tt> template if it exists; if it doesn't, it looks for <tt style="font-weight:bold; color:#036">archive.php</tt>, and if that template is also missing, WordPress will go ahead and use the main <tt style="font-weight:bold; color:#036">index.php</tt> template. You can even make special template files for specific categories (see [[Category Templates]] for more information). You can also make [[Page_Templates|Custom Page Templates]] for specific Pages.
  
−
<div style="margin:5px; float:right">
+
== Template File Tips ==
−
<div style="background:white; border:2px blue solid;margin:5px; font-size: 130%; text-align: center; padding-top:10px; width:120px; height:50px">
 
−
Header
 
−
</div>
 
−
<div style="background:white; border:2px red solid;margin:5px; padding-top:10px; font-size: 130%; text-align: center; width:120px; height:50px">
 
−
Single Post
 
−
</div>
 
−
<div style="background:white; border:2px #FF9900 solid;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
 
−
Comment Form
 
−
</div>
 
−
<div style="background:white; border:2px solid purple;margin:5px; font-size: 130%; text-align: center; width:120px; height:50px">
 
−
Footer
 
−
</div>
 
−
</div>
 
−
The use of template files allow users to play with different blocks to build their own pages, choosing which ones they want to use when, and where, they need them.  Built into WordPress' core programming is something called the [[Template Hierarchy]]. Basically, it answers the following question:
 
  
−
<blockquote>
+
Here are some tips for creating WordPress template files:
−
''What template file will WordPress use when the _______________ (page) is displayed?''
 
−
</blockquote>
 
  
−
WordPress won't generate any special template files, but it will automatically recognize them if they are present and use them, without any effort on your part. Well, that's not true. If they aren't there, you have to provide them.
+
;'''Tracking Opening and Closing Tags'''
  
−
For instance, in the WordPress Default Theme, when a user clicks on the title of a post, if WordPress detects the <tt>single.php</tt> template file, it will use it to generate the web page view of a single post. In this Theme, the single post view does not include the <tt>sidebar.php</tt>. This is an example of the flexibility of WordPress template files.
+
: Template files include the use of [[Glossary#XHTML|XHTML]] tags and [[Glossary#CSS|CSS]] references. HTML elements and CSS references can cross template files, beginning in one and ending in another. For example, the <tt style="font-weight:bold; color:#036">html</tt> and <tt style="font-weight:bold; color:#036">body</tt> HTML elements typically begin in <tt style="font-weight:bold; color:#036">header.php</tt> and end in <tt style="font-weight:bold; color:#036">footer.php</tt>. Most WordPress themes make use of HTML <tt style="font-weight:bold; color:#036">div</tt> elements, which can also span several files. For instance, the main <tt style="font-weight:bold; color:#036">div</tt> for the page content might start in <tt style="font-weight:bold; color:#036">header.php</tt> and end in either <tt style="font-weight:bold; color:#036">index.php</tt> or <tt style="font-weight:bold; color:#036">single.php</tt>. Tracking down where an HTML element begins and ends can get complicated if you are [[Theme Development|developing, designing, or modifying a Theme]].  Use [[Commenting Code|comments]] to note in the template files where a large container tag opens and where it closes so you can track which <tt style="font-weight:bold; color:#036">div</tt> is which at the end of different sections.
  
−
You might want to have different information or looks to specific category listings of posts.  WordPress automatically looks for the <tt>category.php</tt> template file to generate the list of [[Category Templates|category posts]], and if it isn't found, then generates them using the <tt>index.php</tt>. Using the template hierarchy, if it finds the <tt>category.php</tt> template file, it then looks for a category template file that matches the category ID number being sought, for example, <tt>category-2.php</tt>.  If that template file matches, it will use that template file to generate a page view of all the posts in category 2.
+
;'''Test Template Files Under Different Views'''  
  
−
WordPress will automatically look for a variety of template files based upon the user's request and you can learn more about creating and styling these and other custom template files at:
+
:If you have made changes to the comments, sidebar, search form, or any other template file, make sure you test them using different web page views (single post, different types of archives, and pages).
  
−
* [[Template Hierarchy]]
+
;'''Comment Deviations'''
−
* [[Creating_an_Archive_Index|Archive Templates]]
 
−
* [[Category Templates]]
 
−
* [[Creating a Search Page|Search Templates]]
 
−
* [[Customizing Your Sidebar|Sidebar Templates]]
 
−
* [[Designing Headers|Header Templates]]
 
−
* [[Pages#Creating_your_own_Page_Templates|Page Templates]]
 
−
* [[Styling Theme Forms|Form Templates: Comment, Search, etc.]]
 
−
* [[Creating_an_Error_404_Page|404 Page Not Found Templates]]
 
−
* [[Author Templates]]
 
  
−
== Template File Tips ==
+
:If you are [[Theme_Review|designing Themes for public release]], keep in mind that someone who downloads your Theme will probably want to modify it slightly for their own use. So, it is helpful if you make notes in your template files where you have made changes from the logic of the Default and/or Classic Themes. It is also a good idea to add comments in your Theme's main style file if you have style information elsewhere (such as in your <tt style="font-weight:bold; color:#036">header.php</tt> file or in HTML tags). 
  
−
Template files include the use of [[Glossary#XHTML|XHTML]] tags and [[Glossary#CSS|CSS]] references. They are also packed with [[Templates|template files]], queries, and the [[The Loop|WordPress Loop]] which generates the content within each page view from within the core template files like <tt>index.php</tt>, <tt>single.php</tt>, <tt>category,php</tt>, <tt>archives.php</tt>, and others.
+
;'''Close the Tag Door Behind You'''
  
−
Here are some tips for using WordPress template files:
+
:If you start a HTML tag or <tt style="font-weight:bold; color:#036">div</tt> in one template file and don't close it there, make sure you include the closing tag in another template file. The WordPress Forum gets a lot of questions about "what happened to my theme" when they remove the footer template file without closing the tags that began in the header template file. Track down your tags and make sure they are closed. (A good way to verify that this is correct is to test your single and archive page views with an [http://validator.w3.org HTML validator]).
 +
 +
;'''CSS Styles in Templates'''
  
−
;Tracking Opening and Closing Tags :HTML tags and CSS references can cross template files, beginning in one and ending in another. For example, the <tt>html</tt> and <tt>body</tt> HTML tags begin in the <tt>header.php</tt> and end in the <tt>footer.php</tt>. In some WordPress Themes, the content container may start in the <tt>header.php</tt> and end in the <tt>index.php</tt> or <tt>single.php</tt>. Tracking down where one tag begins and the other one ends can get complicated if you are [[Theme Development|developing, designing, or adjusting a Theme]].  We recommend you use [[Commenting Code|comments]] to note in the template files where a large container tag opens and when it closes so you can track which <tt>&lt;/div></tt> is which at the end of different sections.
+
:You are free to use whatever HTML and CSS tags and styles you like in your templates. However, you are encouraged to follow the standard WordPress theme structure (see [[Site Architecture 1.5]]). This will make your Themes more understandable to your users.
−
;Test Template Files Under Different Views :If you have made changes to the comments, sidebar, search form, or any other template file, make sure you view these template files in all their possible page generations. For example, check out the single post view, and various multi-post views like categories, archives, or search to make sure the changes you've made to template files included in other template files work across all of the various page views.
 
−
;Comment Deviations :If you are [[Designing Themes for Public Release|designing Themes for public release]], make notes in your template files where you have made dramatic changes from the Default and/or Classic Themes, especially where you have changed style references or added styles outside of the style sheet like in the header or inline with the XHTML tags. Make a note of the styles used outside of the style sheet in the style sheet and include comments within the template files to guide future users.
 
−
;Close the Tag Door Behind You :If you start a HTML tag or <tt>div</tt> in one template file, make sure you include the closing tag in another template file. The WordPress Forum gets a lot of questions about "what happened to my theme" when they remove the footer template file without closing the tags that began in the header template file. Track down your tags and make sure they are closed.
 
−
;CSS Styles in Templates :Different core or included template files may feature CSS styles the same as other core template files, or different.  For example, the Default Theme features different styles depending upon if the user is viewing a page generated with the <tt>index.php</tt>, <tt>single.php</tt>, <tt>archives.php</tt>, and other template files. While Theme authors may change the style references in their Theme, for a list of the general architecture and style references in the Default and Classic WordPress Themes, see [[Site Architecture 1.5]].
 
  
 
== Template File Resources ==
 
== Template File Resources ==
−
Templates
 
−
* [[:Category:Templates]]
 
−
** [[Templates]]
 
−
* [[:Category:Template Tags]]
 
−
** [[Template Tags]]
 
−
** [[Stepping Into Template Tags]]
 
−
** [[Conditional Tags]]
 
−
* [[Site Architecture 1.5]]
 
−
* [[The Loop]]
 
−
* [[The Loop in Action]]
 
  
−
Themes
+
For a comprehensive list of resources related to Template Files, see [[Templates]]. You may also wish to view the other articles in [[:Category:Templates]] and [[:Category:Template Tags]].
−
* [[Theme Development]]
 
−
* [[Designing Themes for Public Release]]
 
−
* [[Template_Tags/query_posts|Query Posts Template Tag]]
 
−
* [http://www.cameraontheroad.com/?p=623 Creating Multiple Single Posts for Different Categories]
 
  
 
[[Category:WordPress_Lessons]]
 
[[Category:WordPress_Lessons]]
 
[[Category:Design and Layout]]
 
[[Category:Design and Layout]]
 
[[Category:Templates]]
 
[[Category:Templates]]
−
{{Copyedit}}
 

Latest revision as of 21:13, 3 January 2020

Languages: English • 日本語 Русский • 中文(简体) • (Add your language)

Template files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.

A traditional web page consists of two files:

  • The HTML page to hold the structure and content of the page and
  • the CSS Style Sheet which holds the presentation styles of the page.

In WordPress, the (X)HTML structure and the CSS style sheet are present but the content is generated "behind the scenes" by various template files. The template files and the style sheet are stored together as a WordPress Theme. To learn more about creating Themes, read Theme Development.


The WordPress Page Structure

A simple WordPress web page structure is made up of three basic building "blocks": a header, the content, and a footer. Each of these blocks is generated by a template file in your current WordPress Theme.

Header

Content

Footer

  • The header contains all the information that needs to be at the top — i.e. inside the <head> tag — of your XHTML web page, such as the <doctype>, <meta> tags, and links to style sheets. It also includes the opening <body> tag and the visible header of your blog (which typically includes the title of your site, and may also include navigation menus, a logo bar, the description of your site, etc.).
  • The content block contains the posts and pages of your blog, i.e. the "meat" of your site.
  • The footer contains the information that goes at the bottom of your page, such as links to other Pages or categories on your site in a navigation menu, copyright and contact information, and other details.


Basic Template Files

To generate such a structure within a WordPress Theme, start with an index.php template file in your Theme's directory. This file has two main functions:

  • Include or "call" the other template files
  • Include the WordPress Loop to gather information from the database (posts, pages, categories, etc.)

For our simple structure, we only need to include two other template files: the header and the footer. These must be named header.php and footer.php. The Template Tags that include them look like this: 

<?php get_header(); ?>


<?php get_footer(); ?>

In order to display the posts and pages of your blog (and to customize how they are being displayed), your index.php file should run the WordPress Loop between the header and footer calls.

More Complex Page Structures

Header

Content

Sidebar

Footer

Many WordPress themes include one or several Sidebars that contains navigation features and more information about your website. The sidebar is generated by a template file called sidebar.php. It can be included in your index.php template file with the following template tag: 

<?php get_sidebar(); ?>

Where's the Beef?

Notice that we have not included a template tag to "get" the content of our web page. That is because the content is generated in the WordPress Loop, inside index.php.

Also note that the Theme's style sheet determines the look and placement of the header, footer, sidebar, and content in the user's browser screen. For more information on styling your WordPress Themes and web pages, see Blog Design and Layout.

Template Files Within Template Files

You have seen how WordPress includes standard template files (header, footer, and sidebar) within the index.php template file. You can also include other template files within any of your template files.

For example, sidebar.php might contain a template file that generates a search form — searchform.php. Because this is not one of WordPress's standard template files, the code to include it is a little different: 

<?php get_search_form(); ?>

We should no longer be using include and TEMPLATEPATH to get our search forms into themes as WordPress supplies the above template tag.

Header

Content

Comment Form

Sidebar

Search Form

Footer

Most WordPress Themes include a variety of template files within other templates to generate the web pages on the site. The following template files are typical for the main template (index.php) of a WordPress site:

  • header.php
    • theloop.php (The Content)
    • wp-comments.php
  • sidebar.php
    • searchform.php
  • footer.php

However, this structure can be changed. For instance, you could put the search form in your header. Perhaps your design does not need a footer, so you could leave that template out entirely.

Special Template Files

WordPress features two core page views of web pages in a WordPress site. The single post view is used when the web pages displays a single post. The multi-post view lists multiple posts or post summaries, and applies to category archives, date archives, author archives, and (usually) the "normal" view of your blog's home page. You can use the index.php template file to generate all of these types of pages or rely on WordPress' template hierarchy to choose different template files depending on the situation.

The WordPress Template Hierarchy answers the following question:

What template file will WordPress use when a certain type of page is displayed?

WordPress automatically recognizes template files with certain standard names and uses them for certain types of web pages. For example, when a user clicks on the title of a blog post, WordPress knows that they want to view just that article on its own web page. The WordPress template hierarchy will use the single.php template file rather than index.php to generate the page — if your Theme has a single.php file. Similarly, if the user clicks on a link for a particular category, WordPress will use the category.php template if it exists; if it doesn't, it looks for archive.php, and if that template is also missing, WordPress will go ahead and use the main index.php template. You can even make special template files for specific categories (see Category Templates for more information). You can also make Custom Page Templates for specific Pages.

Template File Tips

Here are some tips for creating WordPress template files:

Tracking Opening and Closing Tags
Template files include the use of XHTML tags and CSS references. HTML elements and CSS references can cross template files, beginning in one and ending in another. For example, the html and body HTML elements typically begin in header.php and end in footer.php. Most WordPress themes make use of HTML div elements, which can also span several files. For instance, the main div for the page content might start in header.php and end in either index.php or single.php. Tracking down where an HTML element begins and ends can get complicated if you are developing, designing, or modifying a Theme. Use comments to note in the template files where a large container tag opens and where it closes so you can track which div is which at the end of different sections.
Test Template Files Under Different Views
If you have made changes to the comments, sidebar, search form, or any other template file, make sure you test them using different web page views (single post, different types of archives, and pages).
Comment Deviations
If you are designing Themes for public release, keep in mind that someone who downloads your Theme will probably want to modify it slightly for their own use. So, it is helpful if you make notes in your template files where you have made changes from the logic of the Default and/or Classic Themes. It is also a good idea to add comments in your Theme's main style file if you have style information elsewhere (such as in your header.php file or in HTML tags).
Close the Tag Door Behind You
If you start a HTML tag or div in one template file and don't close it there, make sure you include the closing tag in another template file. The WordPress Forum gets a lot of questions about "what happened to my theme" when they remove the footer template file without closing the tags that began in the header template file. Track down your tags and make sure they are closed. (A good way to verify that this is correct is to test your single and archive page views with an HTML validator).
CSS Styles in Templates
You are free to use whatever HTML and CSS tags and styles you like in your templates. However, you are encouraged to follow the standard WordPress theme structure (see Site Architecture 1.5). This will make your Themes more understandable to your users.

Template File Resources

For a comprehensive list of resources related to Template Files, see Templates. You may also wish to view the other articles in Category:Templates and Category:Template Tags.

Retrieved from "https://codex.wordpress.org/index.php?title=Stepping_into_Templates&oldid=168411"

Codex Resources