How to create a WordPress theme starting from scratch?


In the first two lessons we got acquainted with the WordPress platform, in the first one we saw how to install it on a home PC transformed for the occasion into a developing environment, while in the second one we took a look at the WordPress Administration Panel, an essential element for the management of a blog/website.

In today’s lesson it’s about time we deal with the creation of a WordPress theme; we will see in particular how the structure of a theme is organized and we will start developing our personal template starting from the groundwork: the main page and the main style sheet.

Article Index

  1. Return to the Origins: A Little Bit of History
  2. Which are the Necessary Files for the Functioning of a WordPress Theme?
  3. How to Create the Structure of our Theme?
    1. First Step: Creating the Folder which Will Contain Our Theme
    2. Second Step: Creating the Two Necessary Files for the Functioning of the Theme
    3. Third step: How to Add a ScreenShot in our Theme?
  4. How to Add Further Details Regarding our Theme?
  5. Activating our Theme
  6. Conclusions

1. Return to the Origins: A Little Bit of History

Before the arrival of Themes, WordPress generated all its contents using a single file named “index.php” and some other files which allowed for the display and sending of comments. A single style sheet took care instead of controlling the presentation of contents. All the other pages, including the categories and the archive pages were generated through passing parameters to the “index.php” page.

The new model – introduced for the first time by the version 1.5 – foresaw the physical separation of the different parts (php files) which composed the structure of the theme. This system has made easy the creation of personalized templates for every single element that composes the website/blog: pages, archive pages, categories, article pages, etc.

2. Which are the necessary files for the functioning of a WordPress Theme?

The necessary files for the functioning of a WordPress theme are two: “index.php” and “style.css”.

As you can imagine, the first file (“index.php”) deals with providing the contents to display while the second one (“style.css”) is used to establish the method through which these contents will be shown on the screen.

Below we will see that it is possible to create personalized templates for every single item of the blog/website (pages, categories, archives, etc), and in order to achieve that enough adding more files to the main structure of the template just described. There is in fact a hierarchy of file names already established and quite accurate too to which to refer to for creating new templates  to be assigned to the main elements which compose a blog/website. Such files generally take the name assigned to the element we want to personalize. For example: by adding to the structure of our theme a file named “single.php” and by personalizing the markup it will be possible to create a template which will be used to show all the articles of the blog. A file named “single.php” inside the theme structure serves to assign a personalized template for the page that shows the content of a single article.

The same can be obtained adding a file named “page.php” which is going to be the predefined template applied to all pages created on the  website/blog. (In the future we are going to analyze in detail how it’s possible adding and personalizing a template even more minutely and assigning it to a specific page rather than to all pages).

In case these files which were just mentioned (“single.php” and/or “page.php”) would not be present in our theme structure, WordPress will use the main file of the theme: “index.php” to show the content of single articles or pages of the website/blog, as shown in Figure 1.

Figure 1 - The template hierarchy which is to be found in the official documentation of WordPress

For those who want to go deeper into the argument I advise to take look at the  template hierarchy which is to be found in the official documentation of WordPress.

3. How to Create the Structure of our Theme?

All the files that compose a WordPress theme are to be inserted inside a folder which – in order to be installed and activated – has to be consequently loaded on the platform and placed under the folder regarding themes, in the following path:

wp-content/themes/

3.1 First step: Creating the Folder which Will Contain our Theme

All the file themes have to remain inside one folder, thus let’s create a new folder in the path shown above and name it “YIW”.

3.2 Second step: Creating the Two Necessary Files For the Functioning of Our Theme

We said that the necessary files for the creation of a theme are “index.php” and “style.css”, let’s create then these two files – empty for the time being – inside the folder of our theme which we named “YIW”. The structure of our theme at this point should resemble the one shown in Figure 2.

Figure 2 - The structure of our theme

If now we try to load the Administration Panel of our Blog (installed in previous lessons), and try to display the available Themes for our platform by clicking on the menu “Appearance->Themes” we notice that besides the two available default themes after the installation of WordPress, now there is also a third theme called Anonymous YIW, as shown in Figure 3.

Figure 3 - Manage Template

