It’s been about a year since I first released my original pinup WordPress theme for Digital Masquerade and while I loved my lounging vixen draped over a bold black, red and white design, I decided that it was time for a change. One of the problems with designing my personal site is that before I even have a chance to launch it, I’m sick of looking at it. I didn’t quite know what to do about it that did not resort to start a new redesign of the site every single month. At that rate I would be sick of web design and end up quitting my job.
INSPIRATION
So what’s a girl to do when she wants different looks for her site, but not the work of doing a complete redesign two or three times a year? I took inspiration from David Shea’s site Mezzoblue and his Fountain re-design. With Fountain, he has grouped his postings into collections, and each of those collections has a colour scheme and photo associated with it. When I first saw this I almost wet myself! Now I just had to figure out how to do something similar using WordPress and my inadequate PHP/JavaScript skills. While I was at it, I thought, I may as well also figure out how to implement something similar to Dooce’s photo of the day in my sidebar that would show up in my RSS feed and cross post easily to my Livejournal account.
DESIGN
If you know me, you know I love the 50’s style, especially the gorgeous pinup girls. Instead of using photographs for my collections, I decided to use a different Alberto Vargas pin-up girl as the inspiration for each collection colour scheme. At first I thought that I would run out of girls so instead of four, three month collections a year, I created three, four month collections. Now that I look at my Archives page, however, I will be changing that and adding an additional girl for each year.
I created the background and icons on the site using are a mixture of dingbats and images I created on my own. The look I was going for was a nuclear, 50’s era style.
One thing that I have yet to do is make the PNG transparency work properly in IE 6. I was having some problems getting the hacks to work. I’ll get it done eventually but in the meantime, I would like to take this moment to let the IE 6 people know that IE 7 is out and you should probably upgrade for the security features alone. Better yet you could use FireFox 2 but IE 7 is better then nothing. How do you know if you’re using IE6? This site has horrible gray backgrounds behind the pinups, behind the links or on the sides of the white content area.
WORDPRESS THEME & PLUGINS
In attempting to create this layout, I think I combed through hundreds of other of layouts and about two hundred plugin possibilities. Nothing was ever exactly what I needed, though, and to achieve my goal I had to do a bit of coding myself. I’m not that fluent in PHP and JavaScript so it was quite a struggle for me. I probably spent about 200 hours looking through the WordPress support forums and documentation.
I don’t want to bore you with detailed code on how I created the site, I’m just going to highlight some key points and likely expand on them in later tutorial posts if there is a desire to learn more about them.
- Theme
My starting point was the K2 theme. I liked the Ajax features of the theme, including the rolling archives and comments. I still give credit to K2 but the theme has been heavily modified. For example I removed the rolling archives from all pages with the exception of the front page because I found it made it difficult to navigate through search results, tag pages and archives.
- Collections as Categories
Each collection is actually a category. I know that there are quite a few plugins that allow you to have a different look for each category the ones I found early on just didn’t work for me. So I ended up creating my own type of category driven look formula. It’s messy and if I can find a plugin that does it better, I will likely implement it. For now it works.
- Tags vs Categories
I never liked the idea of creating a zillion categories for my WordPress entries. Instead I’ve installed the Ultimate Tag Warrior and use that to tag my posts. I’m undecided if I want the tag cloud in my sidebar or not. If you have a preference let me know.
- Archives
This was probably the trickiest part of the whole process, creating a WordPress archive page that was driven by Categories and not date. The closest plugin I could find that did what I wanted was the KG Archives plugin. It’s a great little plugin and does a fairly decent job for what I wanted. I did, however have to heavily modify the plugin and use CSS to control the output quite a bit. I’m still unhappy with the end result, however, as I would like to be able to page through the years. If anyone has any idea on how to do this, please share!
- “Dooce” Photo of the Day
I achieved this little baby by creating a Sidebar PHP module that pulls in the excerpt of the last item posted in the Daily Photos category. Each post in that category has a thumbnail linked to the image page as its excerpt and that is what is displayed in the sidebar. I also suppressed all daily photo entries from appearing on the home page or on my archives page so that it was not redundant to the user.
- Gallery2
I still user Gallery2 and the WPG2 plugin that embeds Gallery2 into my WordPress layout for all photos other than my daily photos. Photos from events like birthday parties, festivals etc will be put in there. One off images will likely be uploaded only into WordPress because it drives me a little bit crazy having one off images in Gallery2. I’m anal about how things are organized.
Other Plugins
- Akismet – Catches all my annoying comment spam
- Lightbox 2.02 Plugin – If I post a thumbnail in my post it will open up in lightbox. I still need to figure out how to make it work with images that I post using the WPG2 plugin that pulls my images from Gallery2.
- Livejournal Crossposter – I’ve had a LiveJournal since 2001 I think and to make it easy for friends there to stay up to date with my life I use the LJ Crossposter to automatically cross post my entries. Saves me time from having to copy and paste in two places.
- Wordpress Database Backup – On-demand backup of your WordPress database. Do it often kiddies, especially before you upgrade.
- WP–ContactForm – WP Contact Form is a drop in form for users to contact you. It can be implemented on a page or a post.
- Wp-ShortStat – Allows me to check my blog stats pretty religiously.
I hope that you enjoy the site redesign, I know I prefer it and find it a bit easier on the eyes to read. Let me know what you think and of course if it’s broken somewhere feel fee to shout at me.
