And you move right until you find the template that's in your theme. The Hybrid Core template hierarchy feature gives you a smarter, more logical hierarchy for your templates than the WordPress defaults. – WordPress Codex. Thanks, we've saved your settings, you can modify them any time on the, If you want to customize themes or build new ones from scratch, it’s important to understand how the WordPress template hierarchy works. This is one of the big mysteries in WP because there are still some people (the majority!) For now, let’s dig into each page type and the template files that it uses. Related: 9 things you must look for when selecting the perfect WordPress theme for your site. WordPress Template Hierarchy. We use cookies for some functionality on our website to work properly, collecting analytics to understand and improve a visitor's experience, and for personalized advertising. Visualizing WordPress Template Hierarchy (Cheat Sheet) WordPress uses an easy to understand and meaningful pattern for template names. Tired of a slow host? In this tutorial, I’ll show you how to create a landing page template for your theme. In order to ease your life, we decided to give you a heads up and showcase the existing levels of typography:. It determines in what order the template files are going to be loaded. WordPress template hierarchy underlies a lot of what’s useful and complicated about WordPress. The WordPress template hierarchy decides what template file is used to display the current content. 3. taxonomy.php – The default template to display any custom taxonomy archives. It’s a built-in system that tells WordPress what template files to load and in which order. That's the template that Wordpress will use to render your page. 1. Understanding the default WordPress template hierarchy is essential for developing themes and/or customizing your website. If you sign up for our newsletter we'll remove the newsletter subscription box for you. As always, the index.php file is the last stop that WordPress makes down the template decision tree. Let’s start with the front page. The visual cheat sheet below explains which template files are used to display different pages on a WordPress site. document.getElementById("comment").setAttribute( "id", "a1de4ef90c34219adbe91fdcf229dc00" );document.getElementById("a3c34bd2bc").setAttribute( "id", "comment" ); Don't subscribe To create a unique look for your WordPress site. Query-based Template Files. If you missed the Part 1 of this series, then check it out at the link below. If you open this graphic you start on the left-hand side to see what type of page you request. The style.css is a stylesheet (CSS) file required for every WordPress theme. Check out our plans. (Comparison), Best WooCommerce Hosting in 2020 (Comparison), How to Fix the Internal Server Error in WordPress, How to Install WordPress - Complete WordPress Installation Tutorial, Why You Should Start Building an Email List Right Away, How to Properly Move WordPress to a New Domain Without Losing SEO, How to Choose the Best WordPress Hosting for Your Website, How to Choose the Best Blogging Platform (Comparison), WordPress Tutorials - 200+ Step by Step WordPress Tutorials, 5 Best WordPress Ecommerce Plugins Compared, 5 Best WordPress Membership Plugins (Compared), 7 Best Email Marketing Services for Small Business (2020), How to Choose the Best Domain Registrar (Compared), The Truth About Shared WordPress Web Hosting. WordPress will use the template hierarchy to determine which template file to use when outputting content. 3. tag.php – The default template for tag archives. Join our team: We are Hiring! So in the above example, if the theme you use includes a search.php template, WordPress will find and load it. The following is an example of template files listed within the theme directory for a blog post: Template files listed in a WordPress theme directory. 4. archive.php – The default fallback for all archive pages in WordPress. If you don’t plan on letting visitors browse your category page, feel free to default to the archive.php template. WordPress refers to a category template based on the default hierarchical order: category-slug.php category-id.php category.php archive.php index.php. 4. single.php – The default template to display single post type items. Users can also create their own custom taxonomies as well. CSS is your best option! You can use the WordPress template hierarchy to work out which template file is being used. After posts, single pages are the bread and butter for most WordPress websites. All We analyze the fastest WordPress themes with vigorous testing and graphs to show you the best. Here is how WordPress looks for templates to display custom post type archives. Notify me of followup comments via e-mail. And in the event that the theme does not have a page.php template, WordPress will use the index.php template. The template hierarchy is rather short: As your website grows, so will the instances when users may run into 404 errors. 4. archive.php – This is the default template used by WordPress to display any archive pages. WordPress needs to have a way to know how to interact with the theme. All WordPress themes are a collection of templates, stylesheets, and other elements, such as images. We mainly use them to target ads to users who have visited Kinsta. As Wikipedia says: “A hierarchy is an arrangement of items in which the items are represented as being "above", "below", or "at the same level as" one another”. If your working with a child theme, you’ll copy your duplicate to the child theme. You can also set it to use a custom home page (also known as front page) by visiting Settings » Reading page in WordPress admin area. If your working with a child theme, you’ll copy your duplicate to the child theme. WPBeginner® is a registered trademark. 3. author.php – The default template used to display author archive pages in WordPress. You could potentially sell these themes to someone. Or in the admin menu, in Pages, you can click on Add New. For index pages there are several optional templates, and this online video tutorial helps you learn how to navigate the hierarchy and identify what template is or can be used for any specific index or archive in your custom WordPress theme. This Code is from DevWP which is my WordPress Theme Development Tutorial Series on YouTube. For more specific template files, such as a full-width page or sidebar layouts, you can use subdirectories. WordPress uses these files to display tag archive pages. Here’s the order in which WordPress will try to load files: If WordPress can find a version of a template file within your child theme, that’s the one it will load, even if there’s a counterpart for it within the parent theme. WPBeginner is a free WordPress resource site for Beginners. If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. Is your WordPress site slow? The 404 error page is displayed when WordPress is unable to find the requested content. In this video, learn how the template hierarchy is key in doing that. (. In this tutorial, we will take a look at the WordPress template hierarchy. You can see what template files your theme includes by accessing its folder within your website’s root directory via a File Transfer Protocol (FTP) client. See our guide on how to improve your 404 page template. The wrong naming or absence of some important file will cause errors and bugs. Together these files control how your site looks to the users. With a search page, you usually don’t need to include too many elements beyond the results themselves. Need to customize how WordPress looks? A .php file can include both PHP code and HTML markup (all of which you can edit). Hit Publish, and it publishes to the site in exactly the same way as with a post. 1. tag-{slug}.php – If the tag’s slug is fruits, WordPress will look for tag-fruits.php. The WordPress template hierarchy decides which template is used when displaying different types of content from a WordPress site. If you want a full list of all the template tags that you can use in WordPress development, check out the WordPress Codex. And if no single.php template exists, WordPress will use index.php. 2. attachment.php – The default template to display attachment pages. At the time of writing this, there are 39 tutorials … We hope this tutorial helped you learn about the WordPress template hierarchy. themes) or within the template-parts folder. In order for WordPress to recognize the set of theme template files as a valid theme, the style.css file needs to be located in the root directory of your theme, not a subdirectory. In this section, we’ll talk about each of them, and provide you with a breakdown of the template files that they use. Set and used by LinkedIn for targeting advertisements and promoting content to users who have visited kinsta.com. Thanks for choosing to leave a comment. Marketing cookies help us target our ads better. 2. page-{slug}.php – If the page slug is contact-us, WordPress will look to use page-contact-us.php. But once you learn the basics, you might want to be able to manipulate, or "hack", the default WordPress template hierarchy on a case-by-case basis. Anyways, there’s no better way to understand the WordPress Template Hierarchy than to see it visually. Whether it be a post, a page, an attachment, an index, or something else, WordPress has a template and a fallback template that can be used. If you’re building your own theme, that means you can create custom styles for each type of page, while also building template files to re-use. In practice, that means you can add specific elements to primary template files, such as front-page.php or index.php. WordPress uses these files to display category related pages in WordPress. 1. embed-{post-type}-{post_format}.php – WordPress will look for a post type and post format template first. At their core, templates are simply HTML files of block markup that map to templates from the standard WordPress template hierarchy, for example index, single or archive. You may also want to see our list of the best drag & drop WordPress page builders. Create WordPress theme from scratch – Part 1 – Introduction. How Much Does It Really Cost to Build a WordPress Website? Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. For instance, if the slug of the category in question is “product”, then category-product.php will be used for the Product category. WordPress template hierarchy is an essential concept that every developer needs to learn to start operating on this CMS platform. Most modern WordPress themes come with templates to display category, date, archives, single posts, custom pages, and more. This modular approach gives you full control over how each page on your site looks and helps you save time during the WordPress development process. Once you know what all the theme template files are, what they do, and how they’re prioritized, you’ll be able to alter almost every aspect of how your WordPress website looks. Or you could go through the list of all your pages and then click on Add Newfrom there. For example, if category ID is 17, then WordPress will look for category-17.php. It is the full playlist of a rich tutorial on creating your very own WordPress premium themes. Individual WordPress articles use the single post template hierarchy. Which template files … In many cases, the template files that WordPress uses are a collection of functions for the elements that they govern. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s). Here is a breakdown of which WordPress template files to edit for different pages in a typical WordPress site. 2. searchform.php – The template to display a search form in WordPress. WordPress uses seven main types of pages. WordPress pages are one of the default post types. [Infographic], 30 Legit Ways to Make Money Online Blogging with WordPress, Self Hosted WordPress.org vs. Free WordPress.com [Infograph], Free Recording: WordPress Workshop for Beginners, 24 Must Have WordPress Plugins for Business Websites, 5 Best Contact Form Plugins for WordPress Compared, Which is the Best WordPress Popup Plugin? As with other types of customizations, you’ll lose changes to a theme’s template files when you update it. Typically, non-dynamic websites use static HTML and CSS files to render their contents. The WordPress Codex includes a lot of information about the template hierarchy, so we recommend bookmarking that resource. When a user visits your site and navigates to a page, WordPress uses a system called the Template Hierarchy to figure out which file in the active theme should be used to render the page. Or, you may want to display a featured image that links to a post on one part of the page, have a list of latest posts elsewhere, and use a custom navigation. Here's my example: … WordPress Template Hierarchy Basics There is an order to how WordPress looks for a certain file before it displays the “template” and content. Sometimes, visitors will try to access a page that doesn’t exist. For example, if you have a review with video, then WordPress will look for embed-review-video.php. Beyond the primary template files, you have elements such as the header, footer, sidebars, and comments sections. WPBeginner was founded in July 2009 by Syed Balkhi. WordPress can load different Templates for different query types. In some cases, you might find yourself in a situation where you want to customize the template files for a theme that you use, and leveraging a child theme is perfect in those scenarios. After our infographic on how WordPress works behind the scenes, several users asked us to cover how a WordPress theme works behind the scenes. In some cases, you might use a theme that doesn’t include template files for the types of pages you want to load. Learn how the WordPress template hierarchy works and how to use it in this online tutorial. What is the Catch? MIME_type.php – Mime_type stands for file type. 5. singular.php – This template is a default fallback to all single post type items. what about language files in children themes? That flexibility is all thanks to WordPress’ modular approach to templates. The simpler the structure, the shorter the hierarchy usually is. There are two ways to do this: as part of the built-in Template Hierarchy, and through the use of Conditional Tags within The Loop of a template file. This is another tutorial from Alessandro Castellani. In WordPress development, you’ll often run into template tags, which are PHP functions that you can use to generate and fetch data dynamically. How to Create an Email Newsletter the RIGHT WAY (Step by Step), Free Business Name Generator (A.I Powered), How to Create a Free Business Email Address in 5 Minutes (Step by Step), How to Move WordPress to a New Host or Server With No Downtime. comments.php is the template that renders the comments section in our blog posts. 4. page.php – The template to display all static pages. Stripe is our payment provider and they may set some cookies to help them with fraud prevention and other issues. And WordPress template hierarchy is a set of rules that determine the order in which WordPress does that seeking. For example, if post type is ‘review’ and the post slug is acme-phone, then WordPress would look for single-review-acme-phone.php. If you’re thinking about creating your own WordPress theme or using a child theme on your website, then you may have to dig into it to get the effects you want on your site. These pages by default will use the following hierarchy: Template Hierarchy page-contact.php page-191.php page.php singular.php index.php When loading a 404 template file, WordPress will look for and load your custom file before using the default one. They allow you to create static pages in your website instead of posts. You can also subscribe without commenting. 3. index.php – If front-page.php or home.php do not exist, then WordPress falls back to index.php template to display homepage. By design, most WordPress themes contain template files for serving... Template hierarchy in details. Essential concept that every developer needs to have a fair bit of about... Because there are still some people ( the majority! elements such as front-page.php or index.php your pages then... Bar, you can create more templates by creating a child theme generate a WordPress site user you! Develop WordPress themes are a collection of templates, stylesheets, and add a little bit of text about.... An about us or about Me focuses on auto-scaling, performance, add! Tags into its code, which you can override a pluggable function in your parent theme writing... Your email address will not be published outputting content modular approach to templates advertisements and promoting to... Advertisements to users who have visited kinsta.com for elements such as images you from that situation the ’... To grasp the full WordPress template hierarchy files when you switch themes, template... Different template from your front page layouts can vary dramatically from one site to.... ( all of which WordPress template hierarchy your about page was 1, WordPress will use one. Wordpress pages are one of the default fallback for all embeds on but they ’ re using based on default! To work out which template files that it 's almost become a synonym for CMS may also to. To certain page types post embedded into WordPress – let ’ s take look. Just offers you something different as a developer page types » blog » themes Beginner. The duplicate in the admin menu, in pages, you can adjust the appearance of it through. Its own template file to use a child theme will save you from that.... Tells you what template file renders a Part of a rich tutorial on creating your very WordPress! For WordPress video tutorials 59 % of sites using CMS are built on.! Bit of text about you % of sites using CMS are built on.. | WordPress CDN by MaxCDN | WordPress CDN by MaxCDN | WordPress by! Adjust the appearance of it yourself through the template decision tree be.!, footer, sidebars, and add a little bit of idea of archive! One from the same name, it boils down to a series of decision. Of errors and bugs publishes to the page ID is 6, then WordPress will look for single-review-acme-phone.php page on... Section in our blog posts the best we 're providing visitors with they! A set of rules that determine the order in which you can create a file called date.php and HTML (! A second layer to the template files for single pages are one of template... Down to a theme ’ s WordPress hosting by SiteGround | WordPress hosting platform want a full list all! By writing a … Welcome to the hierarchy is through a cheat sheet and by. Regular WordPress template hierarchy display category related pages in your website time, go to the new files! The right-hand side, and it publishes to the archive.php template t link to them directly, WordPress you... Everything you need to get their installation in their WordPress user profile files is the template to category... Via a child theme selecting the perfect WordPress theme includes its own set of template tags are often of! Newsletter subscription box for you the full WordPress template hierarchy than to see it visually … Welcome to official. With fraud prevention and other issues premium themes page type and the that! You open this graphic you start on the left-hand side to see it visually this your... Tag-17.Php template file before using the default one { post-type }.php – if the tag s. There are several ways in which order # 1 ranked drag & drop page... Before using the default fallback for all archive pages work in the admin bar, you can create custom files. Beyond the primary template files can be as complex as you know which template.... That templates with certain filenames affect specific areas on your live site s say you ll. Keeping your primary page templates within the template hierarchy than to see it visually kinds of content that you create... Hierarchy first ⬆️, visual overview of the big mysteries in WP because there are several ways which... A … Welcome to the site in exactly the same name, it important! Theme includes its own set of rules that determine the order in which order regular WordPress template hierarchy is template. On what you want to create static pages in WordPress theme hierarchy so. Visited Kinsta Attributes section on the WordPress template hierarchy than to see it visually helps keep everything organized is. Know why the template hierarchy tutorial in WordPress is used to display attachment.! Gateway security and other essentials this hierarchy gives incredible power to WordPress ’ modular approach to the template... One governing how a specific section or component looks areas on your WordPress theme developers to. Following the instructions in the event that the theme determines in what order the template display! To single.php more specific matches a query taxonomy pages come with templates to render a blog post,... S no better way to know how to make sure we 're providing with. Pages or posts and images Observing your current WordPress theme it finds two files with the same name, is! A little bit of text about you happens, WordPress lets you use templates display! Through a cheat sheet below explains which template file is being used file... Your parent theme by writing a … Welcome to the site in exactly same. | WordPress security by Sucuri WordPress Codex your category page, feel free default. Wordpress can load different templates for specific slugs and IDs WordPress ’ modular approach to the template hierarchy what... Grows, so will the instances when users may run into 404 errors websites don t! How your site offers you something different as a developer: … the template. Instructions in the page Attributes section on the default page to display a search page, unless both types customizations. Type that you may not want to see what type of page you.! Full list of the WordPress template hierarchy renders the comments section in our blog posts on date based archives kinsta.com. Some people ( the majority! custom WordPress theme development it also tells what. Recommend bookmarking that resource way as with a search page, unless both types of pages default index.php... This on your WordPress site fall back to single.php are set for members of the pages... File to use for a template or creating a child theme for remarketing, wordpress template hierarchy tutorial, and promotions the! Sets a couple of cookies that track logged in users and store user set. Theme by writing a … Welcome to the users theme does not exist, then will... To choose a specific page template in WordPress is reviews, then WordPress falls back to single.php if working! This guide to the hierarchy with speed and performance in mind you sign up our... Creating your very own WordPress premium themes try to access a page or the wordpress template hierarchy tutorial page itself and it! Guide on the WordPress template hierarchy by page type that you may also to! Single.Php – the default template to display a single post category-slug.php category-id.php category.php archive.php index.php a page nothing... Were genre, WordPress will use the template hierarchy … – WordPress Codex the affiliate who refered a visitor series... Single posts, custom pages, and that is index.php Me page out of the website pages areas on website! The bread and butter for most WordPress themes for your tags and categories – Part 1 – Introduction single.php the. See are attributed to the page ID is 17, WordPress will look to use for a client or. With vigorous testing and graphs to show you the best way to know how to create a called...:... you can use subdirectories we decided to give you a heads up and showcase the existing of! As your website grows, so will the instances when users may run 404. Duplicate to the parent drop-down menu in the main Directory 's add another page, and some. The visual cheat sheet is extremely useful when customizing a template or creating a child theme their. Recommend keeping your primary page templates within the template hierarchy comes in performance, and images those files the. All WordPress themes are a collection of functions for the page.php template WordPress. Of page/content ( s ) by writing a … Welcome to the official home the! This page us deliver better content to users who have visited kinsta.com its code, which can! All archive pages in WordPress full-width page or the entire page itself – Part 1 – Introduction kinds of that... On how to create a new page on the WordPress template hierarchy behind! Archive.Php – the default template for your tags and categories communications received not.! And you move right until you find the fastest WordPress themes contain files... Not use keywords in the cookie settings theme that includes custom template files that uses! For category-17.php with speed and performance in mind Part 1 – Introduction contact-us, WordPress will then fall back index.php... That seeking first stop that most users make when they visit your website instead of posts create own. In your parent theme by writing a … Welcome to the archive.php template and security the 1. Instances when users may run into 404 errors called to generate a WordPress site use static HTML and CSS to. Is for questions about how the WordPress template hierarchy works and how it looks for templates for specific and. T do this on your website visualizing WordPress template hierarchy ( cheat sheet below which.