Creating a Custom Wordpress Theme - Part Two
Wow, thanks to all who participated in the comments section of my previous post. Cool stuff! On to the next step…
After I get a visual of what I want my theme to look like, I run through the basics of getting it started. I have a subdirectory created at demo site where I host all of my themes that I work on. Both for clients, as well as for the themes I make available to the public.
I do this because I usually don’t like to work on a theme with a live site, because chances are, I’ll run into problems and don’t want to provide a negative experience for my visitors. So I created the demo site, wrote a few posts to show things like blockquotes, ordered and unordered lists, etc, similar to what Theme Viewer does. I also have installed the Theme Switcher plugin, which allows me to enter a url with the theme attached so I can see how it looks.
Once I install one of the themes I generally use to modify, I begin working on making changes to it. For me, it works best if I begin with the style sheet, as the page and post files are already intact. This way when I start making changes to the overall design of the site, I know the functionality is still working.
First off, I change the general layout of the theme - rearrange columns, shorten and widen them per the concept I have in mind. Then I’ll work on colors, mainly focusing on links, titles and backgrounds if necessary. Once I have those done, I start to refine some of the little things, such as the comment styles, footer text, etc. I normally only check the home page as I’m making mods, until I have the theme looking the way I want it.
Once I have the home.php file done, I’ll then go back to ensure that the index.php, archive.php, page.php and search.php files are working as well. At that point, if they are good to go, I’ll begin the validation process. It’s very important (not to mention usually requested) that a theme’s XHTML validates. Using the W3C Markup Validation Service, I see if any of my changes has caused the code to be non-conforming.
Lastly, after validating the code, I perform a cross-browser check. At this point, I check the theme out in Firefox, Internet Explorer 6 and Internet Explorer 7. It’s important before you finish a theme that this process takes place, because unfortunately each browser handles code in a different way, and there are things that need to happen in order to satisfy them all.
Ok, before I go too far, I’ll stop there. I know I ran through pretty quickly, so if anyone has questions about certain things I do, processes I take, or anything else in general, feel free to ask!
How do you check your pages in IE6 and IE7? Can you run both on the same computer?
Tell me this too, why do you not release your old personal blog designs as themes once you’re finished with them?
Armen, I actually have two computers, one with IE6 and one with IE7, so I do it that way! As for my previous themes, I actually have. Before this, it was something VERY similar to Dropshadow, just a different color scheme, the one before that was Candyapple, just too heavily modified to go back and make it simple to release, and the two before that we actually Blue Zinfandel and Vertigo!
Part two is excellent. Hey, btw, I really like the modern paper theme, any chance of seeing it’s release soon?
Hey Brian. It’s always nice to see a theme developer willing to delve deep into explaining the process.
I’ve written my own tutorial series. See if it’s any help to you.
Hi,
Wow ! I was just about to add Small Potatos tutorial series as a comment and I see he has beaten me to it!
It is excellent to get another perspective so I intend on keeping up with your series to see how you work. I would also recomment Small Potatoes tutorial series as an excellent starting point. Through his series I learnt a lot about php and css.
Thanks for the series Brian.
Guys, thanks for the response, and SP, thanks for dropping a note. I also left a comment on your recent post, and think that you are a great asset to the WP community!
Chris, the Modernpaper theme is going to be released in the near future, but you won’t see it here. It’s going to be released by a bigger, more powerful website than mine. If you can connect the dots, you should be able to figure out where!
Brian and all,
I saw that someone mentioned above about how to check in IE6 and IE7.
Brian suggested 2 computers, but I know that that was not possible for me, so I found another way.
http://tinyurl.com/2zczyy
It’s an executable that installs multiple versions of IE on your computer. Just install the latest version if IE (7) on you computer, and you can use this program to install previous versions (back to IE3 if you can believe it) and test that way.
It’s one of the most useful tools I’ve ever used.
Nathan
I’ve redesigned my wifes blog to be more ‘ad friendly’. It’s all adsense at the moment, but that’ll change soon I suspect. Criticism welcome.
Hi, I am using your advice, and trying to use blue zinfandel as a base, because it is a clean design.
ALL I wish to change in the layout initially are the dimensions (say left bar: 150px, content: 400px, right bar 140px). Changing that in the CSS create a mess, especially in IE. I have changed all width’s, even changed dimensions of some graphics to match the new (smaller) width, but to no avail.
Whatever I try, There seems to be no way I can get the desired layout correct, CSS is just not “listening to me” in FF, IE and opera
I even toyed with the !important hack I read about somewhere but no luck.
what’s the catch here?
thanks, and keep up the good work, I enjoy reading your posts!
Ron
Again thank you, this is most helpful. I’m going to get steps one and two into action later tonight when I have a bit more time. I’m completley new to blogging and all this “stuff” so I appreciate the help that I have found by the WP community, great work!