Learn about the basic structure and hierarchy of WordPress themes

Templates in WordPress are the basic element that makes WordPress sites distinct and different from each other. The WordPress theme is responsible for determining the interface, structure, and external appearance of the site (UI). Therefore, it is necessary to understand how to work with templates in WordPress, customize them to suit your needs, and understand the basic structure of WordPress templates.

Any WordPress template contains a set of basic files that are subject to a hierarchy that determines the way each page of your WordPress site is displayed. The following article aims to provide a comprehensive explanation of the structure of WordPress templates, their basic elements, the hierarchical structure of these files and their correct sequence. By knowing these basics, you will be able to take a step forward in understanding how to better customize the WordPress template you use on your site, or develop your own basic WordPress template from scratch or as a child template from an existing template.

Contents of the article What are WordPress themes? What are template files in WordPress?

How can I access the content of template files on the WordPress platform?

1. Accessing the template files through the WordPress control panel 2. Accessing the template files through the hosting control panel The basic files that make up the WordPress template structure Other files included in the WordPress template The hierarchy of WordPress template files and their working mechanism 

The concept of the hierarchy of WordPress template files Types of pages in a WordPress website Conclusion What are WordPress themes? The WordPress template, also known as (theme, appearance, or theme), is the basic structure for the entire design of a WordPress website, which determines the overall appearance and functionality of the website by controlling the design of the front-end of the site. This structure includes all components of web design: such as color palettes, backgrounds, site header and footer design, page layouts, fonts used, component placements and other elements.

The concept of a template or theme in WordPress is often confused with the concept of a template or WordPress template. In the following paragraph, we explain the difference between them before we detail the explanation about the structure of WordPress template files. What are template files in WordPress?

WordPress Templates The main difference between the theme 

The difference between a template or a template is that the template relates only to specific website pages, and not to the entire website. A template is a single-page layout that is available within the complete WordPress theme. Therefore, WordPress templates are usually included in their own different templates 

Includes multiple variations and versions of one type of page. For example, a template might include a template for an article page on a blog, and display two different versions of the article (a full-width version of the article and a narrow-width column version). In short: We use a template or theme to design the site as a whole, and we use a separate template file for each area of our website, with each template typically affecting the layout of a single page on your site (You can then assemble these themes into an entire website like you assemble Lego pieces to create a complete design for your site template.) Read also: What The difference between Template and Theme in WordPress. In today’s article, we will focus on explaining the structure of the template files in WordPress, which together ultimately form the WordPress template that determines the design of your complete site, and we will explain in particular how they are called by the WordPress system.

How can I access the content of template files on the WordPress platform?

If you have an existing WordPress site, and you want to access all the files for the template you are using, you can access these files in several ways: 1. Access the template files through the WordPress control panel. First, go to the WordPress control panel, then choose the Appearance tab. < قوالب (Themes ) سيتيح لك هذا الخيار استكشاف كل القوالب المتاحة في موقعك الووردبريس. تلقائيا، يوجد بعض القوالب المتاحة بشكل افتراضي مثل القالب TwentyTwenty-one.

Through this window, you will also learn about the currently active template on your site to explore its files. After selecting the template whose files you want to view. - In this case, the activated template on our site is the default Twenty Twenty-one template - which includes the main files of the WordPress template that control the appearance of the current site - in order to view the content of the actual files for this template, go again to the WordPress control panel< اختر تبويب المظهر < محرر القوالب .

We will get the following window: You can notice all the template files on the far right (items framed in red) and the name of the template appears in the drop-down list (choose a template to edit) at the top. Through this drop-down menu, you can change the template to view its files. The Twenty Twenty-one template is marked here, and below it are the template files.

You can click on any other template installed on your site and it will show its file content in the code editor next to it. In this simple way, you can view template files on WordPress. 2.

