How to create a real WordPress theme

wordpress theme design vector image

 

Welcome to the first part of the guide “How to create a real WordPress theme.” Why do I use the term “real”? The reason is simple: unlike other guides of the same kind, which explain how to make very simple templates made for educational purposes, this guide is based on an actual theme, Mymagazine, which can be downloaded from the directory of WordPress themes (and I suggest to do it: by downloading it you can follow the explanation using the original files).
The goal to achieve is to acquire the knowledge needed to build a theme which can pass the review process of the WordPress.org team, starting from a simple HTML site.
The guide is aimed at WordPress beginners, however, it requires at least a basic knowledge of html, css, php and jQuery. Therefore I will assume the knowledge of html and css code that we will meet in the course of this series, focusing your attention on the WordPress functions.
To follow this guide you need a development version of WordPress (if you don’t know how to install WordPress, please take a look at the codex page relating to its installation ). Ready to begin? Let’s go!

The theme directory and the essential files

After installing WordPress, you should find an image like this:

the image of a new installation of WordPress
the classic WordPress dashboard

This is the appearance of the WordPress administration panel updated to version no. 4.4.2. Click on “Appearance” -> “Themes” and you will find the list of built-in WordPress themes, something similar to the following picture (of course, the appearance may change over time, along with the release of later versions):

built-it WordPress themes
built-in WordPress themes

Of course, your theme does not exist yet … let’s do it now! Access the folder on your computer where you have installed WordPress, click on the “wp-content” and then on the “themes” folder. At this point you’ll find other sub-folders that contain the built-in themes, create a new folder as in the image below:

image of wordpress themes folder

If you are going to create a WordPress theme to be included in the directory of the WordPress.org themes you should do a quick search to check if the name of the theme is available or if it has already been used. Visit the page of the theme directory and in the search box enter the name of your choice: if there is no match, you can proceed with the name of the theme you have in mind.

With your favorite text editor, create two empty files and save them inside the theme folder as “index.php” and “style.css”. Then proceed with the creation of three other files: functions.php, header.php and footer.php and save them in the same folder. At this point the files we’ve just created are all empty, let’s see what are the instructions to enter into them.

A preview of the WordPress theme

As I said at the beginning of the post, this guide is based on the Mymagazine free WordPress theme , whose appearance is represented in the image below

screenshot of Mymagazine free WordPress theme

The html file code is shown in this page . Do not be afraid of all that code, especially if you are a beginner, a good part of it is generated dynamically by WordPress. It is time to transfer the code inside the files we have created earlier.

Copy the lines from n. 1 to n. 85 (from <! DOCTYPE html> to <div class="start row"> ) and insert them inside the header.php file; copy the lines from n. 195 to no. 240 (from </ div> to </ html>) and paste them into the footer.php file. Everything else goes inside the index.php file.

Now the html code has been moved inside the .php files, so we need to edit it to work within the WordPress theme, starting next article. In the meantime if you have any doubts or other considerations please write a comment below. See you soon!

Comments

  • Carolina on

    Hello, is there a way to change the background color? Thank you

    Reply

    • Alessandro Costa on

      Hello Carolina, the free version of Mymagazine doesn’t allow you to change the background color of the page.

      Reply

    • Marcel Mulder on

      It does, just edit the css with your element inspector.

      Reply

Leave a Reply

Your email address will not be published. Name and email are required.