WordPress theme creation

Unit: 10 of 13

A large number of authors use WordPress with little or no knowledge of HTML, PHP, CSS and JavaScript. However, for those who are familiar with the mentioned languages or only with a few of them, they will adapt more easily to WordPress. Even people who do not have special knowledge in the field of programming, who discover by chance Inspect Element or find, also by chance, a tutorial that presents through personalized settings how to which can, for example, change the color of links, soon begin to adapt easily to WordPress.

It is normal for WordPress authors to want to get more and more things, namely as much control as possible over the display of pages, but also of the site they are creating. Fortunately, WordPress has a flexible foundation and precisely separated segments for layer/level management that allows us to change literally anything we want.

One of the most important parts in the overall picture are the template files of WordPress themes. They allow authors to make drastic changes and corrections in the design of the WordPress application and functionality.

WordPress theme concept

Theme is, in fact, the “suit” in which we “dress” our WordPress application. While in classic, front-end PHP applications, the presentation of content is integrated deeper into our application (however!), in the case In WordPress, it is, in fact, at another level, on a separate layer.

Image 10.1. The concept of how WordPress themes work

In the previous lessons we have already talked about themes and their use on the WordPress site, and now we will present these themes in detail and how they work.

Each theme must meet certain standards and must be deeply integrated into the WordPress core. One may say that the theme is only the visual layer and that it defines the “design”, but in fact this is not true. The theme is integrated deeper into the content presentation process of the WordPress application.

Each theme consists of folders with PHP, CSS and, most often, JavaScript images and accompanying files. The minimum requirements for each theme is that it must contain at least style.css as well as index.php to be able to work.

This is a technical minimum, but in fact it is hard to find a theme consisting of only these two files.

WordPress theme core files

style.css

The style.css file is an inevitable part of a theme, as I already said, because in addition to styling, which is the obvious reason for this file’s existence, it functions as the core declarative file of the theme. Without it, WordPress would not be able to recognize or register any theme within its structure.

Theme definition – its name, version, author’s name and link, as well as other data, are entered and declared via style.css mandatory, using precisely defined comments. This concept is unfamiliar to many newbies in programming, but it’s actually a relatively common occurrence. Comments don’t have to be just comments.

All details about this file can be found on the official WordPress Codex pages:

https://codex.wordpress.org/Theme_Development#Theme_Stylesheet

For example, the theme of type metadata header, named Twenty Twenty, looks like this:

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.2
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned
with others.
*/

Notice that in this example, the complete data is specified within the CSS language comments, as we already said above. Although browsers don’t read or use comments, that’s exactly what WordPress does.

In the continuation of the course we will create a theme and, of course, the related file style.css.

PHP files

In addition to the mentioned CSS file, part of the minimum mandatory structure is also the file index.php, which we use to “capture” all requirements that are not related to the theme’s specialized template files. Templates like page.php, home.php, taxonomy.php and archive.php are just some of the templates we can use for designing the content listing, i.e. the structure of our WordPress application.

For example, category.php will write the content of a certain category of our site, respectively the list of corresponding post type pages, and page.php will define the structure and formatting of individual pages.

Image 10.2. The files of a typical WordPress theme, but more complex

On the other hand, as with many other PHP applications, we use parts of the code, archived in separate files, to call them as needed. Common files of this type in the WordPress ecosystem are, for example, header.php, footer.php< /span>, but also many others. These are used by template files as needed.comments.php,

The template files in the WordPress theme

When we mention template files in WordPress themes, we may wonder what we actually mean. In short, template files are used in the theme to determine how content will be displayed. In more detail, when a specific page is requested from the WordPress application (post, page, archive or something else), the display mode and the component elements that must be displayed on the page are determined, and then, based on these, a specific template is chosen ( template), and finally the page that is sent to the user is formed.

WordPress has a functional system in which, based on several parameters, the templates that will be required from the theme are “chosen”. Because the themes themselves come in various forms and levels of complexity, WordPress has, on the one hand, a very strict way of structuring the theme files, and on the other hand, it offers complete freedom in creating the organization of the pages themselves and their parts.

This concept is already known from the previous lessons of this course, and now we will familiarize ourselves with it more directly and in more detail.

After choosing the template to use for display, WordPress chooses the most suitable template that can be found in the theme. Which template will be chosen exactly depends on the clearly and precisely defined hierarchy – WordPress template hierarchy.

In the image below we can see more details:

Imaginea 10.3. WordPress Template Hierarchy ¹

Additional Information

