Explaining the design and customization of WordPress templates from start to finish

emplates in WordPress are a great feature to make your website appear in the best possible way. The first step we take when starting to launch a WordPress website online is to install an elegant WordPress template and customize it so that it suits our requirements and displays the content of our website in an elegant and attractive way.

You may choose a free or paid template for your website. There are thousands of options and ready-made templates available on the Internet that you can choose from. There are many platforms to obtain the desired template from. Even if the website owner is not an expert in design, WordPress templates allow him to quickly prepare the website template and customize it the way he wants, which makes this the preferred option for the vast majority of WordPress users.

Templates in WordPress are a collection of files written in custom web design languages ​​(PHP, HTML, CSS, and JavaScript) and are characterized by being dynamic and editable content, unlike static HTML and CSS sites.  

In today’s article, we provide you with an advanced explanation that teaches you how to do this step by step. We will guide you on how to create your own template, and provide you with an additional alternative option that you can use when choosing a design for your site.  

In today’s article we’ll help you explore the basic structure of WordPress theme files and learn how to create and modify them to end up with a complete, dynamic theme for your site. To simplify the explanation for beginners, we divided this article into three parts, and we were keen to explain the practical steps in detail so that they are clear and understandable.

This three-part article will serve as a comprehensive guide that explains in detail the process of designing an integrated WordPress template, starting from the first moment of installing the design, colors, backgrounds, and user interface, and ending with completing the steps for compatibility of the template with all WordPress tools and options.

When do you need to design a WordPress template from scratch?

Most users prefer the easy option, which is to download one of the ready-made WordPress templates from the Internet and install it on their WordPress site.

As for designing and creating a WordPress template from start to finish, it is a unique option that is worth learning and mastering, even if it costs you some additional time and effort. Learning to design WordPress templates will provide you with the following features and benefits: 

gain money

Designing WordPress templates is considered a very profitable task, especially with the spread of WordPress and gaining the trust of millions of website owners around the world. Therefore, learning how to design WordPress templates from scratch will enable you to sell these templates to WordPress website owners for rewarding sums of money.

Convert a static design into a WordPress template

If you have asked a professional or a specialized company to create a design for your website in one of the different website design languages, or even done it yourself, after learning to design WordPress templates, you will be able to convert this design that was implemented through programming codes into a WordPress template.

This is in order to take advantage of all the options and tools that WordPress provides you , such as the site control panel, the ability to install plugins on your site to perform many additional tashttps://www.wordpress-1409476-5242918.cloudwaysapps.com/how-wordpress-works/ks without writing code, and other benefits that you get when converting a regular design into a WordPress template.

Understand the basic configuration of a WordPress theme

If you work as a website developer using WordPress, learning to create templates will help you carry out any modifications that the client requests from you faster, because you will have become well acquainted with the basic configuration of the template, seen the structure of the files it contains, and learned how to modify each file from those files.

Complete control over your website template

When you create a WordPress template yourself from scratch, you will have full control over the design source code, and you will be able to add, delete, or modify code as you wish to reach the desired template that you want for your site. When you have a complete background on the function of all the codes written in the template, it will be easy for you to control and modify them with ease and flexibility.

Therefore, in this article, we will discuss all the files contained in the WordPress template and explain how to modify each file in a practical way.

Start designing a WordPress template

Despite all the benefits that you will get from learning how to design a WordPress template from scratch, it may not be suitable for all ordinary users. There are several basic skills and requirements that you must possess in order to be able to create a WordPress template in a correct, integrated and reliable way. Locations. 

In the following table, we summarize for you the most important requirements necessary for you to be able to design a WordPress template yourself, and we explain to you the degree of importance of each requirement: 

As you can see in the previous table, there are several basic skills necessary to be able to start learning to design a WordPress template from scratch.

You do not have to be a professional in all of these skills, but at least you must have good knowledge of them so that you are able to complete the process of creating and designing an integrated WordPress template from the first step until the last step, without running into any problems or obstacles during this process.

