People need to learn and know where to start, so here we will give you some tips…
Beginning to explain the mechanism of the work of the WordPress site!
WordPress works on the basic programming language, which is PHP, in addition to the following languages as well: Html- Css – Js- JQuery, and accordingly in order to be able to deal with the development of templates and plugins in WordPress, basic knowledge of the previous programming languages is required.
Nobody knows everything, but it is good to start learning about it little by little. It is complicated, yes, and it needs full focus, but we will try enough to simplify things so that you can finally be able to start your own project
Create the basic files involved in building a WordPress template
Each WordPress template, must contain many basic files in order to ensure that the template works within the WordPress site in an integrated manner, and these basic files are in the following list:
header.php where the main navigation menu is located, is the header of the page or the header of the site, where we can put the site’s logo, the main menu of the site and also we can put the name of the site … etc.
style.css where the main design of the website is located, and it is the file responsible for coordinating The site and we use only the css language, and it will help us to beautify our website by controlling the colors, length, width, font size, etc….
index.php is the center of the site when opened by the visitor’s browser.
page.php is the template that we will use to design and display our pages on the site.
function s.php : the site’s final command to give, fetch and execute the commands
single.php The template that we will use to design and display our articles on the site.
search.php Where are the search results located?
archive.php The main complement to the previous template, it is the site’s archive page
footer.php . It is always at the bottom of the page.
sidebar.php The sidebar that we can display in our articles or pages on the site
click on each file name and it will take you to the main explanation section of wordpress.org
theme.js : Inside it we will write the JavaScript and JQuery we need
1- The first step in designing WordPress themes – creating the files –
Before you start creating files, see how to install WordPress on a local server on your laptop or desktop. Also, after installing WordPress, you need to install the code editor program called Sublime text from its official website.
Go to the desktop, create a new folder, give it the name you want to give your site template later.
In this folder, add a new text file through the text editor in Windows, for example, leave the file empty and save it inside the folder with the name style.css, and then create another file give it the name functions.php and save it empty in the previous folder, repeat this process for each File name from the previous list.
2- The second step in designing WordPress themes – define the style.css file
Open the entire folder in the Sublime text code editor, then open the functions.php file and paste the following code:
<?php<font></font>
function wpmrj3_resources()
{
<font></font>
wp_enqueue_style('style', get_stylesheet_uri());<font></font>
}
add_action('wp_enqueue_scripts', 'wpmrj3_resources');
In the previous code, we told WordPress to read the style.css file, so that the modification that we will make later appears on the parts of the site
3- The third step in designing WordPress themes – putting the appropriate code in the header.php . file
In this file, we will not only use php, but also HTML. The first thing we will do is define the file as the file responsible for the header of the pages, and for this we will write the following code.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
- In the second line, we told the file to withdraw the site’s language, whether Arabic or other languages
- In the fourth line, it is the meta option that allows us to design the site compatible with mobile devices
- In the fifth line, it is what you see in writing in the browser window
- In the sixth line is to link the site with the so-called semantic FOAF entries to get metadata for the site, we will talk about this later.
- In the seventh line we will also ignore it because it has to do with linking your website, with another website. It is unimportant to us at this point.
- Line 8 Opening the PHP tag to read the HEADER file
- The last line is the closing head tag (note: before this tag, the meta-codes, the Google Analytics ID codes, and the Google Adsense ads code are placed)
Now after we have defined the header, we must define the parts of the page within the header and include the following code that is pasted directly under the previous code in the header file.
<body <?php body_class(); ?>>
<?php
wp_body_open();
?>
As we noted earlier, the header file consists of three html tags, the first is html and we did not close it in the same file, the head tag that we have already closed in the same file, and the body tag in the last code that we also did not close in the same file. You will know more by moving to the next step why we did not close these tags in the header file
The footer file is the one that shows us the footer, imagine with me if you have a sheet of paper, you want to draw three parts on it, 1 part at the top (header), a middle part is the content and a lower part is the footer (and this is exactly what we will talk about..
Usually when building a new house, we build the pillars between the bricks from the bottom up, the house cannot be completed without closing it with the roof from the top, but in the WordPress template, the opposite happens, the html tags that we talked about earlier must be closed and we did not close them at the bottom, i.e. in appendix
Accordingly, the following code is placed in the file footer.php
<?php wp_footer(); ?> </body> </html>
The first is to open a php tag to define this file as the footer, and then close the html tags directly below it.
Now that we have defined the header and footer files, we must move to the stage of showing the content of these two files in the template parts, such as the page form, article form, archive form and search form
All you have to do is paste the following code on each of the following pages in the theme folder:
index.php • page.php • single.php • search.php • archive.php •
<?php get_header(); ?> <?php get_footer();?>
- The first line is to show the header on the page
- The second line to show the footer on the page
Later, all the codes that we will write in these files will be between these two lines only
6- The sixth step in creating a WordPress theme – define the theme.js file
It is better to create a new folder within the theme folder, and give it the name asst, inside this new folder create a file and give it the name theme.
Now in the functions.php file we can write the following code, so that the javascript file is defined
function load_site_js( )
{
wp_enqueue_script('jquery');
wp_register_script('wpmrj3', get_template_directory_uri() . '/asst/wpmrj3.js', 'jquery',false, true);
wp_enqueue_script('wpmrj3');
wp_enqueue_script('jquery');
}
add_action ('wp_enqueue_scripts','load_site_js');
7- The seventh step in creating a WordPress template – showing the content in pages and articles
After we showed the header and footer in the previous section, it is good now to show the content that we write or create in pages and articles.
There is a feature in WordPress called Loop, so what is it?
A loop is a PHP code that WordPress uses to display posts, title, and content. With the loop, WordPress processes each post to be displayed on the current page within a dynamic mechanism, and formats it according to its conformity with the criteria defined within the loop tags. Any HTML or PHP code in the loop will be processed on every post or page content.
The code for this episode to show the content will be as follows:
<?php the_title();?>
<?php if(have_posts() ): while(have_posts() ): the_post(); ?>
<?php the_content();?>
<?php endwhile; else : endif;?>
In the first line is the command to show the title of the article or page | As you can see in the header of this article there is a title which is | Designing WordPress themes from scratch – Learn programming – Lesson 1 |
As for the second and third line / i.e. as if you were simulating it, and telling him, if there are publications and while the site contains these publications, please show the content of these publications or newspapers, and in the last line we will close the if and while signs.
I will confine myself to this lesson here, and as we have noticed that now we have accomplished something very wonderful and fruitful in creating a WordPress template. It is not difficult, as they say, just what you have to do is to practice what we have done and write the code, and rewrite it over and over so that you can recognize it in the next lessons.