• My First WordPress Theme Design

    I’ve tinkered plenty with WordPress and hacked various aspects of existing themes. And now I’ve gone all-the-way! The Summer Cabaret web site is now live, and happily running in WordPress.

    My first idea was to hack an existing theme and adapt it to match my visual design. The themes from plaintext.org are excellent, and simple enough that I though they would save me a lot of effort. But in the end I started mostly from scratch, especially with the CSS file . WordPress themes are a collection of php files that define what elements appear on the main page, header, sidebar, footer, single post pages, search tool, comments, and other generated WordPress pages. And a style sheet that makes them all look good. So where do you start?

    SUMMER CABARET 2007 ANNOUNCES SC07: THE VOTEI started by taking a generic WordPress theme, based on one from plaintext.org. I grabbed the html from the generated page and made a local html document. The static page gives me something that I can apply styles to and easily see what it will look like. I worked in Dreamweaver just as I would with any other static page. As I worked through the page I regularly came across some area where I needed additional and/or altered structure on the page. Then I’d go dig into the PHP files, make an alteration, regenerate the page, save it locally again, and continue working on the CSS. For instance when I started the Search box was in the sidebar, but I wanted in in the upper right of the screen, in the header area. So I cut it out of sidebar.php and put it in header.php along with the necessary DIVs and other elements.

    For site functionality I am using Akismet, WP-Polls, auto-hyperlink URLS , and fold page links (for collapsing navigation menus) currently. I’m looking at some mail list plugins too, but haven’t quite found the right thing yet. They need a mail list management type thing — I found one that interfaces with MailMan which looks promising. And I will use Falbum to manage photo galleries, which will be posted in Flickr.

    I am also using Nifty Corners, in part because I like the way it works in my visual design, and in part because they’re cool from a programming perspective. And they look good — at least in Firefox and Safari. At the moment there is something going on and IE 7 doesn’t display them. I think it may have to do with where I have a div with Nifty Corners inside another DIV. I’m leaving it for now, as the design is OK without them–if I get time I’ll mess with it later. I also had an issue with the right nav bar and an unordered list in Safari. The nav bar is floated and Safari does wonky things with the bullets in this situation. So I dumped the bullets, and added a background to the #sidebar a {} tag. This fixed the display issue with Safari and cool rollover stuff with the fake bullets.

    I’m volunteering my design services, so I didn’t really keep track of design time. But I think its an honest 8 – 10 hours so far, and the design is pretty much done. There is quite a bit of content to add, but that should go pretty easily now — although I expect I’ll need a couple of tweaks to accommodate unforeseen content issues. I also hope that staff at Summer Cabaret will be able to take control of the content and after a little introduction be able to take the ball and run with it. So while the setup may be a little more than your average static site, I expect that the up-front investment will pay off. And I really like the way the site is working, and I think the client does too!

    Summer Cabaret ยป Pick our 4th Show

    Related Posts

    Tags: , , , , , , , , , , , , ,
  • Author: Randy

    In my day job I serve as Information Technology Director for the Yale School of Drama. Otherwise I garden, play guitar, build stuff out of wood, take photos, play around with technology and have been blogging since 2003.

    Share on: LinkedIn

    Stay Informed!

    Did you enjoy this post? Then subscribe to my email newsletter and have the daily posts delivered directly to your inbox. Enter your email address here:

    ADD YOUR COMMENT
    Comments are moderated.

Welcome to RodeWorks

Randall Rode's online home for thoughts, notes, and experiments with a wide range of technology topics. Visit the about page for info on my recent projects and professional background. I welcome your comments!

  • Recent Comments

  • Coming Soon

    New articles are normally posted on Mondays and Wednesdays. Subscribe to the RSS feed or the email update to keep current on the latest posts.

    Site Topics