What makes a WordPress theme fully integrated and ready to go? 

Before starting the process of designing a WordPress template, you must take into account some important things in order to create a distinctive, professional, and completely reliable WordPress template. 

A successful WordPress template must contain the most important parts and elements that provide a successful user experience that helps the visitor greatly benefit from the process of browsing the site and its main and sub-pages and sections in an easy and uncomplicated way. 

Here are some points to consider when designing a WordPress template: 

• Try to make your design unique and do not copy other similar designs
• Make the design well segmented and comfortable for the visitor
• Choose design colors carefully and avoid intense colors that might distract the reader
• Choose clear fonts, free of ornamentation, and easy to read by visitors
• Do not use royalty-free images or media within your template
• After you finish creating the template, test it on the trial version of the hosting , or on the local server to make sure it works the way you want.

What files do you need to create to create a WordPress theme?

First, you must understand well the internal configuration of the WordPress template, and the basic files that you must create to establish the WordPress template. 

A WordPress template essentially consists of a variety of separate files known as template files (they may be PHP files, stylesheet files, or javascript files), and these files are grouped together in a template-specific folder bearing the same name as the template. This folder is stored under the following path. 

wp-content>Themes> Theme_name1

In this part of the article, we will explain to you the names of the most important basic files that make up a WordPress template, and we will adjust their settings in the second part of the article when implementing the practical application and actually designing these files: 

1. index.php: This file is the most important file in the template and represents the home page of the WordPress theme, and is often used to design the front-end of the site.
2. Header.php: This file contains the codes for designing the site’s header or the upper part of it, which contains elements such as the logo, main navigation menus, etc. It also contains other data such as your site’s document type, descriptive information, and links to CSS formatting files.. and often This file ends with the </head> tag. 
3. Sidebar.php: It is one of the important files for configuring a WordPress template. It contains the codes for the site’s sidebar, which can be used to add some WordPress elements such as “widgets” and other elements. It helps you customize the website’s sidebar from within the WordPress control panel after installing the template.
4. Footer.php: This file is one of the famous files in WordPress templates and is responsible for designing the site’s footer (Footer) in a beautiful and coordinated way.
5. Single.php: is a software file used to format individual posts on a WordPress website. 
6. Page.php: It is a software file used to format static pages on a WordPress website. 
7. functions.php: It is one of the important programming files in the WordPress template, which in turn stores the most important programming functions related to the technical matters of the site. We will explain the importance of the file in the second part of the article. ( Learn more about the Functions.php file )
8. Comments.php file: It is the file responsible for coordinating the comments made within the site’s articles and topics and controlling their complete display. 
9. Style.css file: This file is one of the necessary files to create a WordPress template. It contains a header section required to specify basic information about the template. It also contains CSS codes for coordinating and arranging site elements and determining the colors, fonts, backgrounds used, and other various formats.

Note : There are some template files that can be used on all pages, such as header.php and footer.php, and there are some files that are only used in certain cases, such as single.php.

Also, some templates may contain more files than those we mentioned to you in The highest, and this depends on the amount of options and functions that the template performs. However, those files that we referred to are the basic files in creating the basic structure of the template.

Let us now begin with the practical implementation and come to the step of creating the basic files that we referred to in the previous paragraph and explained the importance of each one of them. 

First, go to your site’s file manager from within the Cpanel control panel , then go to the WP-content folder , which represents the WordPress installation path on the hosting > then go to the Themes folder, which contains all the templates on your WordPress site:

As you can see in the previous image, the Themes path contains subfolders for all the templates on your site (each of these folders represents an independent template, and contains within it all the files necessary to make this template). 

To create a subfolder for your new template that you will create within the WordPress site, you must click on the Create a new folder (+Folder) button indicated by the red arrow at the top left of the previous image. 

After clicking on the Add New Folder button, an input box will appear for you to specify the name of the new template folder that you want to create (name it, for example, “Test” or any other name you choose).

