Coding a Wordpress Layout

Tutorial hardness:

Rate this tutorial:

Note: Before you read this tutorial, please note that I am not some kind of coding guru nor do I think I am - this tutorial was requested.

In this short tutorial I will teach you how to code a Wordpress theme. Many think coding a Wordpress theme is not only confusing but much different from coding a regular PHP layout, but really - it's not. I already have a tutorial on coding a regular layout which you can read here; if you wish to go on with this tutorial, please read that tutorial first before reading this. Coding a Wordpress layout is 95% similar to coding a regular PHP layout, there are just a few extra things you need to know about.

1. The (Main) Pages

When coding a regular PHP layout there are usual three main pages; the header, the footer, and the index page. Wordpress themes have all of these elements the same, and a few added extras:

Functions.php - Defines functions and complicated stuff in the theme; it is optional - and I usually don't play around with it (download template).
Single.php - This codes for a single post, which basically means it codes for what you see after you have clicked 'read more' or 'add a comment' (download template).
Comments.php - Codes for the comments page (download template).
Page.php - The codes on this page code each of the specific pages of Wordpress, you really want to keep the codes on this page quite simple (download template).

And although you can use the exact header and footer codes from a regular .php layout, the index page is different:

Index.php - Unlike in your regular PHP theme, this page isn't just a header reference at the top, footer reference at the bottom and then some writing. It codes for the first page you see when you go to a website and can be used to edit the number of posts you want on a page, or how you want the posts to be decorated, etc... (download template).
* All templates are from my free Wordpress theme City Lights

Click here to find out about more Wordpress pages from the official Wordpress website.

2. Working with the pages

Now that you have the pages, you need to edit them to fit your design. An advantage in Wordpress is that you can edit them directly on the website and don't have to put up with an FTP that might mess up, however you still can edit them using FTP.

To edit your theme log onto your Wordpress admin and go to Appearance > Editor and select your theme. (To upload a theme, create a new file in the wp-content > themes file on FTP and upload your pages, you can work off of the original template).

The Functions.php page I don't really edit, all of my functions.php pages have the same codes as provided in the template.

The Single.php page is also quite simple. I usually just copy many of the codes from my index page. Working off of the template I gave you, you will find that there are different sections for you to edit. There are many different codes that you can slot into this section, and I get my list of codes from this website.

The Comments.php page you can learn how to code here.

The Page.php page you don't want to over complicate as it is the template for every page. There are many different codes that you can slot into this section, and I get my list of codes from this website.

The main thing in Wordpress themes is knowing you pages and how to edit them, once you have the templates it's really quite simple. If you know how to liven things up using a css, the main other thing to know are just the Wordpress template tags.

Let's Recap!

You have your header, footer and css pages all done up using my other how to code a layout tutorial. You've added all of these into a file on your Wordpress (under wp-content > themes > name), and also added in all of the additional function, single, page, comments and index pages to the file. Once you have coded all of these pages, really just working off of the template, you need to active the theme!

3. Activating

After logging onto your Wordpress, access Appearance > Theme and active yours. If you want to just test the theme out and edit various things before you active it, then there are various plug-ins to download, my two favourite plugins are:

• Theme test drive and
• Preview theme.

Please contact me if you need anymore help. Best of luck. ;)

More information.