Accessing the template files through the hosting control panel. Go to your WordPress site’s file manager within the hosting control panel (Cpanel), then click on the Themes folder. Inside this folder you will find all the folders for all the templates installed on your site. Click on any folder for a template. You will see all the essential folders and files that make up any WordPress template that it consists of, as shown in the following image: The basic files that make up the WordPress template structure. You should know that there are basic theme files and other secondary files that make up the template.

Essential files are files that must be located in the theme's folder. Otherwise, the theme will not appear in the WordPress theme installation options, and it will also refuse to upload the theme if you want to install it manually. There are two basic files: The index.php file: This is the file that includes the home page or interface of the WordPress template, meaning that once the WordPress template is uploaded to WordPress, the content in this file is what will be displayed while visiting the home page of the site. Style.css file: Note that the extension of this file is css, not php.

It is the main file in which you will write the style and formatting codes on the web page (you can notice that there is a file named Style-rtl.css if the template supports the Arabic language). These two files are necessary for any WordPress template to work properly. In other words, if you create your own folder and name it, for example, Mytheme, and then add only these two files to it (even if they are devoid of any programming code), you will see a template called Mytheme when you browse the WordPress templates on your site, because you have achieved the basic files required to create a WordPress template. But of course you will need to add the appropriate code for it to work properly.

Another important core file for a WordPress template is the Header.php file: This is a file that contains the basic content that defines the template’s header. Usually, your site’s header is the first thing people see. At the top of your page, it standardly includes the title and description of the site, and specifies the content style files that determine the fonts, colors used on the site, and other information. Footer.php file: It is a file responsible for displaying the information that is inserted at the end of the web page.

It also has other tasks, such as merging Javascript codes and loading functions as well. Other files included in the WordPress template. The previous files are just a simple structure in order to accept your template as an integrated WordPress template. If you browse an existing WordPress template automatically, such as TwentyTwenty-one, you will find many other theme files in the template, each of which serves to display the various components of the site, the most important of which are: Sidebar.php file: The sidebar file is a file that includes web page elements that can be included in aspects of the basic content of the site, such as popular posts or registration for the mail newsletter. 

Electronic. Single.php file: This file is for displaying the single article page in WordPress. Author.php is the file that displays the article author information page.

The category.php file is the file responsible for the category pages on the site. There are many other different files, such as comments.php, archive.php, tag.php, and more. In the following paragraphs of this article, we will explain how these files interact with each other according to a structure and hierarchy so that they ultimately form an integrated WordPress template. The hierarchy of WordPress template files and their working mechanism. Knowing these files alone is not enough to build an integrated and professional WordPress template. Rather, you must know the hierarchical structure through which these files are called on the WordPress site for the template to work as planned.

The file that is called by a WordPress template depends on the type of page you are currently viewing on your site, but what if the required template file is not present in the template? WordPress will then adopt a default hierarchy for calling files and will call the second file in the hierarchy, and if the file does not exist, it will call the next file in the hierarchy... and so on, finally arriving at the index.php file, which must be present in the template as we mentioned, otherwise the template will not work. The following image shows an example of the WordPress theme hierarchy: The Concept of the WordPress Theme File Hierarchy The WordPress theme file hierarchy is a system that WordPress uses to determine the theme file required to display a specific web page on your website.

This hierarchical recall feature is built into WordPress, and occurs automatically _behind the scenes_ when a visitor tries to access different pages of your site. This sequence depends on the current page type on the site. To understand this sequence well, let us review the following examples: If you select the first page of your site to be a static page instead of displaying a list of the most recent posts.

In this case, you are viewing the home page (the value of the is_front_page function is True) and by default the template file for the site's home page is relied upon, which is the file front_page.php. If your template does not contain this file, the file index.php will be called to display this static page. If you specify the first page of your site to display a list of the most recent articles, which is the default in WordPress, as you know (the value of the is_home function is True), then the file home.php will be used to display the page of your most recent articles. If WordPress does not find the file home.php within the template folder, it will search for the presence of the file front-page.php to display the first page of your site, and if it does not exist, it will rely on the file index.php.