Immediately after creating the template folder, this folder will appear inside the Themes folder like this: 

After you have taken the first step, which is creating the folder for the WordPress template that you will create within your site, we now come to the next step, which is entering this folder, and starting to create the basic files for the WordPress template one by one (starting from the index.php file to the style.css file).

To create each of these files, go to the Test folder, then click on the New File button ( File + ) located at the top left and specify the name and extension of the required file (for example index.php ), then click on the Create new file button .

As shown in the following animation, which shows you in practice how to create the index.php file inside the new template folder Test

In the same way as the previous animation showed you, you will create the rest of the files with the names that we explained to you previously, and be sure to keep the file names as we indicated (as changing the name of one of those files may cause problems for you in the template, and your template may not work at all if you change it to other names) 

Now that you have created all the files in the same way, the Test path should contain the following nine files: 

Now, if you go to the WordPress control panel installed on your site, and then go to Appearance > Templates , you will notice that no new template appears on the site. correct ?!  

Show the name of your new theme in WordPress

In order to display your new template on the website templates page, you must modify the style.css format file that you created within the path of the Test folder for the new template. You must add a very simple code in the header of this file so that the name of the template will appear within the WordPress control panel. 

Go to the style.css file   located inside the Test folder , then right-click on it. A list of options will appear, from which you can choose the Edit command :

The style.css file editing page will open in front of you. All you have to do is paste the following code into the file editing page: 

After pasting the code, click the Save changes button to save the changes as shown in the following image:

Here is the benefit of this code:

As you can see, the code consists of some elements that we will explain to you in order: 

1. Theme name specifies the name of the template to be displayed within the WordPress control panel. In this case, we named the template “ New Template, ” and here you can replace the name with any other name however you like. 
2. Theme URI is where you place the link to the template, where any user who opens the source code of the template can find more information about the template through this link (this information is optional, and its purpose is to clarify some information about the template such as its name, its developer, etc. So you can leave it blank or put any link you want.) 
3. Description: Here you can write a short description about the template to appear on the template’s introduction page in WordPress. 
4. Author: Here you can write the name of the template developer, and here we wrote Admin and you can replace it with your name, for example, and this developer name will appear on the template’s introduction page in WordPress. 
5. Version Here you write the version number or the current version of the template, and write it in the format XX or XXX
6. Tags : You write some meta tags in the template for search purposes, and these tags also appear on the template information page in WordPress. 

Now, after this simple modification that you made within the style.css file , go to the WordPress Control Panel > Appearance > Templates, and you will now notice that the name of your template “New Template” appears inside the WordPress templates panel: 

You can click on the “Activate” button to activate the template on your WordPress site. But if you activate the new template and visit your site, you will notice that your site has become a white page that does not contain anything inside it! 

Now let’s try something very simple to make sure that the template is created and activated correctly: 

Go to the template folder you created named Test, then open the editing page for the index.php file: 

Then write the following sentence inside the index.php file editing page. For example, say “Welcome to our new website.” Then click on the Save File button: 

Now, after writing any sentence or text you want, visit your website, and you will find it as follows: 

We can say that you have now created a very simple WordPress template that displays the sentence “Welcome to our new website.” We certainly cannot consider this to be a WordPress template, but we have made sure that the template has been created and activated successfully.

In the following paragraphs, you will learn to start writing the code to design all the elements of your template, starting with the site header, navigation menus, sidebar, footer, and other important elements necessary to create a professional template capable of working properly on WordPress. 

Convert the design into a WordPress template

In the previous paragraphs, we prepared the template infrastructure, and created all the basic files necessary to create the new WordPress template. 

But of course, the template until this moment is considered completely empty and does not have any design or any appearance that can be adopted as a WordPress template. Therefore, in the following paragraphs, you will work on designing and customizing the appearance of the template completely so that it can be used on a WordPress site without problems. 

The first executive step you must take in order to start creating a WordPress template from scratch is to do a simple, fixed design for the template’s appearance using at least HTML + CSS, and then convert this regular design into a WordPress template from start to finish. 

