Have you ever wanted to create your own custom wordpress theme? I’ll show you how to start learning to hack away at your own WP theme in this tutorial in just a matter of minutes…

This is the second installment in the Managing WordPress More Effectively Series – so you can get control of your blog and wring every last bit out of your content and visitors, saving you time and making you more money!

If you’re a regular reader of this blog, you might notice that JTPratt’s Blogging Mistakes now has a new theme! I think that a blog grows with the blogger, and the biggest mistake you can make is not modifying your blog to display your progress. I started out in 2007 with a really nice theme (Prosense), because it did most of what I wanted and looked professional. But I hacked and hacked and hacked it some more to slowly get rid of things I didn’t like. Finally – I just had to say enough is enough and create my own WordPress theme just exactly the way I wanted it.

WordPress Theme Hacking

If you’re curious and you know some HTML and CSS (even just enough to be dangerous) this guide was made for you. This isn’t a definitive guide or anything, but it will get you started and I’m sure it will give you some good ideas to create your own “custom WordPress theme”. This is the “How to Create Your Own WordPress Theme” tutorial, or “How to Hack WordPress Themes”. The first thing you need to do is get the Theme Test Drive plugin. I used this plugin for two weeks, so I could hack and test my new theme to death before putting it live. You see, it allows you to set a theme that only the admin will see when logged into the WordPress. So as long as you’re logged in, you will see the new custom theme you’re building but all your visitors will see the regular one.

Creating Your Own WP Theme from a Copy

Now login to your web site in FTP and download the theme you’re using now to your desktop. Give the folder a unique name like “custom-theme” or something. I’m going to show you how to create your own theme by starting to modify a second copy of the one you’re currently using (without anyone but you knowing about it). Now, using Notepad (or any text editor) open the “style.css” file. At the top of the file are some comment lines. When you go to “Presentation -> Themes” in your WordPress dashboard, the titles and descriptions of the themes you have installed come from the “style.css” file of those themes. The style file you just opened should already have comments like this as the first few lines like this:


