WordPress Theme Development - Part I (Preparing Files)

What is a WordPress Theme?

WordPress themes are a collection of text files that aim to customize the website from an aesthetic point of view and improve the user experience by adding extra features designed to make it easier to navigate the pages.
By customization we mean the implementation of templates based on html and CSS languages. When it comes to functionality we refer to the addition of elements such as: a search bar in the content of the site, a sidebar called sidebar that may contain important elements for the user, adding navigation menus in various places on the pages, etc.

How do homework work?

Before we start developing a WordPress theme, we need to keep in mind that it will need constant maintenance and regular updates. Some people may be wondering why I need to periodically add certain updates to my own themes. The good answer is that for security reasons, WordPress is periodically updated to the latest version. By updating WordPress we can understand the transition to a newer version of PHP. Failure to update a topic in such situations may result in errors on the site and some parts of it may not work properly. By switching to a new version of PHP, certain lines of code in the theme files may be deprecated and need to be improved. E.g, a default WordPress function that links to a specific section of the site may change its name. In fact, we will have to write or download a template that meets our needs. Once prepared, it will be inserted into the code structure of certain files to style the pages. Whether we download a template or write it from scratch, it is essential in developing a theme. With this template we can choose for example the width of the content that the pages should have, the main and secondary colors of the site, the type of organization of the content in columns and rows and last but not least the introduction of attractive animations to offer users. a pleasant experience. we will need to write or download a template that meets our needs. Once prepared, it will be inserted into the code structure of certain files to style the pages. Whether we download a template or write it from scratch, it is essential in developing a theme. With this template we can choose for example the width of the content that the pages should have, the main and secondary colors of the site, the type of organization of the content in columns and rows and last but not least the introduction of attractive animations to offer users. a pleasant experience. we will need to write or download a template that meets our needs. Once prepared, it will be inserted into the code structure of certain files to style the pages. Whether we download a template or write it from scratch, it is essential in developing a theme. With this template we can choose for example the width of the content that the pages should have, the main and secondary colors of the site, the type of organization of the content in columns and rows and last but not least the introduction of attractive animations to offer users. a pleasant experience. Whether we download a template or write it from scratch, it is essential in developing a theme. With this template we can choose for example the width of the content that the pages should have, the main and secondary colors of the site, the type of organization of the content in columns and rows and last but not least the introduction of attractive animations to offer users. a pleasant experience. Whether we download a template or write it from scratch, it is essential in developing a theme. With this template we can choose for example the width of the content that the pages should have, the main and secondary colors of the site, the type of organization of the content in columns and rows and last but not least the introduction of attractive animations to offer users. a pleasant experience.
According to their structure and the role that they have, the files within a WordPress theme can be: template files, files for functionalities and stylization files. Style files play an important role in page design. In other words, the style.css file is the one that generates the information about the theme it belongs to and makes it visible in the WordPress control panel. Template files are those files that add a template for the sections of the site that should appear on all pages or at least on most. Any site contains at least:

– a header (the top of the pages that may contain the logo, navigation menu, social media buttons and tags for the title, description or language used), –
a footer (the bottom section of the pages where the data can be entered contact, forms, terms or conditions of use of the site),
a sidebar (sidebar) and the central part of the pages used for content.

If we go into the files of an existing theme we will see that these templates are created each in a separate file and are inserted in each of the other pages through some default functions of WordPress, such as:

<?php get_header();?> //insert header in page

<?php get_sidebar();?> //insert sidebar in page

<?php get_footer();?> //insert footerin page

<?php get_search_form();?> //insert search form

This makes the entire page code easier to read without having to rewrite these sections every time we create a new page.
We also find files that aim to introduce various necessary features in the newly created theme. These features are usually written in a file called functions.php. This functions.php file basically creates the user experience elements that we want to introduce in the theme. For example, if we want the theme to have a menu, a sidebar, or a search bar, it must first be configured in this file and then invoked in the template pages.

Preparing files

To start creating a new theme we will first need to think of a suggestive name and have a template ready. The first thing we do in this step is to create a folder in which we will gradually insert the necessary files for that theme. We can create this folder directly on our computer and then upload it archived with the .zip extension in the WordPress themes folder following the path from the Cpanel control panel or via FTP public_html / wp-content / themes.
The folder in which we put the theme files is not the one that will generate the default theme name, and it may be different from it. It should be suggestive and if it is composed of more than one word we should avoid free spaces by replacing them with “_” or “-“. For example, if we want to call the theme “summer school”, we will use “summer_school” as the folder name.
Once we have created this folder we can start by inserting the basic files inside it. Depending on the type of site, we can opt for files such as:

style.css
index.php
front-page.php
header.php
footer.php
single.php

archive.php

functions.php
home . php

sidebar.php

search.php
page.php

comments.php
404.php

category.php
taxonomy.php

author.php

The importance of file names

When creating pages for your theme, it is very important not to use names other than the ones presented, because WordPress automatically takes the content of these pages and displays it where you invoke it. For example, to add a header to all pages, you will use the get_header () function, which will search your theme folder for a file called header.php, and if it exists, it will automatically display its contents. Of course, there are situations where you can choose to create more types of page headers for different places on the site. This can be done by adding a slug in the page name and invocation functions.
The use of a header-doi.php file may be requested on other pages by adding the last part of the page name as a parameter for the get_header () function.

invocare header.php -> get_header();
invocare header-doi.php -> get_header("doi");

Below we will present each of these pages, what they are, what they are used for and how they can be customized.

Homework creation

Okay, now that we’ve created a folder where we’ve added some new files, now we need to enter content and information about the theme itself. We will start by opening the style.css file. To tell WordPress that this folder is a theme, so that it can be displayed in the main panel from where we can activate and use it, we will need to enter the following header in the style.css page:

/*
Theme Name: Summer school
Theme URI: http://scoaladevara.site/
Author: Popescu Robert
Author URI: http://popescurobert.site/
Description: Aceasta este tema oficiala a Scolii de vara cu numele "x"
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Scoala de vara Romania
Tags */

This header can be adapted as follows:

in the Theme Name section, replace “Summer School” with the name of the theme you want to create.
after Theme URIs go to the site where the theme can be found (if any)
Author – your name
Author URI – author’s site (optional, if any)
Description – description of the topic
Version (if you come with updates, the theme may include a newer version, for example 1.1 or 2.0)
License and License URI sections – if you have a license to use the theme, it should be mentioned here
Text Domain – required to suggest whether the theme is for local or international use. If you want to upload it to WordPress repositories, people who find it in searches will be notified if the theme is adaptable for translations or not.

After you have added this header we will notice that the theme starts to become visible in the Appearance> themes page of the WordPress panel. But for now, it won’t do anything if you turn it on, as I haven’t added anything to the content yet.
To add an image to the theme on this page we will need to insert an image into the folder we created which we will call screenshoot.jpg.

See the rest of the article here .