The benefit of this design is that it forms the cornerstone of WordPress theme design. In other words, you will copy its codes and paste them into the new WordPress template files that you created previously, so that you have a WordPress template with the same fixed design and shape that you created using CSS+HTML.

Don’t have a design ready yet? 

Don’t worry, my friend, we have created a simple design for you using only HTML + CSS, and in the next part of the article we will rely on this design by converting it from a regular design into a WordPress template that has all the features and options provided by other WordPress templates. All you have to do is copy the codes for this design and apply them to your template, as we will explain to you shortly. 

As you can see in the previous image, here you have a simple design that was created in HTML + CSS, but it has not yet become a responsive WordPress template. Currently, it consists of some text and links arranged as shown in front of you. You can download the code file for this design from here .

Note: This is a sample of a simple design for the purpose of experimentation. Otherwise, we advise you to take care of creating a professional design that improves the user experience and suits the primary goal of your site.

After you download the ready-made design file, unzip the file anywhere on your computer, and you will find that the files in it are as follows: 

The image above shows us the files contained in the ready-made design file, including the index file. If you click on this file, a web page will open for you in your browser as follows: 

Your task in the following paragraphs is to create a WordPress template with the same design that you see in front of you in the previous image. In order to do this, you must copy the codes from the compressed Testdesign  file that you downloaded and unzip it on your local device, then paste those codes into the new template files that you created inside the Test folder within the site’s file manager in the first part of the article. 

To make it easier for you, let us tell you that the WordPress template that we will design will consist of 4 main parts as shown in the following image: 

1. Header is the header or part that represents the upper area of ​​the template. 
2. Content is the part in which the entire content of the site is displayed, whether articles or static content. 
3. Sidebar is the sidebar of the template that appears to the left or right of the template.
4. Footer is the footer or part that appears at the bottom of the template and often contains a copyright statement and some contact information. 

Now open the codes folder for the ready-made design, then open the Index file in any code editor such as Notepad++ or any other code editor. You will find that the file contains the following codes: 

As you can see, the previous code contains all the codes for designing elements (header, content, sidebar, footer) corresponding to the parts shown in the basic design image. 

In the following paragraphs, we will copy the codes for each element separately, and paste them into the corresponding template files that we created in the first part of the article. 

First: Copy the codes of the Header part

Open the index file located within the code files that you downloaded using any code editor, then copy the codes for the upper part of the header template, which are the codes that are present from the beginning of the file up to the code <div id=”content”<, and thus copy the following code: 

After copying the code, now go to the site’s file manager, then go to the path of the new Test subtemplate folder that you created previously. 

Open the Test folder , then go to the header file that you created within it. Click on this file with the right mouse button to display a list of options. Choose the Edit command : 

The page for editing the template’s Header file will open. Paste the previous code that you copied from the Index file . Save the changes in the header file . Thus, you have finished copying the necessary codes to display the upper part of the new template. 

 Continue copying the rest of the codes as shown in the following steps to complete the look and feel of all parts of the template.

Second: Copy the codes of the Footer part

In the same way that you copied the codes for the Header part, you will now copy the codes for the Footer part of the template from within the index file as well. 

You will again open the index file located within the template files that you downloaded to your computer with a code editing program, then you will copy the following code for the Footer section from it, taking care to add an additional line at the end of the code:

As you can see in the previous code that I copied, the following line of code has been added at the end of the code

Although this code is not in the index file, it is necessary to add it, as it automatically fetches the Sidebar codes and displays them inside the footer file (and you will learn the importance of this step in the next few paragraphs). 

Now after copying the code, go again to the Test template folder within the site’s file manager, then go to the Footer.php file and in the same way open its editing page:

Then paste the previous code into the footer file and save the changes you made in the file.

Thus, you have finished adding the necessary code to the footer part of the new template.
Follow how to add the rest of the template’s codes to complete its entire look and feel.

Third: Copy the Sidebar codes 

