5 tips for professional site themes on WordPress.com

WordPress is a great platform for building a simple website. It’s a featureful and flexible blogging engine and CMS. Even better WordPress.com allows you host your site for free. Reasonably priced upgrades allow you to host your site on your own domain and apply custom CSS. This all adds up to a great tool for hosting even professional sites.

WordPress.com has some restrictions compared to the version you download. Super-cheap, zero-hassle hosting is very compelling though, so it’s worth bending your requirements to fit work WordPress.com’s constraints. I’ve built a few sites this way. The latest, Yakeba, for a Balinese charity, took me just a day preparing images and writing custom CSS. The final custom CSS is not drastically more horrible than a stylesheet prepared for a site over who’s HTML you have full control.

Here are 5 techniques I found particularly useful while building Yakeba:

  1. Using a static home page
  2. Picking the right theme
  3. CSS hackery
  4. Using the classes and IDs in the theme HTML
  5. Widgets

1. Static home page

The ability to create static pages and to use one as a home page is what lifts WordPress from being a blogging engine to being a simple CMS. You can use this feature even on a blog hosted on WordPress.com.

  1. Create a page in the WordPress admin, title it “Home.”
  2. Create a second page, call it “Blog.”
  3. Go to Settings > Reading.
  4. Select “A static page” for the Front page displays option.
  5. Select your “Home” page in the drop down menu for the Front page option.
  6. Select your “Blog” page for the Posts page option. This tells WordPress to use the url from the “Blog” page as an index of your blog posts. It will ignore the actual page content and put a list of the latest posts there.

Any pages you create will automatically appear in your theme’s navigation. If you want more control over the navigation, create a text widget and position it absolutely with CSS.

2. Pick the right theme for custom CSS

WordPress.com’s theme selection is not perfect, but there are a range of different layouts and the themes have good separation of content and presentation. The theme defines the HTML, so spend a bit of time working out which theme has the best HTML for you to start with. For Yakeba that meant the theme had to have 3 columns and navigation links.

Once you pick a theme, you can add custom CSS to either modify that theme a little, to change colours for example. Or you can get serious with the CSS magic and create a new look altogether.

3. Know your CSS

CSS has got steadily better and better since it’s introduction in 1996. Even IE 6 will let you drastically change the layout of a page, create effects like buttons and menus and much more. If you have a good command of CSS, you can create a really excellent theme without changing a site’s HTML. You’ll need to buy WordPress.com’s Custom CSS upgrade, but it’s very cheap.

Here are some examples from Yakeba:

Create navigation menus and buttons with rounded corners

Yakeba has a big donate button on the right side. If you’re sensible and are using Firefox or Safari, you’ll see nice rounded corners. It’s all CSS and degrades nicely to square borders in IE and older browsers.

Here is the CSS I used:

.bigbtn {
    text-align: center;
    padding: 8px 0;
}
.bigbtn a {
    background-color: #060;
    border: 2px outset #090;
    color: white;
    padding: 6px 14px;
    font-size: large;
    font-weight: bold;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.bigbtn a:link, .bigbtn a:visited {
    color: white;
    text-decoration: none;
}
.bigbtn a:hover, .bigbtn a:active {
    text-decoration: underline;
}

Clickable logo with a large header background

The Yakeba header is an image applied with the CSS background-image property. The image stretches the width of the page and contains the logo on the left. The actual header in the theme HTML is the blog name. I hid the text by setting font-size:0; and setting the same colour as the image background. I then hard-coded the sized of the <a> tag linking to the homepage (#header p a) so that it covered the area of the header background containing the Yakeba logo. Bingo, clickable logo.

4. Learn to love WordPress.com’s HTML

The HTML generated by WordPress.com’s limited selection of themes can be frustrating at times. You’re forced to find a “good enough” fit and then work around it. However, there are a broad range of IDs, classes and structures which can use to your benefit if you are canny with your CSS selectors. Some examples that I employed when building Yakeba:

Main content and sidebars

The Fadtastic theme defines a main content area in #content (wrapped by #content_wrapper) and 2 side bars, #side_one and #side_two. These are the main areas of content in the page and the elements you should lay out. I built a simple float layout for the columns and then created vertical separators using a vertically repeating background-image. This is a nice trick if you’re happy with a fixed-width layout. The required CSS is simple enough for mere mortals and IE 6.

Hiding elements to remove content

I hid the footer (mainly because it attributes the theme to someone else!) and several areas of the navigation. Hide elements with display:none; On the homepage I even hid the page title (#post-24 h1 { display:none; }) because I wanted the navigation link text to be “Home” but for the page to have a single paragrah overview in large type. All pages, blog posts and widgets have IDs like this which you can use to apply CSS properties to specific parts of the page.

Lists within lists within widgets

The Fadtastic theme creates widgets as lists and then creates content within those widgets as more lists. Selectors like .side ul and h3.widgettitle, li.linkcat h3 allowed me to grab those lists by the horns and pull them into shape.

5. Widgets are wonderful

Another feature that sets WordPress apart is widgets. Widgets are just little blobs of content that you can add to your theme’s sidebars. Widgets include recent posts, RSS feeds, content from a select few other sites (e.g. Flickr), and, most usefully, boxes of custom HTML.

Text boxes

You can add as many boxes of text (actually HTML) as you need and optionally give each one a title. This allows you to create bits of static content that appear on all pages. Because the boxes can contain HTML, you can create any kind of content and then style it with custom CSS. You can also embed widgets from other sites, which gives you quite a few options for customisations.

RSS feed magic

I wanted to display latest posts in the central column of Yakeba’s pages. WordPress.com doesn’t actually have a widget to do that, but it does have an RSS widget which will display a snippet of each item. Adding an RSS widget and setting the feed url to the feed of the site’s blog gave me enough of what I wanted.

Conclusion

This wasn’t meant to be an exhaustive list of WordPress.com tricks. Their forums have a lot more info. I hope, however, I’ve given you a sense of how much can be done with WordPress.com’s features if you set your mind to it.