WordPress Template Hierarchy

Jason Yingling

Post vs Page vs Webpage

• Webpage – an HTML document being served to a web browser. The final output of your PHP into HTML, CSS, and JS.

Post vs Page vs Webpage

• “post” – content stored in the database in the wp_posts table

Post vs Page vs Webpage

• Post – A default WordPress post of type “Post”• Page – A default WordPress post of type

“Page”• Posts, Pages, and Custom Post Types are all

stored together in the wp_posts table of the database with different types (Post, Page, Product, etc.)

Template Terminology• Template Files – PHP files that determine the site’s

markup.• Page Templates – “those that apply only to pages to

change their look and feel. A page template can be applied to a single page, a page section, or a class of pages.”

• Template Tags – Functions used within template files to retrieve and return data. (ex. the_title() or the_content()

• Template Hierarchy – The logic WordPress uses to determine which template file to use to display certain data

WordPress as a Factory

• posts – The raw materials• Database – The warehouse• WordPress theme – The Assembly Line• The Browser – The consumer• https://www.youtube.com/watch?

v=nR47WZGTywE

Crucial Templates

• style.css – determines the theme’s visual appearance and registers the theme with WordPress

• functions.php – used for presentational functionality.

• Template Files – determine the site’s markup. Uses PHP to convert data from the database into the HTML output to the browser.

style.css

• (image of registration header)• Required by WordPress to register the theme

functions.php

• Enqueuing additional stylesheets and scripts• Creating widgetized areas and menus

Should only be used for presentational functionality such as:

• Registering Post Types or Custom Taxonomies• These should go in a plugin so data is not lost when a

theme is switched.

Should not be used for content functionality such as:

Template Files

• Always used files – files used in every template– header.php– footer.php– sidebar.php (if applicable)

• Additional files – files that may or may not be used depending on content / hierarchy– index.php– single.php– page.php– And more

Template Partials

• Allows you to easily reuse code throughout the theme

• header.php, footer.php, and sidebar.php are some basic examples

• content.php is commonly used to pull in post content markup

“A template partial is a piece of a template that is included as part of another template, such as a site header.”

Common Template Files• index.php – The main template file. Required in all

themes.• style.css – The main stylesheet. Required in all themes.• Header.php – Usually contains site’s doc type, meta info,

stylesheets, etc.• single.php – used when a visitor requests a single post.• page.php – used when a visitor requests individual pages• Many more descriptions available on the Codex -

https://developer.wordpress.org/themes/basics/template-files/#common-wordpress-template-files

Template Hierarchy

• The logic WordPress uses to determine which template file to use to return requested post data

Everything goes back to index.php

• No single.php template? WordPress will use index.php

• No page.php template? WordPress will use index.php

https://developer.wordpress.org/files/2014/10/template-hierarchy.png

Single Post• single-{post-type}-{slug}.php - (since 4.4) – WP looks for a

specific post. Fox example, single-product-shirt.php would work for a product post type with the slug shirt.

• single-{post-type}.php – If the post type of the data is Product, WordPress would look for single-product.php

• single.php – If the above don’t exist, WordPress then falls back to single.php

• singular.php – If single.php doesn’t exist, WP looks for singular.php

• index.php - If none of the above exist WordPress falls back to index.php

Page

• Custom template file – the page template assigned to the page

• page-{slug}.php – If the page slug is recent-news, WordPress looks for page-recent-news.php

• page-{id}.php – If the page ID is 6, WordPress looks for page-6.php

• page.php• singular.php• Index.php

Template Hierarchy Resources

• WordPress Codex image - https://developer.wordpress.org/files/2014/10/template-hierarchy.png

• Template Hierarchy in Detail - https://developer.wordpress.org/themes/basics/template-hierarchy/#the-template-hierarchy-in-detail

• Interactive Hierarchy map- http://wphierarchy.com/

• Show Current Template Plugin - https://wordpress.org/plugins/show-current-template