Again, open the index file with a code editing program, then copy the following code for the Sidebar part of the template: 

After copying the code from the file, go to the Test folder that contains the template files inside the site’s file manager, and open the editing page for the Sidebar.php file in the same way as usual: 

Then paste the code you copied previously into this file, and save the changes you made in the file. The code to display the template’s sidebar is now ready.

Fourth: Copy the codes of the Style.css file 

Remember when you created an empty Style.css file inside the template folder in your site’s file manager? 

Now is the time to place the codes inside this file, as the Style.css codes are responsible for coordinating the appearance of the entire site, such as adjusting the width and height sizes, specifying the colors, backgrounds, and many other formats that determine the general appearance and final appearance of the site. 

Open the style.css file   located within the Testdesign design files that you downloaded on your personal computer with any code editor you have:

After opening the file, copy all the codes in it and then paste them into the style.css file located in the Test template folder within the site’s file manager:

After pasting the entire code you copied into the file, do not forget to save the changes to the file by clicking the Save changes button. 

Fifth: Link the header file to the Style.css file 

Now we come to this very important step, which the template will not work properly unless you do it. This step is linking the header.php file to the style.css file (these two files are located inside the Template Test folder in the site’s file manager). 

To link them, go to the Test template folder in the file manager, then open the page for editing the header.php file in the usual way. After that, the page for editing the header.php file will open for you, and at the beginning you will find the following code: 

Replace the previous code with the following code: 

Now the start of the header.php file will look like this: 

In order to explain to you what was done in this step, we have only added the bloginfo function here. This function is considered one of the programming functions in the PHP language whose primary function is to enable you to access a lot of useful information about your site. The information that this function returns varies depending on The parameter or mediator passed to it.

In the previous code, it was used to get the value of the parameter (stylesheet_url), which represents the address of the style.css file for the current template. Thus, you have linked the header file in the template to the formats file. 

Sixth: Preview the template’s appearance directly 

In the previous five steps, you’ve gone a long way in adding most of the code your new template needs to be ready to display properly. Now it’s your turn to preview the look or feel of the template based on what you’ve done. 

But before you can preview the appearance of the template, there is only one step left for you to do, which is to call the header.php file and the footer.php file inside the index.php file in the Test template folder located inside the file manager. 

To complete this step, open the index.php file editing page as usual, then paste the following code into the index.php page and save the file: 

Therefore, the index.php file will look like this: 

As you can see in the previous code, a PHP function called get_header was used, and the function of this function is to display the header part within the main page of the index.php template. 

We also used a php function called get_footer, and the function of this function is to display the footer part within the main page of the index.php template. 

Now the moment you have been waiting for has come! It is to preview the look and feel of your template. All you have to do is go to the site and find it appears as follows: 

As you can see, the template is now almost complete, and it has been implemented with the same design and format as the basic fixed design (HTML, CSS) that you relied on in designing your WordPress template. 

But only one part remains in the template that you did not copy from the basic design, which is the Content part, which we will copy in the next step and add to its file. 

Seventh: Copy the main content code of the Content template 

We have the last part of the code files for the basic design left on your personal computer that we have not copied yet. To accomplish this step, copy the last part of the index file after opening it with any code editor program: 

Now, go to the file manager of the WordPress site, and go to the folder for the Test template , then open the page for editing the file index.php , and paste the previous code inside it between the code:

Wallcode: 

The final form of the index.php page will look like this: 

Now save the changes to the index file . php, then go to view the final appearance of the template, and you will find it in the following final form: 

Congratulations, the theme is now completely complete and you now have a WordPress theme, having completely converted the static HTML and CSS design into a template that you can install and run on WordPress without any problems. 

Convert the template into a dynamic responsive template with WordPress tools

In the previous part of the article, I learned how to create an integrated WordPress template that contains: (header, sidebar, content, and footer) and I learned how to install and activate it successfully on a WordPress website. 

