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:
- Installing Wordpress locally for testing.
- Defining the overall structure.
- Creating a style sheet that we developed on a static HTML page.
- Decomposing this interface in several parts (header, footer, etc ...), stored in files to include.
- 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:
Describes the common header.
Defines the page for a single article.
Define the home page.
The common footer.
Define the side panels.
Template of comments.
To this we add at least two files:
PHP functions used by the theme.
The global stylesheet. The entire presentation is defined in this file.
More files can be added to develop the theme such search.php to describe the search form.
Before building the theme, it is necessary to know the list of components supplied by Wordpress to create an interface.
- The components of a page.
How to assign in the interface. These are function calls defined by Wordpress.
- The code of widgets.
These are the interface elements that provide access to the site's pages in several ways.
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.
- Installing Wordpress locally.
- Single article page. (single.php)
Are included in the page the header, side panel and the footer.
- 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.
- The header. (header.php)
- The footer. (footer.php)
- The side panel. (sidebar.php)
- The stylesheet. (style.css)
It is developed on a static HTML page that is online here.
- Graphical elements.
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.