WEB DESIGNER WALL

A wall of design ideas, web trends, and tutorials

Building Custom WordPress Theme

Nov 17, 2008 • Tutorials ! wordpress

This is the Chapter II of the Complete WordPress Theme Guide series. This
chapter will show you how to build a custom WordPress theme. Although the
Codex site provides very good documentations on how to create a theme, but I
find it too complicated for a beginner. In this tutorial, I will explain the basics
of how WordPress theme works and show you how to convert a static HTML
template into a theme. No PHP skill is required, but you need Photoshop and
CSS skills to create your own design.

1. The Blog Frontend

Before you start, let's take a look at the WordPress default theme and see how it is structured. Take
note of the elements (header, post title, search form, navigation, footer, etc.).

Default
Frontpage (index.php)
 Default Single
(single.php)

2. Photoshop Mockups
Based on the information gathered from the default theme, design a Photoshop mockup of your
blog. Here I'm using GlossyBlue, one of my free WordPress themes, as an example. Download the
demo.zip to see the Photoshop file.
3. HTML + CSS
After the PSD design is done, create a static HTML+CSS template of each page. You can use my
GlossyBlue HTML files in the demo.zip to follow this tutorial. Extract the zip and take a look at the
index.html, single.html, and page.html. Later in the tutorial, I will use these HTML files and convert
them into a theme.

Why Create a Static HTML File First?

Mainly because it will make the development process a lot easier. I usually create a HTML file for
every template that I need, test it across all browsers, validate both HTML and CSS markups, then
all I have to do is cut & paste the WordPress code. By doing so, I don't have to worry about HTML
or CSS bugs during my theme making process.

4. How WordPress Theme Works

If you go the default theme folder (wp-content/themes/default ), you should see many PHP files (called
template file) and one style.css file. When you are viewing the front page, WordPress actually uses
several template files to generate the page (index.php << header.php, sidebar.php, and footer.php).

For more details, check out Site Architecture and Template Hierarchy at Codex.

5. Duplicate The Template Files

Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the default theme
folder, copy the comments.php and searchform.php file to the glossyblue folder.

6. Style.css
Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top
and paste it to the GlossyBlue style.css file. Change the theme name and the author information as
you desire.

7. Splitting The Files

Now you need to understand where to split the file into several files: header.php, sidebar.php, and
footer.php. The image below shows a simplified version of my index file and how the markups should
split.
8. Header.php
Open the index.html file. Cut from the top to where the <!--/header --> ends, paste it in a new
PHP file, and save the file as header.php.

Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP
code (Template Tag): <title>, <link> stylesheet, <h1>, and <div class=description>.
Navigation Menu (wp_list_pages)
Replace the <li> tags in the <ul id=nav> with <?php
wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

Reference: wp_list_pages.

9. Sidebar.php
Back to the index.html file, cut from where the <form id=searchform> start to the closing tag of
<div id=sidebar> and paste it in a new PHP file, save it as sidebar.php.

Replace the <form id=searchform> wrap with <?php include (TEMPLATEPATH .

'/searchform.php'); ?>.
Replace the category <li> tags with <?php
wp_list_categories('show_count=1&title_li='); ?>
Replace the archive <li> tags with <?php wp_get_archives('type=monthly'); ?>

References: wp_list_categories and wp_get_archives.

10. Footer.php
Back to the index.html file, cut from the <div id=footer> tag to the end of </html> and paste it
in a new PHP file, save it as footer.php.

Recent Posts
Here I used the query_post to display the 5 latest posts.

Recent Comments
Recent comments are generated by a plugin (included in the theme folder).
11. Index.php
Now in your index.html file, you should only have the <div id=content> wrap. Save the file as
index.php. Insert the line:get_header, get_sidebar, and get_footer in the same order as
your layout structure.

12. Understanding The Loop

The image below illustrates how The Loop works. The Loop is used to display blog posts and it also
lets you control what to display. Basically, The Loop checks if there are posts in your blog, while
there are posts, display it, if no post found, say "Not Found".

13. Copy The Loop

Go to the default theme folder, open the index.php file. Copy The Loop from the default index.php and
paste it in between the <div id=content>..</div>. Then, replace the static text with the
WordPress Template Tags: post date, title, category, comments, next and previous link.

14. Preview The Theme

Congrats! You've done the front page (the main part of the theme). Now, login to your admin panel,
go to the Design tab, you should see the GlossyBlue theme, activate it and go to the front page to
preview the theme.

