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.
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 a theme and a form or 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 full WordPress theme.
Therefore, WordPress templates are usually built into their own different themes and may include multiple variations and versions of a single type of page.
For example, a template might include a template for a blog post page, and display two different versions of the article (a full-width version of the article and a narrow-width column version).
Briefly: 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 usually affecting the layout of one page on your site (you can then assemble these themes into an entire website like you assemble lego pieces To create an integrated design for your website template.)
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 template files through the WordPress control panel
First, go to the WordPress control panel, then choose the Appearance tab > Themes .
This option will allow you to explore all the templates available on your WordPress site. By default, there are some templates available by default such as 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 back to the WordPress control panel > choose the Appearance tab > Template Editor . 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 menu (select 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. Access the template files through the hosting control panel
Go to your WordPress site’s file manager within the Cpanel hosting control panel, 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 template folder and you will see all the essential folders and files that make up any WordPress theme, as shown in the following image:
The basic files that make up the WordPress theme structure
You should know that there are primary 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 main files:
- File index.php:
It 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 theme to function 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 template. WordPress. But of course you will need to add the appropriate code for it to work properly.
Other important core files for a WordPress theme are:
- Header.php file:
It is a file that contains the basic content that defines the template header. Your site’s header is usually 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:
A sidebar file is a file containing web page elements that can be included in core content areas of the site such as popular posts or email newsletter sign-ups.
- Single.php file :
This file is for displaying a single article page in WordPress.
- The file Author.php
It is the file that displays the article author’s information page.
- The file category.php
It is the file responsible for the classification 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 how they work
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 template hierarchy:
The concept of the hierarchy of WordPress template files
The WordPress theme file hierarchy is a system that WordPress uses to determine which theme file is 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 set the front 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 posts, 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 posts. If WordPress does not find the file home.php in the template folder, it will It searches for the presence of the front-page.php file to display the first page of your site, and if it does not exist, it will rely on the index.php file.
- If you are viewing the page not found error page (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 template 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 published on the site in the month of December 2021. The page that displays after clicking on the date will be formatted through the Archive.php theme file .
- 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 permanent link to this page. Then The page-ID.php file where 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 no 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 types of content 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 website
- Home page (is_home) that exclusively displays the site’s article index (does not apply to the home page that is set up in the site from Reading Settings to display a static page)
- Page displaying the individual article published on the site (is_single)
- 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 classification name 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.