/*
Theme Name: JTPratts Custom Theme
Theme URI: http://www.jtpratt.com
Description: No nonsense custom theme developed in house.
Author: JTPratt's Blogging Mistakes
Author URI: http://www.jtpratt.com

Modify all those lines with your own details, delete the “screenshot.png” file from the folder, and then upload the entire folder back to your theme directory in FTP. If you have a graphics editor, you could instead open the screenshot file and modify it to go with your theme. I created a custom one so I could tell my backup from my live one like this:

live theme

Once you’ve uploaded the folder to your theme directory, go back to your WP dashboard and “Presentation -> Themes” tab. Your new theme should now be an option. If you also created a “screenshot.png” (it must be named exactly that) and uploaded it in the folder too – the new picture of your theme will show up as well as in my example above.

JTPratts Custom Theme

How to Test a WordPress Theme as Admin Only

Now, enable the “Theme Test Drive” plugin you downloaded and installed if you haven’t already. Go to “Presentation -> Theme Test drive”, choose your new theme from the dropdown and click the “enable” button.

theme test drive options

That’s it – now your ready to start theme hacking! Go to the “Presentation -> Theme Editor” tab and in the drop down menu your “current” theme will be listed like this:

That’s my current theme everyone sees. Before I start editing the test theme only I will see as admin I need to switch to that one in the theme editor like this:

theme edit

Now in the right hand list of files, find the one labeled “Main Index” and click on it. 10 or 20 lines in you should see something like this:


Right after the div entry tag add a bunch of random text, save the file, and in another tab or browser window load up your blog home page. Does it contain the random text? If it does – great! If not, go back and follow the directions again to see what you did wrong. Now I don’t know how much HTML and CSS code you know – so if you need a reference be sure to visit and bookmark W3Schools which is a free online resource for web coding. They have a reference page for each and every tag, and many free tutorials.

What is the “WordPress Loop”?

Depending on how much HTML and CSS code you know (and are willing to mess with) now you remove the random text and start messing around with your theme. Remember – only you can see the changes (while you’re logged in as admin), and you can even make major changes to the sidebar, header, and footer. The code I just showed you is what puts the posts on the main page. Not the titles or meta information, just the post content itself. You home page (Main Index) contains a “loop”. It’s called the “WordPress loop” because by default your Main Index shows 10 posts. The PHP code for the look basically says (in English) “once you find the first posts, do these things over and over until you reach the tenth post. So if you put something “in the loop” (like a picture or text) is would display on your Main Index page 10 times before or afer the content for each post beginning with the first until it reached the last.

I’m telling you this because if you want a graphic at the top of your page before the posts (like mine) you have to place it “before the loop”. If you want it after all the posts, like the 336×280 ad at the bottom of my Main Index page, it has to go “after the loop”. While EVERY theme is a bit different I this is what you look for:






The WordPress loop starts with the have_posts line and ends with the endwhile line. Before and after those 2 lines would be “before and after the loop”. Somewhere in between those 2 lines would be placing something “in the loop”. I wanted to explain this to you before you started hacking around and wondered why your changes showed up in weird place. For practice, try adding some kind of code or script for an ad (or just a linked image if you know the code) before or after the loop on your Main index page. If you’re new at this it’s good practice, and you should be figuring out why so many of us hack our theme by hand – it’s just impossible to have a plugin for every little modification you want to make.

Your First WordPress Theme Hack

Now I’m going to teach you your first real ‘hack’. Let’s say you want to show some kind of text, image, or ad further down your Main Index page, but not before or after “the loop” and not after all 10 posts. You have to insert a line of code to tell “the loop” to display it only once (and where)





    

  

The first line is the one you copy and paste into your Main Index file, put it before the count and endwhile lines just like in my example. That line of PHP code says to the loop (in English) “while you counting, after the second post print the contents of the main-index-ad.php file”. This means of course, you have to create a file called ‘main-index-ad.php’ (or whatever you want to call it) and add the script or code or whatever you want to put after the second post. Make the change in your Main Index file and “save”. Upload the main-index-ad.php file to your theme folder, and then reload your home page to test your very first theme hack. Did it work?

So far, we’ve been working on only the “Main Index” or index.php file for theme hacks. Although every theme is a bit different, nearly every one has a Main Index, a Single Post, a Page file, 404 Template (file not found), Sidebar (sometimes 2), Comments, and Archives page. Some themes also have a Category page, but if they don’t the Archives.php page will be used for category pages too. I point this out because if you ad something to the homepage, you might also want it to appear on single posts, or pages, or category pages. Like in the previous example you might consider making several files with ads, text, or images and uploading them to your theme directory. You can use the same line of code in the previous example to include any file before or after the loop. Just remove the count statement like this:





It’s much smarter to add things to your pages with a file like this if it’s going to be in multiple places. Otherwise, you have to manually modify multiple files. If you do it like this, in the future when you need to change that content, you just edit the one file.

Your Second WordPress Theme Hack

For quite a while I had wanted to add the comment count under my post titles on my index page where they would be linked to actually post a comment. Oh – an I wanted a little comment graphic beside them too. Basically “inside the loop” you just add the following PHP code somewhere are your post title:



'; comments_popup_link($comments_img_link .' Comments(0)', $comments_img_link .' Comments(1)', $comments_img_link . ' Comments(%)');?>

The first line is the code you need to find “in the loop” which prints out the post title heading. Your may look slightly different, just look for “the_title” in the line. Right after that paste the two lines in my example. You’ll meed to modify the first line with the name of and correct path to your comment icon. You’ll need to create one or find a free suitable one on the web.

Adding a plugin to do the Hacking for You

There’s still a few things that WordPress “won’t do” what I prefer to have on my blog that are easily added with a plugin. For most of these things I use Lester Chan’s WordPress Plugins. I use WP-PageNavi for the navigation at the bottom of my home page, and replaced the horrible “previous” and “next” default wordpress navigation links with it. I use WP-PostRatings for the star voting on each post. WP-Post Views displays the post count for each post, in addition to the “most viewed” posts in my sidebar. The WP-Print plugin is for the printer friendly page link for posts. With all these Lester Chan WordPress plugins, once you install and activate them, all you have to do is copy and paste the line of PHP code on the pages and places you want the plugin to display something. You get that code on the documentation “usage” page for each plugin on Lester’s site. After doing the first two hacks, it should be pretty easy to add the code to your template pages for the plugin hacks to work.

In addition to the Lester Chan plugins, on my pages after the posts on my main page you’ll see some options for visitor’s like “subscribe to this feed”, “email this”, “digg this”, etc. These features actually come from Feedburner. I know on a lot sites I see people adding a “social” plugin to display a bazillion options for all the tagging sites. I use Feedburner for my feed (like most bloggers do), and they have a “Feedburner Feedsmith” plugin that will add that “flare” after your posts – which I think have much more helpful options than any social plugin around. If you download and enable that plugin from Feedburner, you have to add the provided PHP code to your template as well.

Hacking Your Theme Stylesheet

Your stylesheet contains all properties of all the colors and sizes of items on your blog. It has background and link colors, font sizes, bold, italics, you name it. In your dashboard theme editor click on “Stylesheet” to bring up this file. It’s the same one you added the theme properties to on your computer in a text editor at the very beginning of this article. YOUR stylesheet is more than likely going to be completely different than mine, and editing it won’t be as easy as the earlier copy and paste hacks. What you need to know is that every web page is a “document” that has “elements”. The elements are setup in a “box model”, and items like div’s, paragraphs (p’s), spans, the body, headings (h’s), blockquote, and list tags (ul, ol, li or underordered list, ordered list, and list) are all “boxes”. In CSS code everything “nests” and “properties” can be assigned to elements at any level. Here’s a diagram example:

css box model

That image is an example of how all the boxes would look if you drew them all out. Here’s how those boxes look as (well formatted) HTML code:




  

I wanted you to visualize this before you started stylesheet hacking so you would know about how nesting works. If you change the (font) “color” to grey at the “body” level all the text on the page will be grey. If you also change the font color to green at the “li” or list item level, all the text on the page will be grey except the list items, which will be green. If you change the paragraph or “p” font color to red, then both the P and UL text will be red, the LI text will be green, but the rest of the body and div text above those levels will still be grey. This is called “inheritance”, and properties start at the highest level and stay that property until changed lower down the nesting chain.

The first thing you might want to hack is your link colors and properties. There are sooooo many ways to change your links to make them stand out. A hyperlink is an “a” or anchor tag. There are 3 states of a link which are normal, visited, and hover. Normal is what the color of the link is before you click it. Visited is the color of the link once you’ve visited it. And hover is the color of the link when your mouse goes over it. For all three of these states of a link you can change the color, text-decoration, background, and many other properties. In my stylesheet I have entries to change link properties for the entire body of all my pages like this:



body a {
	color: #0033CC;
	text-decoration: none;
}

body a:visited {
        color: #003399;
}

body a:hover {
	text-decoration: underline;
        color: #003399;
	background: #000000;
}

As you see, you can change the color for the 3 different states of links, you can change the text decoration (for any state), or the background color (for any state). You can also leave any of these properties out. For the text decoration property you could use any of these values: solid, underline, overline, line-through, none, dotted, or dashed. While my code example above controls the link color for an entire body of a page, you can also change them at any level, like maybe your sidebar:



#sidebar a:hover {
	text-decoration: underline;
}

Experiment by modifying the link colors in your stylesheet now. Then experiment further by changing font sizes and colors. To find cool color schemes to change colors of text, links, or backgrounds Use this CSS color chart for reference. It’s probably the best color chart I’ve seen in years, mainly because it is based on pantone colors and paint strip samples from a hardware store.

The last wordpress theme hack (in this article) I’ll show you is for headings. A heading is an “H” tag like <H1> <H2> <H3> <H4>, etc. Every post should have a (title) heading, and every widget or section in your sidebar has a heading. As shown earlier in my diagram – a heading is a “box” and that box has properties, like background, padding, margin, (text) color, (link) color, border, border-style, and more. By default in WordPress the post headers are just linked text. While that’s ok, as you can see on my Main page and my post pages I prefer a black border, a background color, and some padding. In my sidebar I gave the sections headings a background image, a bottom border, and some margines. The list elements also have a bottom border.



#sidebar ul {
	margin-bottom:5px;
        padding-left:5px;
}

#sidebar .sidebar_left ul h2 {
	padding-bottom: 1px;
	border-bottom: solid 1px #999999;
	font-size: 1.1em;
}

#sidebar h2 {
	background: #B0E2FF  url('/wp-content/images/header-bkg.gif') no-repeat;
	padding-left: 7px;
	padding-bottom: 0px;
}

#sidebar .sidebar_right ul h2 {
	padding-bottom: 1px;
	border-bottom: solid 1px #999999;
	font-size: 1.1em;
}


In the code example above I showed you nearly all my sidebar stylesheet properties so you can get an idea of the many different ways you can customize a header and list item. You can see how I gave the sidebar H2 header a backround image instead of just a color. This the code I used to format the properties of the post headings:



.post h2 {
	background: #CCCCCC;
	border: 1px solid;
	border-color: #000000;
	padding-left: 10px;
	padding-right: 10px
}

Instead of just having linked text I gave my post headings a background color of grey, a solid 1 pixel black border, and some padding on the left and right sides. Now I think it’s much easier to see where one post ends an the next begins on my pages.

Use What You’ve Learned to Hack Your Theme More

I’ve give you a way to hack away at your WordPress theme without changing how your visitor’s see it. I’ve told you about the WordPress loop, and how to add things before, after, and inside it. We hacked and added some PHP code, and then hacked our theme stylesheet to change properties to affect the layout and design of the page. I can’t teach you everything you need to know to create your own entire custom theme in just one post – but I can get you started! Now you know enough about WordPress themes to be dangerous and customize your own. Visit and bookmark W3Schools.com for your HTML and CSS reference needs. Research and read more articles explaining how to hack and customize your WordPress theme further like the tutorials at WPDesigner.com.

Please comment if this article helped you, you had a question, or a great worpress theme hack or customization to add! I hope you found this information valuable – if so please feel free to bookmark, digg, and stumble this page!