In this part, you will learn how to modify the template code in order to customize it to become a fully integrated template with all WordPress options and tools, so that your template is customizable from within the WordPress control panel.

1. Set the template title to be the same as the WordPress website title

When you enter the WordPress control panel, then go to the “ Settings ” tab, you will find a box for setting “ Site Name ” and another box for setting “ Description Line .”

Your task now is to modify the template’s code so that it displays the site name and description line exactly as they were set within the WordPress settings, instead of displaying them as static text as is currently the case in the template you created. 

To make this change, go to the Test template folder within the hosting file manager, then open the header.php file page on the editing page. At the beginning of it, you will find the code responsible for setting the “ site name ” within the title tag , as you can see in the following image:

Now, instead of the following fixed text “New WordPress template” appearing in the site title, you must reset this code so that it automatically displays the site name exactly as it is written within the WordPress settings page. To do this, replace the static text in the previous image with this code:

The code inside the header.php file will look like this:

The previous code, written in PHP, contains the bloginfo function that we previously used in a previous stage of the article. As we mentioned previously, this function is responsible for helping you obtain important information about your site according to the parameter passed to it. Here we passed the name parameter to the function to automatically display the name of the site to us as it was previously written on the settings page. In this code, we also called the wp_title function, which is responsible for displaying the title of the current page that is displayed on the site. 

Thus, with this procedure, the page title as well as the site title will be automatically set and displayed in the template exactly as it was set within the settings page, and when you change the site name from within the settings page, you will notice that it has also changed when you open the site or view one of its pages:

In the same way, we will set the description line and site title automatically instead of displaying static texts written in the template. 
When you open the header.php file again, you’ll find this code that sets the site’s title and tagline as follows:

Codes No. 1 and No. 2 show the word “ New Template ” in the site title, as well as the phrase “ Demo WordPress Template ” in the description line next to the title, in the following order: 

Now modify these codes and replace the static texts in them with PHP programming functions that automatically fetch the title and description line from within the WordPress settings page without your intervention. 

We will replace code number 1 with the following code: 

We will also replace code number 2 with the following code: 

You may have noticed that the codes that will be added also contain the bloginfo function , which here brings us the site address (url) and site description ( description ) from within the WordPress settings page. 

Now the code inside the header.php file will look like this: 

Don’t forget to click save changes after replacing the codes to save the changes you made to the file.

Now, if you open the site again, you will find that the site title and description line have changed and are exactly as they are on the WordPress settings page: 

2. Set the home page content to automatically display the latest articles

The template’s home page also displays static text content that begins with the sentence “Hello world” and then some static text as shown in the following image. 

In this step, we will change some of the codes in the index.php file responsible for displaying the template’s home page, so that the site’s home page displays the latest articles published directly from within the WordPress control panel instead of displaying these static texts. 

Go to the Test template files folder within the file manager, then open the index.php file   in edit mode to find the following code that you added in a previous stage:

As you can notice, we had previously added some fixed texts in this code, such as the text “Hello world” and the rest of the other texts that appear as they are on the main page of the template. 

But you must learn how to replace these codes in the index.php file that display static texts with other codes that display dynamic content within the main page of the template, that is, they fetch the articles that were published in WordPress, and display them within the main page instead of these static texts.

As we mentioned earlier in this article, WordPress relies primarily on PHP language codes to perform many of the operations that you perform within the WordPress site, so what we will do in the next step is that we will use some of the ready-made functions that WordPress relies on to display the site’s articles. Where we will display “ article title ,” “ article content ,” “ article classification ,” and a lot of other data for previously published articles from within the WordPress control panel. 

The following functions that we will include in the code to display the site’s articles on the template’s main page: 

• The_title function is the function responsible for displaying the title of each article published on the site. 
• The_date function is the function responsible for displaying the date of publication of each article on the site.
•  The_author function is the function responsible for displaying the name of the article’s author.
• The_category function is the function responsible for displaying the name of the category in which the article was published.
• The edit_post_link function is the function responsible for displaying the quick edit button located at the bottom of each article. The edit button appears only to members or site administrators and does not appear to regular visitors.
• The comments_popup_link function is the function responsible for displaying a special button for adding a comment below each article on the site.

