I recently saw a high quality tutorial on NETTUTS, exemplifying very simply and succinctly, how to create a root WordPress template. then proceeded to the translation of the entire tutorial to bring it to WordPress-Love readers who feel with enough imagination to work a template and / or customization your own theme of your blog.
The structure of a WordPress template is in fact extremely simplistic. We will start by analyzing the CSS file that gives color and shape to the template. This file details pretty much everything your WordPress template will use. Then we will have to develop a index.php file, which is simply the template file that makes use of PHP tags and includes the calling code from header.php and footer.php files. At this time there are few WordPress templates to use only 4 files, so there is huge potential to use more files and options multiplied by your blog. There are pre-defined layouts such as archives.php and single.php. It is possible to be you create a page and a completely different file, both in name and in format and style.
This tutorial is the first part of a set of two, and this is discussed creating a simple template in HTML and CSS, and the second will examine more advanced techniques such as the creation and implementation of sidebars.
The purpose of this tutorial is to pass the template “Typography Paramount” Six Shooter Media in a very simple template for WordPress. Try it.
STEP 1 – CREATE FILE Style.css
The style file is the settings file from your WordPress template. There are a number of simple things you should do. The first is to rename your main file to style.css, and then you must add you information.
This code is called the review of the styles of your template sheet. It will not affect anything the template behavior, and serves only to give the name to it and credit to the author . Note that you must place the data on top of the style sheet with no spaces to divide them . Do not translate the first data indicating ” Theme Name” , ” Theme URI ” , “Description” , etc. , just put your personal data at the front.
Rename the style file that was in the original template , and called it 1.css . Advantage and also created a new typography – titled paramount folder that will be that I will load into the templates folder on my WordPress blog. Place the sheet of styles within the root of this folder, otherwise the wordpress will not be able to read the file.
STEP 2 – CREATING THE HEADER AND FOOTER
In this step we will create both header.php and footer.php files. Although both are used repeatedly in WordPress templates , the truth is that they can not be used if you wish . However, they are both very simple to work .
Starting with the header , create a file in the template folder with the header.php name, and then open the index.html file and copy the following code inside. This will be the header and will be applied to all website pages. Keep this in mind when developing their own templates.
Then we put the WordPress tags in the header.php file. These tags tell the WordPress you should inject the various types of content present . Also remember to change that link to the style sheet .
We’ve added a lot code this time, but in fact the process is very simple . All inserted tags are properly documented in the WordPress Codex . Still, let’s look at some of the features :
language_attributes ( ) – Prints the type of language to the <html> tag .
bloginfo ( ) – Used to print information about the site . The parameters are available on the Codex . The tag ‘name’ returns the title of the blog.
wp_title () – simply returns the title of the blog page .
get_Option () – Returns a value of the options database.
wp_list_pages () – List of links to the site pages. The parameters ordering pages properly and end up with the title of the print by default that comes in WordPress .
Create a file with the name footer.php and copy all of the template from the < div id = “footer “> and paste into the new file. A dynamic footer that includes the blog name , and additional information is regularly present , so let’s add one.
I changed the footer to display the copyright RSS Icon followed by the year ( <? Php the_time ( ‘Y’) ; ?> ) And the site name ( <? Php bloginfo ( ‘name ‘); ?> ) . Then the next line put a reference to the rss feed ( <? Php bloginfo ( ‘ rss2_url ‘); ?> ) .
wp_footer ( ) is called tag that WordPress uses to put things on the site background.
STEP 3 – CREATE FILE HOME
Then we will create the index.php file
This is one of the two necessary files to the WordPress template function perfectly. The other is the style.css . So let’s begin. Create the file and put it together with the other . Then place the following in it :
This simply tells WordPress which include the header.php and footer.php files . As this is a series of two articles , we will include the integration of a sidebar in your version . Place the following in the middle of both tags:
This is what WordPress call WordPress Loop . The first line of PHP code starts the loop , endwhile is the end of it. WordPress runs the loop for any article that this blog , and if no , he presents the ” Woops … ” message. also added a navigation link that will put links to more articles, so visitors can read older content without having to visit the blog archives .
In the next article we will rewrite the single.php file. This is what a visitor will read if you click a title of an article . It will include the comments system , unlike index.php .
Analyzing The TEMPLATE – WORK?
We currently have 4 files designed for the template , and assuming that you did not forget to update the index.php file, the template should work perfectly fine.