Today we’re going to begin building our WordPress Theme. I’m sure that there is a lot more basics that we haven’t covered yet but we’ll get to that later on. One of the best way to learn something is to start doing it with your own hands.

WordPress Theme Info

When you upload a new theme to wp-content/themes folder WordPress immediately detects the theme and displays a thumbnail and some information about the theme. Where does that thumbnail and information come from? Well the text comes from the style.css and thumbnail from image file named screenshot.png or jpg.

Style.css

Style.css is one of the required files for any theme in WordPress. This file should begin with a simple comment block that will be used by WordPress to detect name and other information about your theme and display it in your WordPress Theme menu.
Add the code below to the top of your style.css and edit it as required.

/*
Theme Name: WPSmart.com
Theme URI: http://www.wpsmart.com/
Description: Theme developed from scratch for WPsmart.com.
Author: WPSmart.com
Author URI: http://www.wpsmart.com
Version: 1.0
Tags: two columns, blog, fixed-width

*/

It’s pretty much self-explanatory. Add the name for your site, uri for your theme, little description, name of the author, version number if any and tags.

Screenshot.png

Take a screenshot of your theme and save it as screenshot.png. Resize it to 300×225 or something smaller and put it in the root of theme folder.

Index.php

This file is one of the two required files for any WordPress theme (the other being style.css). We’re not going into the details of this file yet. Just create a blank index.php file.

Theme Folder

Create a new folder and name it according to the name of theme. Put all three files in it and upload it to wp-content/themes/.

Go to your WordPress administration and click on Appearance>Themes and you will find your theme listed as shown below.

Don’t activate this theme as it’s blank!

We’ll begin designing our header in next tutorial.