After you have learned the names of the functions that will be relied upon to transform the template into a dynamic template that displays articles published within the site instead of displaying static texts, now insert those functions with their full formula into the code previously written in the index.php file, so that it becomes the final form of the special code. on the index page as follows: 

After you change the code in the index file with the code shown above, log into the WordPress control panel and start publishing one or more articles:

As the previous image shows, there is already a published article within the WordPress dashboard. Now we will go to the theme’s home page and check that it will display articles instead of displaying static content:

The image shows how the template was able to successfully display articles that were published from within the WordPress control panel on the home page. After we made changes to the code in the index file and added some WordPress PHP functions to it, the home page became able to fetch data for previously published articles. In the control panel dynamically and displayed within the home page of the template. 

3. Configure Sidebar’s code to be integrated with WordPress tools 

The final step in the process of converting parts of the template into dynamic, variable content according to the changes that take place within the WordPress control panel is to create the sidebar.php file , which we will access to change the static code inside it to another code modified in the PHP language, which will make the Sidebar part of the site fully responsive to tools. WordPress can add variable content to it through the Widgets tab, for example. 

To modify the code for the Sidebar part , we will go to the site’s file manager > then go to the folder for the template files, right-click on the Sidebar.php file, then choose Edit :

After opening the file editing page, we will replace the current code inside it with the following code, which will transform the Sidebar part into a dynamic part integrated with WordPress tools:

After modification, the file will be as follows:

The Sidebar is well configured and integrated with WordPress options and tools. 

In the following paragraphs of the article, we will explain how to add WordPress elements, such as widgets, within the Sidebar section of the template.

Make additional software modifications to the template

Now that the template is able to display the site’s content automatically, and has become responsive to WordPress functions with different functions, in the following paragraphs we will discuss some software modifications through which you can add many elements and tools to WordPress, such as adding the main menus to the template automatically. Depending on which items are added to the list from within the WordPress dashboard itself. We will also discuss adding widgets and making the template fully compatible with them. 

1. Add Navbar menus to the template

The first programming modification that we will make is to display one of the menus that we added previously from within the WordPress control panel and then go to: Appearance > Menus . 

What we will do is delete the code responsible for showing the fixed-text menu that appears at the top of the template’s home page. The code for this menu is in the file header.php

As the image above shows you, the list is already present in the template, but we want to replace it with a list that we previously created from within the WordPress control panel. To do this procedure, we will first enter the WordPress control panel and we will create a list called “mainnav” that contains some items, on For example we will create a list containing the following items:

• Main
• Products
• technical support
• Blog

Now we want to display that list in our template, and to do this we will open the file header.php and then we will look for the following code: 

Then we will replace it with the following code: 

The new code is an implementation of the wp_nav_menu function,   which is one of the PHP-based WordPress functions. This function automatically displays the main menus in the template according to the elements that are added to it from within the WordPress control panel.

Note that we passed several arguments or parameters to the function, the most important of which are: 

• menu represents the name of the menu to be displayed mainnav
• menu_class represents the CSS Class used to format the menu
• menu_id Represents the identifiable name of the menu
• theme_location represents the location designated for displaying the menu within the template, and here we passed the value primary_menu to it, which means displaying the menu in the location designated for the main menu in the template.

Now we will visit the site’s home page to see that the wp_nav_menu menu has actually appeared at the top of the template, instead of the previous main menu that contained some manually written items: 

2. Show widgets inside the template

One of the important tools that WordPress provides us is widgets , through which we can display many different elements in the sidebar of the site (a widget area can be added in another area, but we will currently limit it to displaying it in the sidebar). 

In the following paragraphs, we will add some easy code that will make the template fully compatible with WordPress widgets.