The enlarged and interactive version of this template hierarchy pictured above can be found at: https://wphierarchy.com/

At this address, the links with the structure segments direct us to other pages with relevant information.

At first glance, this diagram may seem confusing, but it’s actually very simple once you get used to how WordPress works with in-theme templates.

One of the definitions says:

Template files are modular, versatile and used to generate web pages on your WordPress site.²

In other words, the template hierarchy (WordPress template hierarchy) is actually a precise list of files, recognized by WordPress and ranked according to importance, with the aim of determining the file and its function, as well as which of the files has priority over other files in a given situation.

This hierarchy can also be seen as a question and answer game where WordPress comes up with the correct answer to the question – Which file should I use to display the page?

For example, if the page should be displayed at the (fictitious) address:

https://www.wpsite.com/category/sport

WordPress would have searched for the files in exactly the following order:

category-{slug}.php – in this case: category-sport.php. If this file exists, WordPress will use it for the specified link.
category-{id}.php – if the ID of a particular category is, for example, 7, WordPress would try to find the file named: .
php – if it does not find the files specified in steps 1 and 2, then it will look for a general template for its category.
php – if the general template from the category of the previous step is not defined either, then it will look for the general template of all archived pages.
php – if there is nothing else in the theme, then the last option is precisely the index file that must be found within the theme.

WordPress always follows this hierarchy without exception, which is why it is very important to familiarize yourself with it. As can be concluded, WordPress does not require each theme to have a certain number of files, but it does require certain files, if any, to be named with exact names (filename), for to be read and used correctly.

All files will usually, by necessity, call the previously mentioned files, such as footer.php, header.php and others , but also other necessary PHP files, just like most PHP applications on the web do.

Note

Continuing the course implies at least knowledge of the general elements of the PHP, HTML, JS and CSS languages.

Although certain details will be explained, it is assumed that the user knows how to use these languages.

Theme creation

Next, we will create our theme from scratch. We will name the theme, simply, Red Silver theme, this being the example we will work on next.

Within each WordPress application, all installed themes are located at:

[wordpress folder]\wp-content\themes

In this folder, for each theme there is a separate subfolder named as the theme name. In it must be found style.css, but also , which we already talked about.index.php

As mentioned, the path to style.css in our theme would be:

[wordpress folder]\wp-content\themes\redsilver\style.css

We will create a folder with an arbitrary name of the theme (in our case: redsilver), as well as both necessary files. In style.css we will introduce a near-minimal structure for WordPress to recognize and register for use:

/*
Theme Name: Red Silver theme  
Theme URI: https://it-akademija.com/
Author: ITAcademy team
Author URI: https://it-akademija.com/
Description: WordPress theme for ITAcademy course.
Text Domain: redsilverita
Version: 1.0.0
License: GNU General Public License v2 or later
*/

Note

You need to have access to a WordPress application and be able to access the file structure. More details can be found in the video lesson.

At the moment, the CSS file will only have this comment and will have no concrete CSS rules.

In index.php we will insert a simple PHP code that will accept all incoming requests:

<?php
/**
 * @package Red Silver theme  
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
</head>
<body>
      <header>
         <h1><?php bloginfo('name'); ?></h1>
         <p><?php bloginfo('description'); ?></p>
      </header>
    <main>
        <?php
        if ( have_posts() ) :
            /* Start the Loop */
            while ( have_posts() ) :
                the_post();
            endwhile;
        endif;
        ?>
    </main>
</body>
</html>

In the theme folder, at the moment, we will only have these two files, as we can see in the image below, in which a presentation from the FileZilla application is rendered.

Image 10.4. Theme files within the WordPress application

Now we can return to the administration part of WordPress and activate the theme in the Appearance > Themes, which we can see in the image below.

Image 10.5. Our theme within the WordPress application

The theme itself won’t have a display because we haven’t yet defined the sceenshot file that is responsible for it, but it won’t be a problem when it comes to activating and using that file. For minimal use of the theme, the previously mentioned files are sufficient – style.css and index.php .

After we activate the theme, the administration part will remain identical, which is to be expected, but if we visit the site, that is, the user part, a display will await us as in the image below.

Image 10.6. Showing WP site with a new theme

This should not surprise us now. The theme works, but I haven’t actually put anything into it. I have not defined the structure for displaying the content nor the styling. This is exactly what awaits us in the following lessons.

The WordPress theme must have a precisely defined number of files.

true

fake

1. Sursă: https://developer.wordpress.org/themes/basics/template-hierarchy/
2. I’m going.