If you are viewing an error page  

The page does not exist (the value of the function is_404 is True)  that appears while clicking on a wrong link. The 404.php theme file will be called. If your theme does not contain this file, the index.php file will be called. If the user searches for something on the site, the search results page will be displayed (is_search=True). Customization of the results page is done through the Search.php file within the WordPress template, or through the index.php file if this file does not exist.

If you are browsing a page to archive content and display topics under a specific category (is_archive=True). For example, the page that displays all the articles that have been published 

On the site in December 2021. The page that displays after clicking on the date will be formatted through the theme file Archive.php. If you are viewing one of the static pages on your site (is_page=True)  

Such as the privacy policy page or the Contact Us page, the files will be called in the following sequence: the custom-template.php file, then the page-slup.php file, where the slug represents the permalink to this page. Then the page-ID.php file, where the ID represents the page identifier. If none of the above are present and there is a theme file called page.php, the theme will use it and finally if there is a page.php file, index.php will be used to display the requested page.

Note that the first file  in the hierarchy here is not the name of the Template file, as a static page is unique to other post types and WordPress can recognize many other content types as a static page. Thus, you are free to create a general template file for all static pages on your site page.php, or customize each page as you wish.

With this hierarchy, you can target a specific page and customize its own format by the slug name of the page (page-contact.php file, for example) or by the page ID (page-7.php file, for example). 

You must now understand the basic structure of WordPress template files, and have noticed that with this hierarchical structure you can customize your template as you want. It's up to you as a theme developer to decide how specific you want to be in differentiating the way different pages on your site are displayed and creating custom files for that. Finally, we will briefly review some of the other types of pages on the WordPress website that you may need to customize an integrated WordPress template.

Types of pages on a WordPress site: The home page (is_home) that exclusively displays the index of the site’s articles (it does not apply to the home page that was set up on the site from the reading settings to display a fixed page) The page displaying the individual article published on the site (is_single) The classification page (is_category): This page displays the classifications of the site’s articles and aims to display all content under a specific category (it receives the classification ID parameter, or the name of the classification to display the page). Tag page (is_tag) Category is different from tag in WordPress. But in terms of working environment, they are similar to each other in terms of parameters and display method.

The information page for the author of the article (is_author). This page takes several parameters to identify it (the ID of the author of the article, or his name) and can be customized to display all articles written by a specific author. The date page (is_date) is used by news sites built on WordPress. So that it collects its published articles under one date, so we say, for example: the news published today, and it is collected under the Date.php page, which receives the date as a parameter.

The (is_taxonom) page does not differ at all from the Category or Tag pages, but it is a page for customizing the style and appearance of a specific classification. For example, if you want to customize the pages that have the news tag and the articles tag and give them a different style even though they are both under the Category.php page, you can use this template file. The attached file page (is_attachment) is a page that displays the appearance and customization of the file upload page in a WordPress template.

It is used on file upload sites to customize the page that allows files to be uploaded differently. Read more: 

What are Conditional Tags in WordPress?

You should know that these pages that make up a WordPress site are included upon request and according to the nature of your site. For example, if you want to build a template for a landing page, you do not need to have an articles page, for example, a Single.php page, and some other pages that you may not use permanently except in the case of specific WordPress sites. Conclusion In this article, we learned about the basic structure of WordPress templates and their hierarchy, and we found how WordPress templates give you a lot of flexibility and allow you to display your static pages differently from articles and archive pages, and how they provide you with additional features that you can use to customize what you want.

Try to understand this structure well because it will benefit you as a WordPress developer when you build custom themes, and it will make it easier for you to display the different pages of the site in a distinctive and professional manner with distinct characteristics by specifying the specific file for each page from within the template files. Read also: WordPress theme development series | A free course to learn to develop WordPress themes from scratch