15. Single.php
Now, it is time to do the single.php template. If you want, you can go through the same process — cut
& paste from the default theme. But, I find it easier to use the index.php that you just created and save
it as single.php. Open the default theme single.php file and copy the Template Tags over. Then include
the comments_template. The image below highlights what I've changed:
16. Page.php
With the single.php template you just created, save it as page.php. Remove the post date, comment
form, next/previous link... and that's it.. there goes your page.php template.

17. Delete The HTML Files

Delete all the HTML files in the glossyblue folder (we don't need them anymore). Technically, that is
enough for a basic WordPress theme. You may notice there are more PHP files in the default theme.
Well, you don't really need those files if you just want a basic theme. For example, if the search.php
or 404.php is not present in the theme folder, WordPress will automatically use the index.php to
render the page. Read the Template Hierarchy for more details.

18. WordPress Page Template

Ok, final example. I will show you how to use Page Template to create an archive page that will list
all posts on your blog (good for sitemap). Copy the archives.php file from the default theme folder.
Delete the unwanted code and you should have something like this:
Here I'm using the query_post (showposts=-1 means display all posts) to display a list of all
posts.

Now, login to your admin panel, write a new page, title it Archives. On the Page Template
dropdown, select Archives.
More Reading:
Check out a list of WordPress Plugins that you may find useful. For more advance theme coding,
read my WordPress Theme Hacks.

What's Next...
In the next chapter, I will show you how to export your local WordPress to a web host and keep the
local version for backup purpose.

684 COMMENTS

Xbox 360
AUG 25, 2011 @ 22:16

It is the most complete.

Arama Motoru Optimizasyonu

SEP 01, 2011 @ 07:46
Excellent! Your article has a ton readers. How did you get so many viewers to look at your site I’m jealous!
I’m still studying all about posting articles on the web. I’m going to look around on your blog to get a better
understanding how to get more visable. Thank you!

Ottoman
SEP 01, 2011 @ 10:01

i war not user to comment you this article.. but i want to say that.. we want see your new
articles on this blog.. see you..

Ankara Hosting
SEP 01, 2011 @ 11:40

Well, I am so excited that I have located your post because I have been searching for some
information on this for almost three hours! You’ve helped me a lot indeed and by scaning this
post I have found many new and useful info about this subject!

Kullanılmı! Paçavra
SEP 02, 2011 @ 09:45

Thank you for any other informative website. The place else may just I get that kind of
information written in such a perfect manner? I’ve a challenge that I’m just now operating
on, and I have been on the look out for such info.thanks

Fatih Gülo"lu
SEP 02, 2011 @ 10:13

nice portfolio i really appriciate it

Aaaa
SEP 02, 2011 @ 10:40

i war not user to comment you this article.. but i want to say that.. we want see your new
articles on this blog.. see you..

Sdgsdg
SEP 04, 2011 @ 05:20

This site has got a lot of really useful stuff on it. Thanks for informing me.

Stephanie
SEP 07, 2011 @ 11:54

This series is the best for beginners – it’s what helped me finally “get it” and be able to create
my first WordPress theme for my portfolio. I now am a WP dev for a living. Your tutorial
series is the one I always recommend to beginners. Thanks for providing such an amazing,
easy-to-understand resource!

Asd
SEP 21, 2011 @ 06:51

your post was very usefull! thanks

If anyone wants a custom made wordpress themes please let me know. here is my fiverr.com
gig: http://fiverr.com/cmitsakis/make-a-unique-wordpress-theme you will get your own
unique wordpress theme for only $5! an insane price only for a limited time!
 Melody
OCT 04, 2011 @ 18:16

Thanks for the great tutorial! I wonder what about if I don’t install wordpress locally? Instead
I have wordpress install with bluehost? That’s what I had already done. Can I still build a
custom wordpress theme? I am a 100% beginner with database and PHP.

Melody
OCT 04, 2011 @ 18:19

Hello! Thanks for the great tutorial! I wonder what about if I don’t install wordpress on my
local computer? Instead I have it install with bluehost. That’s what I had already done. Can I
still build a custom wordpress theme that way? I am not a PHP programer. I only know the
front-end coding, HTML and CSS.

FreeStuffBag
OCT 06, 2011 @ 11:02

Hello, you need to learn to modify the templates WP but in reality I have no knowledge of
PHP.
I would like to include in the index with all categories last 3 entries each. I’ll try. Thanks
friend.

Jk
OCT 07, 2011 @ 00:02

yuiu

Page
OCT 14, 2011 @ 18:35

look, you realy think so?

ABO UT
Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La,
who also runs N.Design Studio, Themify, IconDock, and Best Web Gallery.

© WEB DESIGNER WALL 2011