15th August 2007

How To: Create Your Own Theme for WordPress

Browsed through all the hundreds of themes found at the WordPress Theme Viewer and didn’t see exactly what you want? Don’t have the programming skills to write your own theme from scratch? Don’t worry – you’re not out of luck!. All you need is a good comfort level with HTML (or using a WYSIWIG tool like Dreamweaver), a familiarity with how stylesheets work (CSS), and the ability to read through PHP code and figure out where various sections begin and end. Armed with that and my advice below you can learn to customize an existing theme to your liking You don’t need to actually know how to write PHP or any scripting at all.

Note: If you really aren’t comfortable with HTML, CSS, or reading PHP, find the theme that comes closest to what you really want, and contact the Theme Author – a great many of them will gladly customize a new theme for you, although they will likely charge a small amount for the work. But if you’re ready to try this on your own, read on………….

There are a number of themes written especially for this purpose, like the terrific themes at PlainText.org, or even the two that come with the standard WordPress installation, Default and Classic. You can also customize any of the themes you find at the WP Theme Viewer, but if you’re planning on offering it to others, be sure to give the original theme author credit.

If this is your first attempt, then I think it’s easiest if you start with a very simple, minimally styled theme, at least until you’re comfortable with the process, because it’s easier to add tags and styles as you go along than it is to hunt down a lot of little hidden styles to change them (by hidden I don’t mean invisible, but those that are nested several layers deep into a tag). Keep it simple until you have a few mods under your belt, then try tackling something that starts out with a lot more styling. And again, I can’t stress enough that while it’s totally okay to modify anyone else’s theme for your own personal use, if you’re offering up your modified version, please don’t remove the original author’s credits – just add in your own.

The most important factor is to start with a theme that is structurally as close to what you want as is possible. Do you want something with 2 columns or 3 columns? Or just a single column? Where do you want your sidebar column(s) – left or right of your post column? Do you want the whole page to be fluid (to stretch or shrink as your site visitor adjusts their browser window) or a fixed width? Do you want your page navigation along the top or in a sidebar? Although these features and more can be changed with simple modifications, it’s best to start with something as close to what you want to wind up with, so that you can keep the customization as easy as possible.

Once you’ve found your “starting” theme and downloaded it, keep a backed-up copy of the unmodified theme somewhere handy, so that you won’t have to find it again and re-download it in case you want to start over. Then go ahead and upload your “working files” to your WordPress Themes folder (wp-content > themes) and choose it under the Presentation option on your Admin menu. Make sure you have 2 or 3 posts, even if they are just Lorem Ipsum for the time being, so that you’ll be able to view a single post page, as well as your index (home) page with a couple of posts. Create a couple of comments for each post as well.

It’s also a good idea to create your own “Sandbox” for playing in as you’re testing your style changes, to minimize hits on your bandwidth. The first step in making a Sandbox is to make a slight modification to each of your .php files in your Theme’s folder – index.php, single.php, page.php, comments.php, etc on through the list, – to add in a commented line at the end of each that indicates that you’ve reached the end of that page….something like this:

image of comment code

Some well-written themes, like the ones at PlainText.org, already have these tags. Next, upload those modified .php files and then view your blog’s home page in any browser. Click on whatever your browser’s option is to view the source code (in Firefox it’s “View > Page Source”) and then “File > Save As” and give it a name like “testindex.html” and store it with your new theme’s working files. Then click on one of your posts to get to a Single Post page, and repeat that procedure, and do the same for a Category page and an Archive page. That’s enough to get you started.

Next open your new “test” pages in your HTML editor, and look for the new comment tags you added – this will tell you where each part of that page comes from, so that if you make any structural changes (like moving a section for your “recent posts” above or below a section for your “categories” or “archives”, or moving the post’s meta information above or below the post entry) you can recreate those same structural changes in the actual .php files that they belong it.

Look for the line near the top that links the page to your stylesheet (in all themes it should be called “styles.css”) and change whatever is there to link directly to your styles.css file in your working folder, instead of the version on your server. This will allow you to view changes you make to your styles.css file directly in the Test page you’re working with, instead of having to upload your styles.css file with every change and refresh your live version of the page.

If this is at all confusing, take a look at this page from Lorelle On WordPress about Building A Sandbox – Lorelle is a bona fide WordPress guru and her blog offers a wealth of WordPress advice and tutorials.

Open your stylesheet and read all the way through it so you get a feel for how it is organized. Often you’ll find a number of entries that refer to the same class or id, as theme authors sometimes like to group elements by what they are styling – typography (font sizes and colors) may be separate from structure (attributes like margins, padding, height and width). The first thing you’ll note is a dozen or so lines at the top that are commented out and are the theme information – name, author, description, etc. DON’T REMOVE THESE LINES or you will “break” the theme. These lines are required by WordPress. Please leave them as they are unless you are completely changing the look of the theme, and it’s only for personal use, in which case you can modify them with your own information, but they must be structurally intact for your theme to work.

Now you’re ready to start changing styles. Look very carefully at your testindex.html file, and look for the “id=” and “class=” part of the tags that make up each section – you’ll find the matching words in your style.css file. I generally like to start at the top and work my way down. Take a look at the “body” tag in your stylesheet – it should have some basic styling – maybe for the overall page fonts and whether your page is centered, etc. Is the font the size, type, and color you want? If not try changing it, save your stylesheet, and refresh your test page to see your new choices. Don’t like the background picture or color of the header (sometimes also called banner)? Look for that tag in the stylesheet and change the background to your own picture or color (just be sure to check the height and width as well so that it fits your new photo if you’re using one).

Work your way down through each of the elements (classes, tags, and id’s) in your stylesheet – leave what is okay and change what you need to. Note that some of the elements don’t appear on your index (home) page – they may be used on other pages, such as single post pages (where comments would appear), so you’ll also want to open and look at the test pages you made of a single post, category, and archive.

Test each and every change you make by refreshing your test page in your browser, so that if you don’t like the way a change looks, you can change it back easily, without having to figure out which change it was.

BE SURE TO MAKE FREQUENT BACK UPS of your changes if you like where it’s going – that way if you take a wrong turn you won’t have to start over from scratch if you can’t figure out what got messed up.

Once you have everything looking exactly as you like it in your test pages, upload your new stylesheet and overwrite the original one. Be sure that if you’ve moved any structural pieces around in your test pages, you also modify the .php files that contain those structures, and upload those as well. If you’ve been careful and done everything correctly, your WordPress Blog now has your own custom theme. Congratulations!

If you are much more code savvy, and would like to tackle writing your own themes from scratch, WordPress has some great tutorials to help you get started.

Good luck and happy theming!

Share with others:
Please Rate this Post:

Leave a Reply

Add your own comment! Your opinion is as valid as anyone elses, so come on... let me know what you think.

**PLEASE NOTE:  Due to the high amount of comment spam I receive I am currently moderating ALL comments, so please be patient, and I WILL respond.  in addition I use Akismet and other spam-comment blockers.  If your comment does not eventually show up it may be that Akismet has determined that it is spam due to your IP address, your links, or the words you use.   If you're not a spammer, drop me a note via my Contact Form and I'll respond personally.

Your email address will never be displayed. Please use a name/pseudonym so that it is easier to distinguish between different anonymous comments. Thanks for commenting!