A guide to WordPress templates for posts, pages and custom post types

A website usually contains more than an index page and you probably want to create different layouts for different pages and posts for your WordPress theme. The good news is that WordPress can handle all your needs thanks to the use of specific templates that you can create with Pinegrow.

Note: This document is an updated version of our previous documentation about Pages, Posts and Custom Post types templates.

If you are new to WordPress development with Pinegrow WP or Pinegrow Theme Converter for WordPress, by following our tutorials, you have discovered how easy it is to create a basic theme by just creating an index.html page (which will be exported as index.php in the theme folder during the theme export).

Now, you want to go further and start the development of a more complex theme. For that, you need to setup WordPress behavior regarding the front page AND create specific templates based on the WordPress templates hierarchy.

Read more about the The Template File Hierarchy: https://developer.wordpress.org/themes/basics/template-hierarchy/

WordPress themes are made up of template files. These are PHP files that contain a mixture of HTML, Template Tags, and PHP code.

Prerequisites

To fully understand the following informations, you should be familiar with how Pinegrow WP works. Namely, the use of the WordPress > Export the theme menu item (CTRL+W on Windows or CMD+W on Mac ) shall convert your HTML files to their PHP equivalent. The name of each file remains identical, only the HTML extension is transformed into PHP.

In order to create any particular WordPress template mentioned in this documentation, you’ll have to create the corresponding file with the HTML extension in Pinegrow. It will be automatically converted to its PHP counterpart during the Theme export.

Examples:

single.html will be exported as single.php
front-page.html will be exported as front-page.php
home.html will be exported as home.php
single-ebooks.html will be converted as single-ebooks.php
and so on …

OR whatever the name of your HTML template file, from the Page Settings, you can select from our list of predefined templates names.

From this list, you can cover almost 90% of the standard needs and if your need more, you will be able to manually enter the template name of your choice.

In the following screenshot, page.php is selected for export.

Select your WordPress Front page

By default, a WordPress site shows your most recent posts in reverse chronological order on the front page of your site BUT many WordPress users want a static front page or splash page as the front page instead.

This “static front page” look is common for users desiring static or welcoming information on the front page of the site.

The look and feel of the front page of the site is based upon the choices of the user combined with the features and options of the WordPress Theme.

The front-page.php template file is used to render your site’s front page, whether the front page displays the blog posts index or a static page.

The front page template takes precedence over the blog posts index template (home.php).

If the front-page.php file does not exist, WordPress will either use the home.php or page.php files depending on the setup in Settings > Reading. If neither of those files exist, it will use the index.php file.

front-page.php – Used for both “your latest posts” or “a static page” as set in the front page displays section of Settings >Reading in WordPress admin. (Reminder: If front-page.php exists, it will override the home.php template.)
home.php – If WordPress cannot find front-page.php and “your latest posts” is set in the front page displays section, it will look for home.php. Additionally, WordPress will look for this file when the posts page is set in the front page displays section.
page.php – When “front page” is set in the front page displays section.
index.php – When “your latest posts” is set in the front page displays section but home.php does not exist or when front page is set but page.php does not exist.

Page Templates

Page templates are a specific type of template file that can be applied to a specific page or groups of pages. These templates only apply to pages, not to any other content type (like posts and custom post types).

When a visitor browses to your website, WordPress automatically selects which template to use for rendering that page. WordPress looks for template files in the following order:

Page Template — If the page has a custom template assigned, WordPress looks for that file and, if found, uses it.
Example: page_two-columns.php (see the section about Custom Page Templates below)
page-{slug}.php — If no custom template has been assigned, WordPress looks for and uses a specialized template that contains the page’s slug.
Example: page-about.php if you want to automatically target the page with the slug name about
page-{id}.php — If a specialized template that includes the page’s slug is not found, WordPress looks for and uses a specialized template named with the page’s ID.
Example: page-345.php if you want to automatically target the page with the ID 345

By default, entry ID’s are not visible in WordPress admin but you can install the Reveal IDs plugin to activate the display.

page.php — If a specialized template that includes the page’s ID is not found, WordPress looks for and uses the theme’s default page template.
index.php — If no specific page templates are assigned or found, WordPress defaults back to using the theme’s index file to render pages.

Custom Page and Post Templates for Global Use

Sometimes you’ll want a template that can be used globally by any page, post, or by multiple posts and pages and the process is fairly simple.

From your Pinegrow project, select (or create) a specific HTML document that you will use as your custom page or post template.

It is not mandatory, but for a better organisation or your project folder, it can be useful to name your HTML document according to its layout or use, for example two-columns.html, one-column.html…

Set the Define post template action to the top node of the page from the outline tree (select the node with the page name).

Then, Export your theme.

That’s it, from WordPress, Edit the page or post on which you want to apply the custom template AND from the from the Page or Post Attributes section of your Page/Post, you will be able to select your Custom template from the Template dropdown menu.

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.

Standard Post Templates

There are many template files that WordPress uses to display the Post post type. Any content dealing with a blog or its posts are within the Post post type. The two most notable post template files are:

home.php: The home page template is the front page by default. If you do not set WordPress to use a static front page, this template is used to show latest posts. If home.php does not exist, WordPress will use index.php.
single.php: The single post template is used when a visitor requests a single post. For this, and all other query templates, index.php is used if the query template is not present.

Custom Posts Templates

Custom post types are post types you can create according to your website needs.
You can read our introduction to Custom Post types in Pinegrow to learn more about Custom Post types.

The two most notable post template files are:

single-{post-type}.php This single post template is used when a visitor requests a single post from the corresponding custom post type.
archive-{post-type}.php A single page with links to all your corresponding custom post type archived entries.

You will find some VERY USEFUL details about WordPress templates by reading the WordPress Template Hierarchy

The Post class function

While this is not a template file, the following could be helpful for your developments.

WordPress theme authors who want to have finer css control options for their post styling, have the post_class function available.

When the post_class function is added to a tag within the loop, it will print out and add various post-related classes to the div tag.

It can also be used outside the loop with the optional post_id parameter. This function is typically used in the index.php, single.php, and other template files that feature hierarchical post listings.

To add the post_class function to your templates in Pinegrow, can use the WP > Posts > Post class action.

Important: The Post class action is ALREADY automatically set when the Show Posts smart action is set on a specific element.

Show Posts smart action automatically sets the Post Class, The id and The Loop classic WordPress actions.