{"id":9045,"date":"2018-05-07T05:33:42","date_gmt":"2018-05-07T05:33:42","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=9045"},"modified":"2026-03-09T19:20:02","modified_gmt":"2026-03-09T19:20:02","slug":"wordpress-template-hierarchy","status":"publish","type":"post","link":"\/ng\/tutorials\/wordpress-template-hierarchy","title":{"rendered":"WordPress template hierarchy: understanding its structure and how it works"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>WordPress CMS uses template files to render website content on the front-end. When loading a web page, WordPress uses a query string to find the right template file to display the content.<\/p><p>The process of choosing the template file follows the WordPress template hierarchy. Understanding how the WordPress template hierarchy works is important whether you&rsquo;re a WordPress developer or a casual user.<\/p><p>This article will explain the WordPress template hierarchy, how the theme template files are involved, and how themes use these templates to display website content. We will also explain every template category to better understand how WordPress renders each post type.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-EN.pdf\">Download all-in-one WordPress cheat sheet<\/a><\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">What Is the WordPress Template Hierarchy?<\/h2>\n                    <p>The WordPress template hierarchy is a structure that determines which template file to use when displaying a webpage. It uses the query string to search the hierarchy until it finds the first matching template.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-are-wordpress-template-files\">What Are WordPress Template Files?<\/h2><p>Template files are parts of <a href=\"\/ng\/tutorials\/wordpress-architecture\">WordPress architecture<\/a> containing code that defines how WordPress will display the content on posts, pages, and other website areas. They are included with every WordPress theme to build the look and layout of the site.<\/p><p>In <strong>classic themes<\/strong>, templates are usually PHP files that contain HTML and PHP code. Meanwhile, <strong>block themes<\/strong> use HTML files that only contain HTML markup representing WordPress blocks.<\/p><p>To find the default template files, open the theme folder in your WordPress installation. For example, you can find the templates for the Twenty Twenty-One theme in the <strong>\/public_html\/wp-content\/themes\/twentytwentyone<\/strong> directory.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2018\/05\/hPanel-file-manager-interface-showing-Twenty-Twenty-One-theme-folder-with-the-template-files-highlighted.png\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"610\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/05\/hPanel-file-manager-interface-showing-Twenty-Twenty-One-theme-folder-with-the-template-files-highlighted.png\/public\" alt=\"hPanel file manager interface, showing Twenty Twenty-One theme folder with the template files highlighted\" class=\"wp-image-77239\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/05\/hPanel-file-manager-interface-showing-Twenty-Twenty-One-theme-folder-with-the-template-files-highlighted.png\/w=889,fit=scale-down 889w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/05\/hPanel-file-manager-interface-showing-Twenty-Twenty-One-theme-folder-with-the-template-files-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/05\/hPanel-file-manager-interface-showing-Twenty-Twenty-One-theme-folder-with-the-template-files-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2018\/05\/hPanel-file-manager-interface-showing-Twenty-Twenty-One-theme-folder-with-the-template-files-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/a><\/figure><\/div><p>Most WordPress websites require several template files to work. Here are some common templates a typical WordPress site would use:<\/p><ul class=\"wp-block-list\">\n<li><strong>index.php<\/strong><\/li>\n\n\n\n<li><strong>header.php<\/strong><\/li>\n\n\n\n<li><strong>sidebar.php<\/strong><\/li>\n\n\n\n<li><strong>footer.php<\/strong><\/li>\n\n\n\n<li><strong>functions.php<\/strong><\/li>\n\n\n\n<li><strong>single.php<\/strong><\/li>\n\n\n\n<li><strong>comments.php<\/strong><\/li>\n<\/ul><p>Most blog posts use the <strong>single.php <\/strong>file as the default template<strong> <\/strong>for displaying content.<\/p><p>The page&rsquo;s sidebar, header, and footer use <strong>sidebar.php<\/strong>, <strong>header.php<\/strong>, and <strong>footer.php<\/strong>, respectively.<\/p><p>The last three templates, <strong>functions.php<\/strong>, <strong>single.php<\/strong>, and <strong>comments.php<\/strong> are called <strong>template partials<\/strong>, as they can be added to multiple other templates.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-the-wordpress-template-hierarchy-works\">How the WordPress Template Hierarchy Works<\/h2><p>Themes tend to have multiple templates, so WordPress must decide which to use when displaying any page or blog post.<\/p><p>Some template files take precedence over all the others. These higher-priority template files will be the fallback if WordPress can&rsquo;t find the appropriate template. This logic is the basis of the template hierarchy.<\/p><p>WordPress will search for the selected template file when a web page is requested. If it can&rsquo;t find the correct template, it will follow the hierarchy to find the next most suitable template.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-template-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"842\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-template-hierarchy.png\/public\" alt=\"WordPress template hierarchy diagram\" class=\"wp-image-77950\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-template-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-template-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-template-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/wordpress-template-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>For example, if you try to load a web page for a hypothetical &ldquo;hosting&rdquo;<em> <\/em>category in a WordPress site, here&rsquo;s what goes on in the background:<\/p><ol class=\"wp-block-list\">\n<li>WordPress will look for a template file called <strong>category-hosting.php<\/strong><em> <\/em>within your current theme&rsquo;s directory.<\/li>\n\n\n\n<li>If there&rsquo;s no <strong>category-hosting.php<\/strong><em> <\/em>file, WordPress will look for one that uses the category&rsquo;s ID instead, such as <strong>category-2.php<\/strong>.<\/li>\n\n\n\n<li>If WordPress finds neither option, it will look for a generic <strong>category.php <\/strong>file instead.<\/li>\n\n\n\n<li>If it doesn&rsquo;t find a file called <strong>category.php<\/strong>, WordPress will dial it back and look for the <strong>archive.php <\/strong>template.<\/li>\n\n\n\n<li>Finally, if all else fails, the platform will load your theme&rsquo;s <strong>index.php <\/strong>file and use it as the page&rsquo;s template.<\/li>\n<\/ol><p>A typical WordPress website is made up of several web page categories, each with a strictly-defined hierarchy.<\/p><h2 class=\"wp-block-heading\" id=\"h-wordpress-template-hierarchy-breakdown\">WordPress Template Hierarchy Breakdown<\/h2><p>We can categorize most WordPress websites into seven template types, each with its own hierarchy. For simplicity, we will only list PHP template files.<\/p><h3 class=\"wp-block-heading\" id=\"h-front-page\">Front Page<\/h3><p>The site&rsquo;s homepage or front page is the first page visitors will see. Its layout can vary greatly between websites. The front page hierarchy has three templates:<\/p><ol class=\"wp-block-list\">\n<li><strong>front-page.php<\/strong><\/li>\n\n\n\n<li><strong>home.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><p>WordPress will search for the <strong>front-page.php<\/strong> file first. If WordPress can&rsquo;t find the template, it will find <strong>home.php<\/strong>. If both options are unavailable, <strong>index.php<\/strong> will be the last option.<\/p><p>WordPress will still follow its internal logic even if these three template files contain the same code and layout configuration.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"830\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\/public\" alt=\"front page hierarchy\" class=\"wp-image-77957\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/front-page-hierarchy-1.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-single-posts\">Single Posts<\/h3><p>WordPress posts and articles typically use a template from the single posts category.<\/p><p>There are three main WordPress templates for single posts &ndash; <strong>single.php<\/strong>, <strong>singular.php<\/strong>, and <strong>index.php<\/strong>. Since there may be a template for a custom post type or a specific post, WordPress uses the following hierarchy for single posts:<\/p><ol class=\"wp-block-list\">\n<li><strong>single-{post-type}-{slug}.php<\/strong><\/li>\n\n\n\n<li><strong>single-{post-type}.php<\/strong><\/li>\n\n\n\n<li><strong>single.php<\/strong><\/li>\n\n\n\n<li><strong>singular.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><p>The first two templates are for the custom post type. For example, a WordPress eCommerce site has a <strong>product <\/strong>post and a <strong>computer-01<\/strong> slug. In this case, WordPress will try to find a post-specific template of <strong>single-product-computer-01.php<\/strong>. This hierarchy allows you to be creative and design custom templates for custom post types or individual posts.<\/p><p>If it can&rsquo;t find <strong>single-product-computer-01.php<\/strong>, it will use the template for the product post type &ndash; <strong>single-product.php<\/strong>. If neither is available, WordPress will look for the three remaining primary templates &ndash; <strong>single.php<\/strong>, <strong>singular.php<\/strong>, and <strong>index.php<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"1241\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\/public\" alt=\"single posts hierarchy\" class=\"wp-image-77958\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-posts-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-single-pages\">Single Pages<\/h3><p>All static pages other than the site&rsquo;s homepage will fall under the single pages template hierarchy. The hierarchy is similar to single posts, except for the possibility of using a custom template file.<\/p><p>A single page follows this hierarchy:<\/p><ol class=\"wp-block-list\">\n<li>Custom template file<\/li>\n\n\n\n<li><strong>page-{slug}.php<\/strong><\/li>\n\n\n\n<li><strong>page-{id}.php<\/strong><\/li>\n\n\n\n<li><strong>page.php<\/strong><\/li>\n\n\n\n<li><strong>singular.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><p>WordPress allows you to assign a specific template. Therefore, it will first look for the template file assigned to a WordPress page. This lets you create a template for each page if you need a specific design or layout.<\/p><p>If there&rsquo;s no specific assigned template, WordPress will try to find a custom page template that matches the page&rsquo;s slug or ID.<\/p><p>For example, when loading <strong>website.com\/about-us<\/strong>, WordPress will try to find the <strong>page-about-us.php<\/strong> template file. Or, if that page ID is six, <strong>page-6.php<\/strong> can also be used.<\/p><p>If no matching template file is found, WordPress will fall back to the default <strong>page.php<\/strong>, then <strong>singular.php,<\/strong> before ultimately falling back to <strong>index.php<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"1412\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\/public\" alt=\"single pages hierarchy\" class=\"wp-image-77960\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/single-pages-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-category-and-tag-pages\">Category and Tag Pages<\/h3><p>We&rsquo;ve covered the category hierarchy in a previous section. The category archive page is one of the archive pages that fall back to the <strong>archive.php<\/strong> with the following hierarchy:<\/p><ol class=\"wp-block-list\">\n<li><strong>category-{slug}.php<\/strong><\/li>\n\n\n\n<li><strong>category-{id}.php<\/strong><\/li>\n\n\n\n<li><strong>category.php<\/strong><\/li>\n\n\n\n<li><strong>archive.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><p>This hierarchy works just the same for single posts and pages. WordPress will look for a template unique to the category slug you want to load and then move on to its <a href=\"\/ng\/tutorials\/wordpress-category-page\">category page<\/a> ID. If that approach fails, it will go with <strong>category.php <\/strong>or <strong>archive.php.<\/strong><\/p><p>Category and tag pages use a similar hierarchical structure. The tag archive pages involve <strong>tag-{slug}.php<\/strong>, <strong>tag-{id}.php<\/strong>, and <strong>tag.php <\/strong>template files before returning to the <strong>archive.php<\/strong> and <strong>index.php<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"811\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\/public\" alt=\"category archive hierarchy\" class=\"wp-image-77963\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/category-archive-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-custom-post-types\">Custom Post Types<\/h3><p><a href=\"\/ng\/tutorials\/wordpress-custom-post-types\">Custom post types<\/a> are the types of content that don&rsquo;t fit into the default classifications. Some common examples of custom post types are <strong>product<\/strong> and <strong>review<\/strong>, which you may see on WordPress eCommerce sites.<\/p><p>WordPress will look for the post type&rsquo;s specific archive template before returning to <strong>archive.php<\/strong> or <strong>index.php<\/strong>. For example, for the <strong>product <\/strong>post type, WordPress will look for <strong>archive-{product}.php. <\/strong>Here is the hierarchy:<\/p><ol class=\"wp-block-list\">\n<li><strong>archive-{post_type}.php<\/strong><\/li>\n\n\n\n<li><strong>archive.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"654\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\/public\" alt=\"custom post types hierarchy\" class=\"wp-image-77965\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/custom-post-types-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-search-results-pages\">Search Results Pages<\/h3><p><a href=\"\/ng\/tutorials\/wordpress-search-function\">WordPress has a built-in search function<\/a>. It requires the <strong>search.php<\/strong> template for the search results page. If the template is not found, WordPress will fall back to <strong>index.php<\/strong>, making its hierarchy simpler than other WordPress pages:<\/p><ol class=\"wp-block-list\">\n<li><strong>search.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><p>If your site relies on WordPress searches, ensure that your theme has the required template for the search page. That said, most modern themes, especially block themes, let you<a href=\"\/ng\/tutorials\/wordpress-page-template\"> create a custom template<\/a> easily.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"603\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\/public\" alt=\"search results pages hierarchy\" class=\"wp-image-77968\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/search-results-pages-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-404-error-pages\">404 Error Pages<\/h3><p>WordPress will return a 404 error page when visitors mistype the URL or try to access a page that doesn&rsquo;t exist. The hierarchy for 404 error pages is simple &ndash; WordPress will look for the <strong>404.php <\/strong>template file before returning to the <strong>index.php<\/strong> if it can&rsquo;t find one:<\/p><ol class=\"wp-block-list\">\n<li><strong>404.php<\/strong><\/li>\n\n\n\n<li><strong>index.php<\/strong><\/li>\n<\/ol><p>Most WordPress themes already include the <strong>404.php<\/strong> file. However, if yours doesn&rsquo;t, we recommend creating a custom error page template. Therefore, visitors will understand if such an error occurs.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2049\" height=\"603\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\/public\" alt=\"404 error pages hierarchy\" class=\"wp-image-77970\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\/w=2049,fit=scale-down 2049w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/02\/404-error-pages-hierarchy.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 2049px) 100vw, 2049px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-how-the-wordpress-template-hierarchy-works-in-child-themes\">How the WordPress Template Hierarchy Works in Child Themes<\/h2><p>Using a <a href=\"\/ng\/tutorials\/how-to-create-wordpress-child-theme\">child theme<\/a> is a perfect way to safely customize theme files, including the WordPress template files. Unfortunately, if you customize the template files directly in the theme, updating the theme will revert all modifications.<\/p><p>When using child themes, WordPress loads the child theme files first, then fills in the missing parts from the parent theme&rsquo;s files.<\/p><p>In other words, child themes add another layer to the template hierarchy. WordPress won&rsquo;t load the parent theme&rsquo;s counterpart if it finds a complete template file in the child theme.<\/p><p>For example, here&rsquo;s the hierarchy when adding a custom single posts template to a child theme:<\/p><ol class=\"wp-block-list\">\n<li><strong>single-{post-type}-{slug}.php <\/strong>within the child theme<\/li>\n\n\n\n<li><strong>single-{post-type}-{slug}.php <\/strong>within the parent theme<\/li>\n\n\n\n<li><strong>single-{post-type}.php <\/strong>within the child theme<\/li>\n\n\n\n<li><strong>single-{post-type}.php <\/strong>within the parent theme<\/li>\n\n\n\n<li><strong>single.php <\/strong>within the child theme<\/li>\n\n\n\n<li><strong>single.php <\/strong>within the parent theme<\/li>\n\n\n\n<li><strong>singular.php <\/strong>within the child theme<\/li>\n\n\n\n<li><strong>singular.php <\/strong>within the parent theme<\/li>\n\n\n\n<li><strong>index.php <\/strong>within the child theme<\/li>\n\n\n\n<li><strong>index.php <\/strong>within the parent theme<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>The WordPress template hierarchy defines how WordPress loads different types of posts and pages. Some templates precede others, and WordPress will use the default index.php file as a definitive fallback if a specific page type doesn&rsquo;t have a template.<\/p><p>Knowing how the hierarchy works is important, especially for WordPress theme development. You will understand what template files you need for customization and which ones you should create for custom post types.<\/p><p>Child themes let you safely modify template files. They only add another layer to the WordPress template hierarchy.<\/p><p>We hope this article helps you understand the WordPress template hierarchy. If you have any questions, feel free to leave us a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress CMS uses template files to render website content on the front-end. When loading a web page, WordPress uses a query string to find the right template file to display the content. The process of choosing the template file follows the WordPress template hierarchy. Understanding how the WordPress template hierarchy works is important whether you&rsquo;re [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/wordpress-template-hierarchy\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":172,"featured_media":145330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress Template Hierarchy: How Does It Work?","rank_math_description":"A WordPress developer should know the WordPress template hierarchy. Find out how WordPress reads theme files before returning a full page.","rank_math_focus_keyword":"wordpress template hierarchy","footnotes":""},"categories":[22637],"tags":[],"class_list":["post-9045","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/hierarquia-dos-templates-do-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/jerarquia-de-plantillas-de-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/jerarquia-de-plantillas-de-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/jerarquia-de-plantillas-de-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/jerarquia-de-plantillas-de-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/hierarquia-dos-templates-do-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-template-hierarchy","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-template-hierarchy","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/9045","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=9045"}],"version-history":[{"count":43,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/9045\/revisions"}],"predecessor-version":[{"id":145329,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/9045\/revisions\/145329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media\/145330"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=9045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=9045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=9045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}