After you learned in the previous lessons in the series on learning to develop a WordPress template , all the technical basics necessary for WordPress to deal with templates, it is time in this lesson to start practically building your own WordPress template from scratch.
Before starting, I remind you of the need to install a new version of WordPress on the local server or the actual hosting server, create a test site, and start adding some diverse content to this site, such as articles and static pages, in order to better see the impact of the template you are developing on the site.
You can add this content yourself manually, or rely on auxiliary plugins that make it easier for you and generate fake test content, such as the FakerPress plugin , or rely on samples of ready-made content, as WordPress developers usually provide content packages for template developers that you can download and import to your test site to verify. Make sure your template contains all the required content styles.
The template that we will develop together within this series will be in Arabic only, i.e. fixed strings will be written within the code in Arabic, and the display directions of elements and paragraphs in it are from right to left by default, but we will make this template capable of being in another language by including text strings and encapsulating them within escape functions. Designed for translation, such as:
and the following article a WordPress template for developers for more detailed information about making a WordPress template Arabizable or able to be in several languages.
Now that you have prepared your WordPress website, you can return here. Let us begin together, step by step, in building a simple and elegant WordPress theme. I will dedicate it to a WordPress blog that talks about ornamental plants and their types, and you can of course adopt any other content you are interested in.
Step1. Draw a preliminary outline that defines the design of your site
After you determine the idea of the site and its functions, it is necessary to plan how the content that you will add to this site will appear or be displayed, and develop a preliminary vision of the ideas and functions that you would like to apply in the template.
The method of drawing website wireframes, or what are known as page diagrams ( wireframes ), is an easy and quick way to develop an initial vision of the site’s appearance (whether on desktop devices, tablets, or mobile phones), and share it with the work team or present it to the client before its actual development.
A wireframe is a two-dimensional diagram that shows the general design of the pages of a website or web application . It is similar to architectural plans that are drawn before implementing any construction. It defines the features of the website and gives an overview of the structure of each of its pages, and shows the layout of the website. The elements are distributed, and the information and functions they contain. This diagram can be drawn crudely with minimal detail or include greater detail depending on requirements.
These diagrams are drawn either manually on paper or using specialized programs such as Sketch, Proto io, Figma, Photoshop, Canva, or other programs specialized in drawing. Some of these programs also have the ability to convert the initial design into a static HTML template, which facilitates the process of programming the template. Your WordPress environment based on static design.
It is worth noting that this task may not be your job as a WordPress template developer if you work within a team, as specialized companies assign a UI/Ux Designer, and ask the website designer to code the design and convert it to a fixed design that includes all the structural elements and formats with interface technologies. Front-end design (HTML, CSS, JS), and your task as a WordPress developer is to program the ready-made design and convert it into an interactive WordPress template using PHP technology.
In this case, there is no need to do this step, and you can directly create files that reflect this design and write the necessary programming code. But here we assume that you are working independently on building a template from scratch.
Read more: Explaining designing and customizing WordPress templates from start to finish
In our case, we will build the entire website without relying on any prior static design to work on. We want our website’s home page to look like this:
Step2. Create the necessary folders and files for the template to work.
As we explained in previous lessons, template files must be saved in the themes directory located within the wp-content directory in the root folder of the site.
In the themes directory you should have a subdirectory (or separate folder) for each theme installed on your site. The folder of any template must include at least two files in order for it to work correctly: the index.php file and the style.css file .
So, in the current lesson, I will create a new folder within the directory for template files and I will call it ola1 – and you can of course name it whatever you want to represent your template – and create these two basic files in it.
Of course, this does not apply to child themes, which are sub-templates of other basic templates. These templates can only contain a style.css file, and all their contents must also be in a separate subfolder within the themes directory. The parent template is also located in a subfolder next to the child template folder.
Most WordPress themes also contain a functions.php file , which is known as the theme’s functions file. This file usually contains the functions or programming functions that we need to use throughout the theme. All functions in this file are run every time the site is loaded and as long as the template is activated on the current site.
You can create this file directly in the template folder or postpone creating it when you need to put your code in it. We will create this file directly in our template because in today’s lesson we will need to add some template customization code to it.
Then your template can also optionally include several other PHP files (template template files) that are called in a hierarchy depending on the page being viewed from the site, and other media files, layout files, and additional JavaScript scripts that are added to the template as needed, which are formed with Some of them are an integrated WordPress template, as we will see successively in our upcoming lessons within this educational series.
For our current template, I will also need an image file named screenshot.png to represent the image for the template when viewing templates in the control panel through the Appearance > Templates tab. I will need another image named default.png that I will use within the code to be a featured image for articles that do not have a featured image, and for organization. I will put all the images in a subfolder called images .
So my template folder will look like this:
Step3. Customize the template’s style.css file
The first file I will start working on is style.css , which is the file responsible for identifying your template with the WordPress system. This file usually includes all the information that identifies the template, such as the name of the template, the name of the developer, the version number, and other general information that is written within a comment block in The beginning of this file is as follows:
We start the file by writing the following statement @charset “UTF-8” which tells the browser to read the css file as UTF-8. This is useful if your format file contains UNICODE characters, not just ASCII characters.
Then we wrote general descriptive information about the template in the form of a comment between the symbols /* */ and included the name of the theme, the URI for this theme, the description, the author’s name, the author’s URI, and the version.
It should be noted here that we may need to pass more descriptive information about the template if we intend to upload it to the official WordPress template store , or some specialized stores that require a set of standards in the templates they sell, such as the Picalica store for digital products.
In such cases, the store may require you to publish the template under the GNU General Public License, and indicate the most prominent features of the template through template tags, such as whether this template includes a custom header, sidebar, distinctive image, custom menu, etc., in order to make it easier for users. Browse templates according to their features.
You must also add a Text Domain if you want to make a WordPress template to locate the translation files for the template. In this case the header of the format file may look longer, like this:
Of course, the template formats file will include – in addition to the descriptive information – a set of basic rules required to format the elements of your theme, through which you can customize and format the theme according to your design requirements, and these formats are added successively to the file as needed.
Currently, since we have decided that our template will be in Arabic, we will add fonts to it that support the Arabic language (I will add the Noto Sans font ), as it is one of the elegant Arabic fonts provided by Google Fonts for the web. We will alternatively use the Tahoma font when this font is not available, and we will also make the orientation of the elements From right to left, we specify the inner margins (Padding), the outer margins (Margin), and the general line-height as follows:
Step4. Create the main template file index.php
Writing HTML coding for a WordPress theme is exactly the same as writing coding for a regular HTML/CSS website. So before we write the code for the index.php file, let’s take a look at the design of our website according to the wireframe to determine the appropriate tags and elements for the file.
As you can see, on the home page you will need to display three basic areas:
- The page header that displays the logo and navigation menu (we need to get it through the get_header function)
- Page content that displays a distinct area with a text phrase in addition to displaying the latest articles published on the site (we need to get it by displaying fixed text strings and then passing through a loop to inquire about WordPress articles and displaying a list of navigation through articles)
- And the footer that displays the footer list and the copyright phrase (we need to get it through the get_footer function)
To retrieve this information, we edit the index.php file and write the following code in it:
Currently, we will not care about the details of programming and customizing the header and footer for the template, although we will call the template names get_header() and get_footer() to determine where they will be displayed within the main page of the site. These two functions are integrated into WordPress and their task is to download the header and footer template files header.php and footer.php for the current template in case We didn’t pass them a custom header or footer name.
For example, the following code loads the file header-special.php. If it exists, otherwise it holds the file header.php
The good thing is that these two functions work even if we do not create the header and footer files. Here, in our template, we have not yet created custom template files for the header and footer, so how will WordPress behave in this case?
The answer is that the WordPress system will include a default header and footer for a backup template in case the currently activated template on the site fails to include them.
This template consists of a variety of files that represent backup theme parts for WordPress to use when needed. In other words, if a theme uses get_header() but fails to include the header.php template file for some reason, it will rely on the header.php file located in the wp-includes directory. /theme-compat/ under the root folder of your site.
Of course, we will be relying on displaying the output of these files only temporarily in this lesson, and we will work together to customize the header and footer of our template according to the design suggested in the next lesson in the series.
Then we start displaying the content of the home page under the tags <main> and <main/<, and within them we divide the page into 3 sections to contain the content:
The first upper section is a section (we give it the featured class to format it later) and in it we display a fixed text string known as our template.
The second section is a section (we give the articles class) and is responsible for displaying articles based on the WordPress Loop, which brings us article information from the site’s database, after making sure that there are published articles available.
First, we display the thumbnail of the article. Here, we first check in the code whether the article contains a distinct image associated with it. If so, we will display that image. Otherwise, we will display our default image that we added in the first step to the template folder. We then display the article title, its classification, excerpt text, and a link to read more
As you can see, we do not need any queries from the database because WordPress provides us with the ability to access all of this data related to articles easily through ready-made functions that bring us all of the article’s Post Meta Data, as we explained in the following article .
The third and final section that we need to display within the page content is the navigation links (next and previous), so we create a nav tag (and give it the pagination class) that displays the next and previous buttons for us to display the oldest and newest articles on the site through the two ready-made functions in WordPress previous_posts_link and next_posts_link .
As for controlling the number of articles displayed on the page, it can, as you know, be easily controlled through the site options (which we access through the Control Panel > Settings > Reading and set the number of items to be displayed to 3 articles) so that the site appears as desired.
Now that we have brought the necessary contents to the page, we must move to the next step. Return to the template formats file style.css and add the appropriate formats to each of the main page elements that we added to the page so that the template takes the appropriate form.
Step 5. Add more required formatting to template elements
It is preferable to start by formatting the general parts of the site, then work on formatting the elements and parts from top to bottom according to their appearance on the page. Examining the page in the software developers tool in the web browser can help you find the CSS selector that you want to modify precisely for any element.
First, I will format the titles and links that I will use on the site as follows:
Next, we will work on formatting the images, paragraphs, and text areas that we added to the main content of the page
The last addition that we will make in the previous code is to hide the three dots between the middle brackets […] which appear by default after every article excerpt of more than 55 words because the the_excerpt() function truncates the first 55 words of each article and then places these dots
So we need to change this default behavior and write a callback function that replaces these points with an empty string, and call it through the excerpt_more filter within the template functions file functions.php as follows:
Now when you view the page, the elements will appear formatted as follows:
Note that if one of the articles does not have a featured image, the default image attached to the template will be displayed instead according to what we specified in the loop query as follows:
Thus, we have finished the practical application for today’s lesson and formatted the main template file, index.php. If we view any other page of the site (such as a single post page, an archive page, or a tag page), this file will be applied to it.
For example, when we click on the title of the article or the Read More button, we will move to the page of this article and we will see that the article is displayed exactly like the first page of the site, where the title (Latest Articles) appears at the top, then (the featured image, then the classification, then the title, then the snippet) appears. Finally, the Read More button for this article.
In the next lesson, we will customize the header and footer of the site pages, and we will also create a custom template file to display the single article page – single.php.
Conclusion
In today’s article, we learned how to create a custom template folder and prepare style.css template format files, and the main template template file index.php, which is the most important file for any theme.
The importance of this file does not only come from the fact that the WordPress system resorts to using it if there is no other template file suitable for displaying the page, but also because the rest of the template file codes will only be minor modifications to the code used in the WordPress loop that we added to this file, where we will add parts and delete Others depending on what we want to display on the page. If you understand the code applied here, it will make it easier for you to create the rest of your template files.
