{"type":"PARAGRAPH"

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 ready-made content samples, as WordPress developers usually provide content packages to template developers that you can download and import to your test site to ensure that 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 designated for translation such as: __( 'String', 'text-domain' ); _e( 'String', 'text-domain' ); esc_html__( 'String', 'text-domain' ); esc_html_e( 'String', 'text-domain' ); I recommend reading the following article: Steps to Arabize a WordPress template (complete guide with practical application) and the following article Arabizing a WordPress template for developers for more detailed information about making a WordPress template Arabizable or capable of being 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.

Practical application steps 1 to build a WordPress template from scratch Step 1.

Draw a preliminary sketch that defines the design of your site Step2. Create the necessary folders and files for the template to work.

Step3.

Customize the template style.css file Step4. Create the main template file index.php Step 5. Add more required formatting to the template elements Conclusion Step 1.

Draw a preliminary plan that defines the design of your site. After you have determined 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 and distribution of the elements in it, and the information and functions it contains.

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 your template in the WordPress environment based on the static design.

Converting the wireframe into an actual website. 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 formatting using front-end technologies (HTML, CSS, JS). Your task as a WordPress developer is to program the ready-made design and turn it into an interactive WordPress template. With PHP technology. In this case, there is no need to take 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: An explanation of designing and customizing WordPress templates from start to finish. In our case, we will build the entire site without relying on any prior static design to work on. We want the home page of our website to be as follows: Drawing the wireframe for the website Step 2. 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, and the parent template is also located in a subfolder next to the child theme 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 many other PHP files (template template files) that are called in a hierarchical order depending on the page that is displayed from the site, and other media files, formatting files, and additional JavaScript scripts that are added to the template as needed, which together form 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 tab.< قوالب، وسأحتاج صورة أخرى باسم default.png سأستخدمها ضمن الكود لتكون صورة مميزة للمقالات التي لا تملك صورة مميزة، وللتنظيم سأضع كافة الصور في مجلد فرعي باسم images . وبالتالي سيبدو مجلد القالب الخاص بي بالشكل التالي: بنية الملفات والمجلدات لقالب ووردبريس الخطوة3.

Customizing the template formats file style.css The first file I will start working on is style.css, which is the file responsible for defining your template in 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 at the beginning of this file as follows: @charset “UTF-8”; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: A template developed for educational purposes within a free course to learn to develop templates provided by the WordPress website in Arabic Version: 1.0 */ We start the file by writing the following instruction @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.

@charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: The template was developed for educational purposes as part of the series on learning to develop templates presented on the WordPress website in Arabic Version: 1.0 */ 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 to browse the templates according to their features.

You must also add a Text Domain if you want to make a WordPress template translatable to locate the translation files for the template. In this case the longer format file header might look like this: @charset "UTF-8"; /* Theme Name: ola1 Theme URI: https://www.wpar.net/ Author: OLA SALEH Author URI: https://www.wpar.net/author/engolasaleh/ Description: The template was developed for educational purposes as part of the series on learning to develop templates presented on the WordPress website in Arabic Version: 1.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: ola1 Tags: one-column, custom-menu, featured-images */ 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 will be 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 Arabic 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. We will also make the orientation of the elements from right to left, and specify the inner margins (Padding), the outer margins (Margin), and the general line-height as follows: /* General styles */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;700&display=swap'); html, body, p { direction: rtl; font-family: 'Noto Sans Arabic', Tahoma, sans-serif; font-weight: 300; line-height: 1.75; margin: 0; padding: 0; } Step4.

Create the basic 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, which displays the logo and the navigation menu (we need to get it through the get_header function), the page content, which 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, then passing through a loop to inquire about WordPress articles and displaying the navigation menu through the articles), and the page footer, which displays the footer list and the copyright phrase (we need to get it through the get_footer function) to fetch this. Information: We edit the file index.php and write the following code in it: