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.
- Return to the Origins: A Little Bit of History
- Which are the Necessary Files for the Functioning of a WordPress Theme?
- How to Create the Structure of our Theme?
- How to Add Further Details Regarding our Theme?
- Activating our Theme
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.
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.
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.
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:
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”.
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.
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.
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.
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.
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).
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.
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).
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.
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.
- How to Install WordPress locally?
- WordPress: Let’s have a look at the Administration Panel
- How to Create a WordPress Template Starting from Scratch?
- WordPress: How to Create the Theme header? (part 1) (part 2)
- Let’s take a look at WordPress Loop
- Adding the Sidebar to our theme
- WordPress: how to make dynamic the Header and the Sidebar of the template?
- Hierarchy of the templates and their use: how to create a template for the articles?
- How to Create Personalized Templates for WordPress Pages?
- Using the Widgets on the Sidebar of Our Template
- Personalizing the Template of WordPress Comments
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 »