Create WordPress Templates

WordPress Templates

Many would like to learn how to make the templates for WordPress.
From my side, offering you another direction to create templates, so even argue that it is better than others, would be taken lightly. Therefore, I decided to make a few issues in which on the simple examples, with a detailed explanation I’ll show how it is done by myself. If these experiments seem interesting and useful, I’ll be very glad. Once you’ve created your own wordpress template, you can try and upload it on your wordpress web hosting provider and see it live online.

As usual, I will try to elaborate on each step. For the experienced it may seem boring, but I look forward to an unprepared reader.

How and what will we work?

Before you begin to write a template, you need to define the basics. We need to know at least four areas:

* The ability to read HTML
* The ability to read and understand the CSS
* Have a picture of the PHP
* Know basis of WordPress

For the writing of the code we’ll need the most ordinary Notepad or its improved version, for example Notepad2. But it’s not fundamentally and you can choose your own version. The main thing is that you work comfortable with it.

The basic idea of a template

The first step is that we must determine the structure of our template. We need to keep in mind the functional blocks of WordPress (headings, links, counters, advertising, management, etc.) and imagine its place at the site.

I decided to stay at tree-column version, so you’ll need to download it, too.

WordPress Hosting Tip

It is recommended to choose a hosting provider that specializes in hosting WordPress websites than just choosing cheap services that wouldn’t guarantee the stability of your site. You can read through some wordpress hosting review to help you choose which one will fit best for your website. Let’s turn to Word Press.

The framework that we have just downloaded contains a ready css-code through which the positioning of the structure of the site is going. Of course this is the minimum, but for us it is an ideal solution, because we now can add our own blocks and design for them.

To connect the template to Word Press one needs to make the catalogue in the directory /themes/ which will contain our template. The template, will be called Rioni, respectively, the directory will be of the same name.

We need to think neither about the design nor programming. At this stage we must simply create files that will be understood by WordPress.

File style.css

Description of the template is stored in this file at the top as css-commentary. That is, you create an empty file named style.css. At the very top of it we write:

1. / * 2. Theme Name: Rioni 3. Theme URI: 4. Description: Training template Rioni 5. Version: 1.0 6. Author: MAX 7. Author URI: https://iwordpressthemes.com/ 8. * /

After that, we open the frame (file “LayoutGala09.html”) and copy css-styles (they are located between the lines:

Please note that the encoding of the template will be UTF-8. If you use another, then change its indication where it is clearly indicated. As a result, we get the css-file we need.

File templates

WordPress-template may consist of only two files: style.css and index.php. However, this is not the best option because we’ll need to divide the template for different functional parts: the menu, basement, header, etc. Therefore, we’ll make this structure:

* Header.php (html header withdrawal)
* Index.php (main file)
* Sidebar-1.php (first side menu)
* Sidebar-2.php (the second side menu)
* Footer.php (footer)
* Main.php (conclusion of contents)

Files index.php

This file is the main for Word Press template. If no other template file, for example home.php (used to display the main page), then WordPress gives the management in the file index.php.

Create a file index.php. At the beginning connect:

1.  5.

We need he first file to “connect” to the functions of WordPress, and with the second, we connect header.php, which will contain html-section HEAD.

After that, we open our frame and copy all lines to it (in index.php):

 1.  2.  3. 4. ... So from these tags we copy to the end of the file... 5.

File footer.php

In this file we will connect the footer of site. As long as we do not resolve all issues with the design, we’ll add any text to that file such as:
1.

(C) 2007, RIONI

Connect footer.php

Open the file index.php and at the end of the file there is block of footer:

1. 
Here it goes the footer

It must be:

1. 
 2.  3. 

File header.php

This file is typical in almost every model of templates. It contains meta-tags, plug styles, ping and etc. I cite just a ready variant because the special variations are not required:

The first check.
The initial phase has been completed. Now we can go in the admin panel and select a template Rioni. If you have done everything correctly, at the site you should see our frame.

Of course yet our template does not have the desired functionality, but we were able to move the html-template for WordPress .

Since then, we are able to control the development of the process visualy, simply updating your browser.

Lyrical digression

I would like you to try all the steps. If you really want to understand the process of template creating, then a simple “Copy-paste” will teach you nothing. Only solving the task, when you run into some difficulties and are able to solve them, then it is the only way to learn something. There is no other way.

Blog Name

Fill the template with some functionality. To do this we’ll use WordPress’ functions. Let’s start with the name of the blog.

Using functions:
* Bloginfo ( ‘name’) - the withdrawal of name
* Bloginfo ( ‘description’) – a description of the blog
* Bloginfo ( ‘siteurl’) – the path to home page

We find div-unit “responsible” for the withdrawal of top header in the index.php. It is easy to guess that this is

div#header {height: 150px; margin: 0; background: #EEE; color: #79B30B;}

h1.header {color: red;}