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.

REST provides a set of architectural constraints that, when applied as a whole, emphasizes scalability of component interactions, generality of interfaces, independent deployment of components, and intermediary components to reduce interaction latency, enforce security, and encapsulate legacy systems.

Roy Fielding’s doctoral dissertation surveys architectural styles for building networked hypermedia systems and introduces the REST architectural style. Fielding was one of the original architects of the web and his dissertation attempts to describe “the model for how the modern Web should work”.

Designing web applications is a complex task. Each application has a number of requirements and there is a huge range of possible approaches and toolkits available to help software engineers meet those requirements.

Fielding surveys architectural styles, a very high level of abstraction describing the bits of a running networked system and how they fit together. He then describes REST, a style designed to maximise the required properties of a networked hypermedia system (i.e. a world-wide web). It’s almost like a memoir of the construction of the web, an explanation of rationale.

The REST style is incredibly elegant. It simplifies so much that it almost seems invisible.

• Resources are named by urls.
• The big 4 HTTP methods GET, POST, PUT and DELETE are the only operations used on resources.
• Systems are built as clients, servers and connectors (proxies, caches, etc) speaking a common protocol, HTTP.

The properties introduced by these constraints are:

• Performance, both absolute and user-perceived.
• Scalability.
• Simplicity.
• Modifiability.
• Visibility.
• Portability.
• Reliability.

These are obviously very nice properties for a system to have. Visibility is especially interesting and subtle. Use of the HTTP protocol’s simple verbs and request and response structures allows the effect of individual requests to be well-understood and verifiable and intermediate tools (such as caches, proxies or transforming middleware) to be constructed easily.

Writing to your reading list

If you are developing web applications, I recommend Fielding’s dissertation as a summary of styles and as a description of the REST style.

Architectural Styles and the Design of Network-based Software Architectures

I also found the Wikipedia entry on REST very useful, particularly the grid of HTTP methods and their effects on various types of resource.

Stefan Tilkov has a nice article which lists some REST anti-patterns. It defines REST by subtracting what is not REST. An informative approach.

Finally, you may also be interested in Fielding’s presentation at Railsconf Europe last year, entitled “The rest of REST.”