Back To Top

WordPress Template Hierarchy for Faster Development

wordpress template hierarchy

WordPress Template Hierarchy for Faster Development

Are you looking for WordPress template hierarchy for faster development then, you’ve landed at the right place. Creating a WordPress theme is no rocket science.

You can quickly delve into WordPress theme development if you start with the basics. You must understand the WordPress template hierarchy and WordPress theme hierarchy.

The pages on a WordPress website are build using a single template file. or a combination of template files requested on a particular web page area.

The WordPress template hierarchy files reside in the wp-content/themes/theme-name folder. There are a lot of WordPress template structure files. but only two files are necessary for a WordPress theme to function they are index.php and style.css.

A few examples of WordPress template hierarchy files are:

  1. Index.php
  2. Sidebar.php
  3. Header.php
  4. footer.php

Also, functions.php (not considered a template file) is a required file containing the functionalities of a theme. We can use various template files within the WordPress theme hierarchy to add a more custom look to our website and feel.

First. to understand how it renders a page and moves up the WordPress template hierarchy.

RELATED BLOGS: READ MORE

A visitor visits a testimonials page on your WordPress site. and you have made a custom page template known as page-testimonials.php; WordPress will then load page-testimonials.php.

However. page-testimonials.php doesn’t exist. then WordPress will fall back and load page.php. and if page.php doesn’t exist in theme files. then WordPress will load the index.php.

I will break down the template files into sections so that it is easier to understand their purpose and where they are use.

Basic WordPress Template Hierarchy

The basic WordPress page hierarchy includes:

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

1.Index.php

As I mentioned earlier, index.php is among one template files in the WordPress page hierarchy necessary for a WordPress theme to function. index.php is most commonly used to render the home page of a WordPress theme. Whenever a template file doesn’t exist, e.g., single.php or post.php, then WordPress loads the index.php.

The index.php usually contains other template files like header.php, footer.php, and sidebar.php, which include the head section of the site, the footer area, and sidebars with widget areas, respectively. It also consists of a loop that displays the posts or pages on the template.

2.Header.php

The header.php contains the head section of a WordPress site, and it is commonly called at the start of all the template files. It usually includes the header information, analytics, calls to CSS files, site navigation, page titles, site logo, etc.

3.Footer.php

Similarly, footer.php in a file in the WordPress page hierarchy is used to build the footer section of a WordPress theme and called in the footer section of all the template files. The footer.php generally contains the copyright information, calls to JS files, and widget areas that commonly have site navigation.

4.Sidebar.php

Whereas the sidebar.php, as the name suggests, is used to build the sidebar of a site and is called in template files like index.php, page.php, single.php to call in the sidebar. It generally contains widget areas for easy customization.

Homepage Display Pages

site-front-page

  1. front-page.php
  2. home.php
  3. page.php
  4. index.php

Homepages of WordPress sites display either the latest blog posts or a static page. It depends on the settings under the WordPress Dashboard Settings -> Reading.

It is set to the latest posts, it will display the latest blog posts on the home page, and when it is set to a static page, will load a template from the WordPress template hierarchy such as page.php or front-page.php.

If front-page.php exists, WordPress will use this template file for both the settings “latest blog posts” and “static page.” The home.php will be load if front-page.php doesn’t exist and “latest blog posts” are set in the reading settings of WordPress.

Whether in Settings -> Reading, a static page with a posts page is select, WordPress will look for the page.php template to render the homepage.

But if front-page.php, page.php, and home.php don’t exist, WordPress will fall back to index.php to render the homepage.

Single Post Pages

single-post-page

  • single.php
  • singular.php

1.single.php

WordPress, single blog posts are render using the single.php file. In W.P version 4.3 and up, a new W.P template file, singular.php, was add.

WordPress custom post types we can use single-{post-type}.php. For example, if our post type is animals, WordPress will look for single-animals.php, and will take precedence over single.php. But if the post-type file doesn’t exist, it will use s.php to render the page.

2.singular.php

The singular.php is use in cases where page.php and single.php generally have the same code. If s.php doesn’t exist, then WordPress will look for singular.php.

Static Pages

static-page

Pages are rendered in the following order:

  1. page templates
  2. page-{slug}.php
  3. page-{id}.php
  4. page.php
  5. singular.php
  6. index.php

If we want to have a similar look for single.php and page.php, then it is better to create a singular.php.

Archive Pages

  1. author.php
  2. category.php
  3. taxonomy.php
  4. date.php
  5. tag.php
  6. archive.php

Archive pages in WordPress are those pages that are used to grab posts from specific authors, categories, taxonomies, dates, tags, and so on.

We can have a single archive template, that is, archive.php. But to drill down into more templates, we have author.php, category.php, taxonomy.php, date.php, and tag.php, and all of them are pretty self-explanatory.

RELATED BLOGS: READ MORE

We can further make customized templates, e.g.

  • Category-{slug}.php – if the slug of a type is cute-kittens, then WordPress will look for category-cute-kittens.php; if it doesn’t exist, category.php will be used.
  • category-{id}.php – if id = 3, then WordPress will look for category-3.php to render the page. Else it will load category.php

Similar theory of {slug} and {id} applies to “Tag” page

For custom Author templates we can use author-{nicename}.php or author-{id}.php. If the author’s name is Andy, WordPress will look for author-andy.php; if it doesn’t exist, WordPress will fall back to author.php to render the page.

Other WordPress Template Files

Search.php

Search results in WordPress use the template file search.php. If it doesn’t exist, then search results are rendered from index.php.

Attachment.php

This template file renders attachment pages, such as images and videos. image.php and video.php are use to generate photos and videos, respectively. If these files don’t exist, then attachment.php is use.

404.php

Not found pages in WordPress are render from 404. php. If the 404 doesn’t exist, it generates the page from index.php.

Comments.php

It is a template of comments; it is called in template files like single.php or page.php to add the comments section.

Final Words

Understanding the WordPress template hierarchy is beneficial if you want to develop custom WordPress themes and customize the WordPress theme file structure. You will have an easy time finding the correct template files to edit and customize.

The good thing about the WordPress template hierarchy is that it follows a strict naming convention. It makes it a breeze to create WordPress themes once you get a hold of them. You can refer to the WordPress theme hierarchy for a quick and visual reference for theme development.

WORDPRESS TEMPLATE HIERARCHY FOR FASTER DEVELOPMENT | DON’T FORGET TO READ OUR LATEST BLOG POST | READ MORE

Post a Comment