Make your Wordpress template from scratch – Chapter 1

Posted by admin in Tutorials on 5 April 2009 | 3 responses

wpstudy_thumb

1.0 Introduction

This tutorial is written after years of experience of the author in themes developing for the most used CMS in the web.

We have chosen wordpress because in the last years it has become the system most used and well supported.

The management of a wordpress website is very simple and immediate, it offers many possibilities of extension by plugins developed. As CMS it is considered one of the best regarding SEO aspect.

This tutorial is written for advanced webdesigner and beginners and it will describe various aspects of template developing for wordpress analyzing every detail and trying to explain in an easy way assuming that the reader has a minimum knoweledge of HTML, of CSS and of PHP.

The content of every chapter of this tutorial could change in the time, making some corrections and extensions of the content. At the end of every chapter, will show you a schema with the structure of files related to the template and some information that summarize the chapter.

1.1 Installation of a local webserver

To test the development of a wordpress template and see the results through the browser will be necessary the configuration of a local webserver with PHP language support.

As an alternative to the local web server, is possible to configure all in a web space, also if a local web server will halve the time of the production and make the development more simple.

We give you a list of software that helps you to install quickly a web server Apache, PHP and MySQL in your PC.

EasyPHP 3.0 (Windows), XAMPP (Windows, Mac OSX, Linux, Solaris).

1.2 First Steps

The first step to execute to make a wordpress template is to make a folder with the name that we want assign to the template inside folder themes of wordpress. In this tutorial, for convenience, we will call our template with the name: “wpstudy”, and we will add it in the folder: “/wp-content/themes/wpstudy”.

For a better organization of files that will make the template, we will add a folder called “css” as subfolder of “wpstudy”, where we will add various css files related to layout and typography of the template.

The css files added in this folder will must be recalled from a main css file that we will call with the name “style.css” and we will add it in the main folder of the template: “/wp-content/themes/wpstudy/style.css”.

The file style.css in wordpress is the container of the main informations related to the template and they are necessary during the activation of the template using the administration panel of wordpress.

The next step will be the creation of the file “index.php” inside the folder “wp-study”. Index.php will be the container of the structure of the template with the related code to use wordpress functions.

1.3 Style.css and the template informations

Edit the file “style.css” and add the informations related to template as a CSS comment:

/*
Theme Name: WpStudy
Theme URI: http://www.wpstudytheme.com/
Description: Learning Wordpress Themes Design
Version: 1.0
Author: Daniele Cultrera
Author URI: http://www.semecreativo.it
Tags: custom header, fixed width, two columns, widgets
*/

These rows added inside the file “style.css”, I think that not need further explanations.

Save the file “style.css” and add in the template folder an image file showing the template preview in PNG format with the resolution of 300×225 pixels. The file must be named “screenshot.png”

To better understand this tutorial and the operations executed in this part, we open the administration panel of wordpress to verify the template available through the page “Manage Themes”.

The attached screen shows the informations of the template listed on “Manage Themes” and it contains some of the informations added into the file “style.css”.

screen-01

The second screen shows always the informations of the template available on “Manage Themes” but with more informations regarding the author. These details are showed when the template is selected as “active”.

screen-02