In today’s article in the Developing WordPress Themes from Scratch series, we will learn how to format internal static pages in our WordPress site such as the About Us page, Contact Us page, Privacy Policy page, etc.
The appearance of all these pages that you create on your WordPress site is handled by the page.php template file , and in today’s article we will be interested in creating and customizing this file to define the appearance of these pages in our WordPress theme.
The difference between the static internal page and the static first page of the site
Do not confuse the static inner page with the static home page of the site because they are different in WordPress. The file responsible for displaying the static inner pages is the page.php template file, while the file responsible for displaying the static home page is the front-page.php file.
The first page of a WordPress site is displayed based on different files depending on the way it is set up. It has two states: it either displays by default the most recent articles. In this case, WordPress will first search for the presence of a template file called home.php in your template folder, and if it is not found, it will not be able to find it. It will return to the front-page.php file, and if it does not find it, it will resort to using the index.php file.
If you choose a home page with fixed content for your site, you will be given the option to select a custom home page or blog page. If you do not create custom template files for it, the usual previous hierarchy will be used to display the first page of the site.
home.php Displays the default WordPress home page that displays the latest articles published on the site. If WordPress does not find the home.php file, it will return to the first page and then to the index.php file
front-page.phpDisplay a static custom homepage for your WordPress site instead of a page that displays a list of the latest posts.
The method of creating template files does not differ depending on the type of page. In any template file, you often need to display the site’s header and footer, and you also need to call the usual WordPress loop to fetch the content to be displayed.
But what differs here is the appropriate file that is chosen and specified within the hierarchy, and it is necessary that you, as a WordPress template developer, know which file you are dealing with in order to write the code responsible for each part of your custom template correctly.
Let us now follow the steps to design a custom template file to display static internal pages on the site.
Create a page.php template file to display internal pages on a WordPress site
In fact, going back to the hierarchy chart of WordPress themes, you will notice that your theme can include several template files inside the template folder to display static internal pages, as WordPress initially checks for the presence of template files dedicated to specific pages that have a specific nice name page-{slug}.php or page-{slug}.php. A specific identifier page-{id}.php, for example if we have a page with the nice name about-wpar then WordPress will look for a file in the theme folder named page-about-wpar.php to display it
If such a file is not found, it will rely on the default template files page.php or index.php to display static pages on the site.
In our custom template, we want all internal static pages of the site to appear in a simple way that displays only the title and page content while displaying the site’s default header and footer.
For example, if we created a page on the site and called it (main types of plants) and wrote some information on it and then displayed it, we will notice that it displays a virtual image and a snippet of the page content as shown in the image below. This is because it depends on the index.php file that we built in a previous lesson in this series. .
To achieve a different design for this page and the rest of the internal pages, we must first create a new file in your template folder and call it page.php and open it in the code editor, then write the following code within it:
All we did was display the site header by calling the ready-made function get_header() at the top of the page, followed by the page title the_title() and its full content the_content(), then we displayed the comments_template if they were allowed and activated on this page, and in the end we displayed the footer by calling function get_footer()
Now, if you go back to the browser and refresh the main plant species page that you created a moment ago, you will see that the content of the page has changed according to what you put in the code above and the page appears differently because the page.php file is now used to display the page and not the index.php file.
Add some formatting to the page
You may need to add some CSS to your template’s style.css file to make the page content look better.
The page appears after formatting as follows:
When do we manually customize WordPress website page templates?
After you finish preparing the page.php template file and formatting its elements, you will have finished designing the internal pages of our site. If you review any other internal page of the site, you will notice that they all look the same because the page.php file is the default model for displaying the static page.
Unless you create a more specialized file hierarchy within your template folder, or manually specify a specific template name for the page you create through the editor window as shown in the following image:
If you need to display a specific page with a unique-looking design, for example, you want to display the About Us page with a different design from the rest of the pages on the site, in this case you will need to create a dedicated template file for it. All you have to do is create a new template file with any name you want, let it be template- about.php , but you must put a special comment at the beginning of this file indicating that it is a custom template file and clarify its name as follows:
Then write the page display code in the usual way according to the requirements that suit you and format it in style.css, and choose it to be a custom template for the About Us page only so that WordPress can use it to display this particular page.
We want to display at the beginning of this page a title in fixed text (Welcome to the About Us page) and also display the featured image or what is represented by the thumbnail. Therefore, we initially add support for the featured image for articles and pages in our template by calling the function add_theme_support in the template functions file functions.php :
Read more: Learn how to add features to a WordPress theme using the add_theme_support function
Then we write the following code in the template-about.php file to display the contents of the required page:
Finally, we add some formatting to the elements of this page in the style.css file as follows:
All you have to do is create a page called About Us on your site, or edit the previous page, if one exists, specify a distinctive image for it, and choose its template from the sidebar to be the templateAboutPage file you just created, as shown in the following image:
Now, if you view this page in your browser, you will notice that it looks different from the rest of the other pages on the site, as follows:
Conclusion
In today’s article, we learned about the page.php file through which all the internal pages of your WordPress site are displayed. We also learned about how to customize the template for a specific page differently from the rest of the other pages on the site by creating a template file for this page and specifying it manually in order to A specific page on our website.
