How to make a theme for Wordpress

Create a theme can be easy and quick if you follow the right path. This is not always what do the webmasters. Most themes for Wordpress are created from the template included with the CMS or from another template, which is why they have almost all the same layout with the menu on the right and a fixed width.

How to create a theme

We create a theme from scratch by setting a style sheet, which is tested on an HTML page. Then we fill the interface with the bricks provided by Wordpress, as we assemble the pieces of lego!

We proceed in several stages:

  1. Installing Wordpress locally for testing.
  2. Defining the overall structure.
  3. Creating a style sheet that we developed on a static HTML page.
  4. Decomposing this interface in several parts (header, footer, etc ...), stored in files to include.
  5. Creating customized graphic elements.

If you found in the list offered on the Wordpress site, themes whose you like the fonts, the arrangement of elements, using them with your own theme will cost you less time that to try to change the structure of an existing theme.

This tutorial is based on a practical example for which we have defined a structure and a classic list of files, and a style sheet also academic, with header and footer, and two columns left menu.

Structure of the theme

The theme is divided into several files, that contain each a part of the overall structure. It is this:

<html>
<head></head>
<body>
    <header>
    </header>
    <content>
    </content>
    <leftside></leftside>
    <rightside></rightside>
    <footer></footer>
</body>
</html>

The position of the content and sidebar depends on the choice of design for the interface. Often is a global container inside body, but it is not essential because we can associate a style to body.

Files of the theme

And the theme is implemented in the following files:

To this we add at least two files:

More files can be added to develop the theme such search.php to describe the search form.

Prerequisites

Before building the theme, it is necessary to know the list of components supplied by Wordpress to create an interface.

Making of the theme

We will see in Chapter 8 how to make a theme for Wordpress, from scratch and with components pre-defined by the software Wordpress.

  1. Installing Wordpress locally.
  2. Single article page. (single.php)
    Are included in the page the header, side panel and the footer.
  3. Home page. (index.php)
    It contains a list of items rather than the body of an article, but can also give a different presentation. It also displays a list by category, search result, archives.
  4. The header. (header.php)
  5. The footer. (footer.php)
  6. The side panel. (sidebar.php)
  7. The stylesheet. (style.css)
    It is developed on a static HTML page that is online here.

A theme also requires a template of comments (comment.php) to be automatically included at the end of the article. We have incorporated the template of the default theme. You can customize it as needed.

Application

Documentation