As you can notice – in the panel representing our theme  – the screenshot (miniature) of the theme and the informative data relative to the author are missing and a brief description regarding the theme also.

3.3 Third Step: How to Add a ScreenShot of Our Theme?

In order to show a screenshot of our theme inside the proper panel, you need to add the screenshot at hand inside the theme structure and name the file in “screenshot.png”, as shown in Figure 4.

Figure 4 - The theme structure with add the screenshot

Now if you try to reload the page regarding the theme management, you can see that the screenshot just added is present above the name of the theme. (Figure 5).

Figure 5 - Theme management

4. How to Add Further Details Regarding Our Theme?

For adding other details regarding our Theme (always displayed on the Administration Panel in the Theme management) we have to open our style sheet named “style.css” and adding at the beginning of the document the following information as a comment:


/*

Theme name: Your Inspiration WordPress

Theme url: http://www.yourinspirationweb.com

Description: Theme developed for the Course of YIW

Version: 1.0

Author: <a href="http://www.yourinspirationweb.com" title="Website Nando Pappalardo">Nando Pappalardo</a>

Author url: http://www.yourinspirationweb.com

Tags: 2 columns, clean, minimal

*/

If now we go have a look at the usual page of Theme management, we notice that under the screenshot now there are present further data belonging to the theme (Figure 6), such as the name of the theme, the author, links to the author’s website, etc.

Figure 6 - Management Themes with screenshots of the theme and other details.

5. Activating our Theme

At this point it is possible to activate our theme and start working on its personalization. In order to activate it, enough clicking n the link named “Activate” available immediately under the name of the Theme inside the management page.

After having activated the Theme, the latter will be displayed as Current Theme replacing the previous one (figure 7).

Figure 7 - Management Theme: theme YIW activated

If you try to display the page regarding your blog/website you’ll become aware that now instead of it a completely blank page is loaded. Why does that happen? Nothing to be worried about, we have just activated our theme which still contains a single template (“index.php”) completely empty. The true personalization has still to take place.

6. Conclusions

I guess it’s enough for this week: we treated a little bit of history regarding the evolution of themes and started the personalization process of a WordPress.

In the next lesson we will get deeper into the personalization process, we will start writing the main markup relative to our template in the “index.php” file, we are going to attach to this document the (“style.css”) style sheet and we will start defining all the elements that are going to compose the header (the upper part). Thus, do not miss the next appointment.

Index of Articles in this guide

In order to make the consulting of this guide easier at the end of each article I will bring the index of all the issues treated.

  1. How to Install WordPress locally?
  2. WordPress: Let’s have a look at the Administration Panel
  3. How to Create a WordPress Template Starting from Scratch?
  4. WordPress: How to Create the Theme header? (part 1) (part 2)
  5. Let’s take a look at WordPress Loop
  6. Adding the Sidebar to our theme
  7. WordPress: how to make dynamic the Header and the Sidebar of the template?
  8. Hierarchy of the templates and their use: how to create a template for the articles?
  9. How to Create Personalized Templates for WordPress Pages?
  10. Using the Widgets on the Sidebar of Our Template
  11. Personalizing the Template of WordPress Comments

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

6 comments

Trackback e pingback

  1. Tweets that mention How to create a WordPress theme starting from scratch? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by mrfidalgo. mrfidalgo said: RT @YIW How to create a WordPress theme starting …
  2. How to create a WordPress theme starting from scratch? | Your Inspiration Web | WordPress News
    [...] Read the rest here: How to create a WordPress theme starting from scratch? | Your Inspiration Web [...]
  3. WordPress: How to Create the Theme Header? Part 1 | Your Inspiration Web
    [...] to the creation of a theme for WordPress. In the last lesson we stopped just at the climax: after creating …
  4. WordPress: How to Create the Theme Header? Part 2 | Your Inspiration Web
    [...] How to Create a WordPress Template Starting from Scratch? [...]
  5. Abriendo boca para el curso de WordPress | ceslava - Diseño y Formación
    [...] to Install WordPress locally?WordPress: Let’s have a look at the Administration PanelHow to Create a WordPress Template Starting from …

Leave a Reply

Current day month ye@r *