{"type":"PARAGRAPH"

Templates 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 site owner is not an expert in design, WordPress templates allow him to quickly prepare the site 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: Earning 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.

Converting a fixed 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 tasks without writing code, and other benefits that you get when converting a regular design into a WordPress template. Understanding the basic configuration of a WordPress template 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 of those files.

Complete control over your site's 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.

Contents of the article: Getting started with designing a WordPress template. What makes a WordPress template integrated and ready to work? What files do you need to create to create a WordPress theme? Show the name of your new template in WordPress Convert the design to a WordPress template First: Copy the codes for the Header part Second: Copy the codes for the Footer part Third: Copy the codes for the Sidebar part 

Fourth: Copy the codes of the Style.css file. Fifth: Link the header file to the Style.css file. 

Sixth: Preview the template's appearance directly 

Seventh: Copy the main content code of the template Content  Convert the template into a dynamic template responsive to WordPress tools 1. Set the template title to be the same as the WordPress website title 2.

Set the home page content to automatically display the latest articles 3. Configure the Sidebar code to be integrated with WordPress tools. Make additional code modifications to the template 1.

Adding Navbar menus to the template 2. Showing widgets inside the template Starting to design a WordPress template Despite all the benefits that you will get from learning how to design a WordPress template from scratch, the matter may not be suitable for all ordinary users, as 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 on websites. 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 notice 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 divided and comfortable for the visitor Choose the colors of the design carefully and stay away from the intensity of colors that may distract the reader Choose clear fonts, far from decoration, and easy to read by visitors Do not use images or media with copyrights inside 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 that it works the way it should. You want it.

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 show you the names of the most important basic files that make up the WordPress template, and we will adjust their settings in the second part of the article when carrying out the practical application and actually designing these files: index.php: This file is the most important file in the template. It represents the home page of the WordPress template, and it is often used to design the front end of the site. 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 format files..

This file often ends with the tag . 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.

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. Single.php: is a software file used to format individual posts on a WordPress website. Page.php: It is a software file used to format static pages on a WordPress website.

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) 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. 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 above, and this depends on the size of the 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 present on your WordPress site: As you can see in the previous image, the Themes path contains subfolders for all the templates that are present 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 in this form: After you have taken the first step, which is to create the folder for the WordPress template that you will create within your site, we now come to the next step, which is to enter this folder, and begin creating the basic files for the WordPress template one by one (starting from the index.php and even the file Style.css) 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 practically how to create the index.php file inside the new template folder Test in the same way that the previous animation shows you, you will create the rest of the files with the names that we explained to you previously, and be careful to preserve 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 them 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 enter the control panel Install WordPress on your site, then log in to the theme < قوالب ، ستلاحظ عدم ظهور أي قالب جديد بالموقع. صحيح ؟! إظهار اسم القالب الجديد الخاص بك في الووردبريس لتقوم بإظهار قالبك الجديد في صفحة قوالب الموقع عليك القيام بتعديل ملف التنسيق style.css الذي قمت بإنشائه داخل مسار المجلد Test الخاص بالقالب الجديد، عليك القيام بإضافة كود بسيط للغاية في ترويسة هذا الملف ليتم إظهار اسم القالب داخل لوحة تحكم الووردبريس.

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: /* Theme Name: New template Theme URI: http://www.wpar.net Description: A new WordPress template created completely from scratch. Author: Admin Version: 1.0 Tags: new theme, create */ After pasting the code, click on the Save changes button to save the changes as shown in the following image: Here is the benefit of this code: As you can notice, the code consists of some elements that we will explain to you in order: Theme name, through which the name of the template to be shown within the WordPress control panel is determined. In this case, we named the template “New Template” and here you can replace the name with any other name however you wish. 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.) Description: Here you can write a short description about the template to appear on the template’s introduction page in WordPress. 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. Version Here you write the version number or the current version of the template, and write it in the format X.X or

Now, after this simple modification that you made within the style.css file, go to the WordPress control panel< المظهر div id=”content” وبالرغم من أن هذا الكود لا يوجد في ملف index لكن من الضروري إضافته فهو يعمل على جلب أكواد الجزء Sidebar بصورة تلقائية ويعرضها داخل ملف الـfooter (وستعرف أهمية هذه الخطوة في الفقرات القليلة المقبلة).

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 codes for the Sidebar part again. Open the index file with one of the code editing programs, then copy the following code for the Sidebar part of the template: About us In the name of God, Most Gracious, Most Merciful.

This is a form design that will be converted into a WordPress template. All texts and links in this template are for the purpose of experimentation only, and during the conversion phase from this normal design to the WordPress template, all fixed elements and links will be deleted as well, and they will be converted into automatic elements that will be automatically inserted when publishing articles on the WordPress site or when making any other modification, so that everything on the site works automatically without adding fixed elements..

Latest articles

Welcome. After copying the code from the file, go to the Test folder that includes the template files inside the site’s file manager, and open the editing page for the Sidebar.php file in the same usual way: 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. Do you remember when you created an empty Style.css file inside the template folder in the 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: Linking 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 to link the header.php file to the style.css file (these two files are located inside the Test template folder in the site’s file manager). To do the linking process between them, go to the Test template folder in the file manager, then open the header.php file editing page in the usual way. After that, the header.php file editing page will open for you and you will find At the beginning of it is the following code: Replace the previous code with the following code: 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 that 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 see in the previous image, we created a “Text” widget and wrote a title and content in the widget, and then we “save” the widget.

Now we will visit the main page of the template to ensure that this widget appears in the sidebar of the site instead of the static text that appeared previously: The previous image shows the sidebar of the site, and indeed the “Text” widget that was added through the WordPress control panel in the previous step appears inside it. 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 with ease as you wish, and 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 unique WordPress theme yourself, and would you like to...

In selling it and ensuring that it reaches the largest number of Arab buyers and customers? The Picalika store 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 Arabic language, document it in a clear and professional manner, provide your customers with the necessary support after the sale, and help them as much as possible to prepare the template in an optimal manner, 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 on Picalica and not deleted or violates the terms of use. All you have to do is add your new product to the Picalica website, and after accepting and publishing it, you can contact the site administration to have your account in Picalica charged with the value of the reward. Don't miss this opportunity and start selling your creative digital products now!

Picalica Store for Ready-Made Digital Products Conclusion By the time you reach the end of this comprehensive guide, you will have learned how to build a WordPress template 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. Read also: WordPress theme development series | A free course to learn to develop WordPress templates from scratch