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.
It must be:
1.
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:
<?php wp_title(); ?>
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 We add our functions: Immediately check the results. We see that the text in the header is located not quite right, padding between the texts are too big. To correct it we need to edit style.css. CSS Rules To navigate through the CSS, you need to know several simple rules. 1. For the tag description in the CSS you can use this structure, such as: Let’s define with the browser. The fact is that there are good browsers, and there are bad, such as IE. Not to suffer, we’ll make a template for good browsers such as FireFox or Opera, because they conform to standards. 2. If we need to describe the identifier ID, then use this structure: This record will be used to tag 3. If we need to describe the class (class), then write: This design will be used to tag: . 4. In addition to these rules, the CSS used inheritance. For example, if we record: – It would mean that the tags inside an element with id=”footer”, which is in 5. And in conclusion, there is another rule: if you identify element in the file such as red, then redefined it green, then it will appear green. Now, knowing these rules, we can begin the editing of our styles. Edit style.css Because we still must rewrite styles, it is wise to immediately edit the existing, in order not to return to this point. The procedure is: look the tags appearing (as well as id, class) in index.php, and in the same sequence detect them in style.css. First, we have the tag . Define it as: – That is, we have determined that the base font size to the entire template will be 10pt, Arial is headset. Since then, we find div#container. Please note that it occurs twice in the file. This block has the content of the entire template, so this unit is responsible for the flattening at the center of the browser. Writing this way: This, we point out that the width of the block is 700px, and flattening is achieved by automated installation of indents left and right, and top and bottom by zero. After that we will have the blocks with texts, so they need to set the main installations for links and paragraphs (this is enough now). You can then change the style (such as links) in a particular block. Write: I think it’s clear with the link, but I’ll explain in details the margin settings. All access can be specified by a short record in the following order: top, right, bottom, left, that is, bypassing clockwise, starting from half-day (it is easier to remember). At the end of erasure, you will need grouping recurring items so that they are close. Making header As seen on the code, we need to redefine the style for the div#header. I think that the code will not cause you difficulty, but still I’ll describe it. div#header – Set the background gray (# EEE); internal padding: top – 100px, the rest of 10px. If you had no mistakes, you’d see a pattern already working with a link to the homepage (although there is nothing else so far Nice article, keep up the good work. If you want to read more on this topic (understood) why not try BlogCop.
h1 { color: #FF00FF; margin: 10px; } This record means that all the tags will be displayed by the color # FF00FF and have a spacing 10px on each side.div#header {height: 150px; margin: 0; background: #EEE; color: #79B30B;}
h1.header {color: red;}
div #footer p {margin: 0; padding: 10px;}
body {font-family: Arial, Sans-serif; font-size: 10pt;}
div#container {width: 700px; margin: 0 auto;}
p {margin: 3px 0px 4px 0px;} a {color: red;}
Our h1 is in the div#header. But to start, it would be a good idea to identify div#header header itself, and after, the values for h1 and h2. I decided that the very name of the blog and its description must be placed on a gray background bottom left. This is:div#header {background: #EEE; padding: 100px 10px 10px 10px;} div#header h1 {font-size: 14pt; margin: 0px;} div#header h2 {font-size: 10pt; margin: 0px;}
div#header h1 – element h1 in this unit: Font 14pt, all the padding is dropped.
div#header h2 – similar to the first and only to h2 font size 10pt.
We do not draw special attention at the colors now. They are configured at last resort. Now the main are dimensions and layout. ).1 response so far!
Leave a Comment