Of course, the function of the code will be to show the widgets inside the template, but the widgets themselves will be created by you from within the WordPress control panel in the usual way by entering the control panel and then going to: Appearance > Widgets . 

If you access the control panel of the WordPress site where you are using the current theme, you will notice that the widgets section is not present in the control panel:

So the first step is that we will make some programming modifications to the template in order to make the widgets tab appear within the WordPress control panel. 

To do this code modification, we will open the file Functions.php , then we will replace all the codes in the file and paste the following code in PHP instead:

This code will add a dedicated area for widgets called “ sidebar ” to your WordPress site. To see this area, go to WordPress Dashboard > Appearance > You will notice the Widgets tab appears: 

As you can see in the previous image, the widgets tab is now available in the WordPress widgets sidebar, but when you enter it, you will find the widgets area that you added is completely empty and does not contain any widgets. You can select this area and add the widget you want to it. 

For example, drag the “Text” widget and add it from within the control panel:

As you can see in the previous image, we created a “Text” widget and wrote a title and content in the widget, and then we “saved” the widget. 

Now we will visit the template’s home page to ensure that this widget appears in the site’s sidebar instead of the static text that appeared previously:

The previous image shows the sidebar of the site, and inside it appears the “Text” widget that was added through the WordPress control panel in the previous step. 

Thus, the template is ready to display widgets, as you can access the Widgets tab at any time and add any type of widgets that WordPress provides you, such as (image widgets, lists, categories, pages, comments) and other types of widgets that you can choose from and add. As easily as you wish, these widgets will appear immediately in the side part of the site automatically. 

Reaching this stage means that you have finished the task of creating an integrated WordPress template with all the tools and elements that WordPress provides to all its users. 

In this article, we relied on a ready-made design prepared using HTML and CSS. It is a simple design that we have provided for you to help you apply the practical steps, but you can rely on any other design instead, whether a design that you create yourself, or a ready-made design published online and start converting it into a WordPress template in the same way that we explained in this article. 

Note : We always advise you to take a backup copy of your WordPress site before changing anything related to the template used on the site, or you can work on the template on your local device (offline) and after completing the entire design, you can upload it and test it on your site published online. 

Try to apply all the steps you learned in this article, and do not hesitate to post your question or inquiry regarding anything you encounter during the process of creating your WordPress theme.

How do you benefit from developing WordPress templates?

Have you developed a distinctive WordPress template yourself, and would like to sell it and ensure that it reaches the largest number of Arab buyers and customers? 
provides you with a unique opportunity for this, as it is the largest Arab store that sells various ready-made digital products developed by creative Arab hands – including WordPress templates and WooCommerce templates – and the popularity of the site will help you market your template and complete your first deal quickly.

In order to ensure the continuity of selling your template over and over again and making money in a sustainable manner, make sure to provide your best in designing the template, make it easy to use, and fully compatible with the  , document it in a clear and professional way, provide your customers with the necessary support after the sale, and help them as much as possible to prepare Make the template optimal, and of course do not neglect to add continuous updates and developments to your template.

The good news is that Picalica gives incentives to new sellers and offers rewards of varying values ​​for new products – depending on the nature of the product – provided that the product is kept in Picalica and is not deleted or violates the terms of use.

All you have to do is add your new product to the Picalica website, and after it is accepted and published, you can contact the site administration to have your Picalica account charged with the reward value. Don’t miss this opportunity and start selling your creative digital products now!

Conclusion

By the time you reach the end of this comprehensive guide, you will have learned how to build a WordPress theme from scratch using code. In order to apply this method optimally, we advise you to re-read it again and try to understand the first parts of it, which paves the way for you to start creating an integrated WordPress template.

Then move to the second part of the article to learn the basic practical steps through which you will apply the process of creating a reliable WordPress template, installing and activating it on your site, and enjoy many of the options and tools that WordPress provides for templates that are compatible with it.

Before moving on to the second part of the article, we will assume that you have downloaded the code files that came with the article, which contain the demo design that we created for you in order to turn it into a WordPress theme instead of just a static design