WordPress Theme Design - Getting Started

The most technical part of this whole endeavor will be setting up a 'sandbox' in which you can test your design. If you haven't already I recommend starting by installing WAMP on your computer and setting up a local WordPress blog that you can edit freely without an internet connection. If you're not familiar with how to do this I recommend checking out the excellent tutorial provided by Urban Girafe. Once this is done you'll have a WordPress blog that you can play around with without fear of destroying your main site.

If you can't get WAMP running on your PC then you've also got the option of creating a sub-directory on the server that hosts your main site. If you've setup WordPress once the method is very similar, just create a sub-directory and install a brand new blog there. After it's setup head to the privacy section of the Options panel and be sure that the blog is marked "Private." This will prevent any traffic hitting your sandbox and make sure your design remains private while it's still being developed.

In preparation for some of our later posts you can also create some blank files for the basic parts of your theme.

Template Files Needed for Starting a Theme

Generally speaking you'll need five files when you start designing a new theme. Eventually you'll customize the category, post and page files but for now just the basics are ideal. Head to the themes directory of your WordPress install and create blank files with the following names:

  1. style.css
  2. header.php
  3. index.php
  4. sidebar.php
  5. footer.php

Tomorrow we'll discuss what to put into these files to generate your first (extremely minimal) WordPress theme.

This week I'm going to be trying something new.

Along with my regular posting (which should be back in full swing starting tomorrow) I'll be running a series dedicated to building a custom WordPress theme from scratch. Earlier tonight I started diagramming a basic theme and added some details that I can use to get started. While I didn't spend too much time on some of the specifics the basic blocking is in place and the concept for the theme is pretty well cemented. Today I just wanted to go over some of the beginning portion of planning that was involved.

Finding Inspiration

I've been wanting to do a darker theme for awhile now. Black themes with splashes of color can be really appealing and can make certain aspects of a page jump. After playing around in GIMP for about an hour I came up with the rough design you see below. With a little influence from the Democracy player I found a decent balance for breaking up the content.

There's still some tweaking to be done but as I get into the CSS more of the details will come together. In tomorrow's post we'll start setting up the basic files needed to put the theme together.

Black & Yellow Thumbnail

Matthew left me a message earlier today asking me how I worked out the placement of my PayPerPost buttons at the base of each post. After checking out Cleaker 2.1 (Matthew's theme) I noted two places for the code that might work nicely. Using some of the code from my previous post on using CSS to float images I worked out the following possible setups.
Read the Rest of this post

Using CSS to Hide Long URLs in Your Comments

Daniel, from Daily Blog Tips, found an interesting plugin called WP-Chunk which can truncate long URLS which may occasionally turn up in comments.

For Example,

A URL like:
http://www.domain.com/test/subfolder/x=123/article=id8A133F52D0FD71AB86256C
would become
http://www.domain.com/test/...86C

If you're interested in truncating these long URLs, and don't mind adding a new plugin to your WordPress installation it looks quite handy.

I did want to share a quick CSS related alternative to anyone who wanted to avoid adding to their WordPress install. As you can see both here and on Daniel's post concerning WP-Chunk, the code box allows for scrolling when a URL is too long to fit in it. This is accomplished by adding a small line of code to your CSS stylesheet. You can do something similar for comments.

Simply find the identifier which represents comments and add "overflow:auto" this instructs the browser to turn any element containing long strings to scroll instead of pass beyond the boundaries. Alternately you can also use "overflow:hidden" like I do in my comment section. This allows the long URL to exist but hides it from displaying on the page.

It's not as good a solution as WP-Chunk but it can certainly work for you.

WordPress Conditional Tags: is_single()

I've been working on a template for a new site and recently had to add a special function to the sidebar.

Because I expect this site to see a lot of traffic in the archives I wanted a way to promote the new posts when visitors were looking at old ones. Something I've done in the past, which has always worked nicely, has been the inclusion of a list of the most recent posts in the sidebar. Using a WordPress conditional tag and the WordPress Loop we can setup an item to show off the recent posts and hopefully push traffic through some of the newer sections of the post.

This post is part of a series which will outline the steps you can use to get your recent posts listed in your sidebar. With a little bit of playing around you can also use these methods to accomplish some other goals - but I'll leave that up to you for now. In this post we'll cover the basics of the is_single Conditional Tag.
Read the Rest of this post