About agtb.net v2

How I built this website in WordPress and the decisions I made during design and development.

I’d like to talk a bit about some of the more interesting work I’ve done recently on, agtb.bet, my personal website. I don’t want to fall into the trap of blogging about blogging so I’ll just highlight things I like and give a tip of the link-hat to some of the technologies I’ve used and liked.

WordPress Theme

I’m using my own custom WordPress theme for agtb.net. I started, as usual, when I develop WordPress websites by hacking the ubiquitous default WordPress theme, Kubrick, into shape.

I have developed websites using themes designed for rapid development such as Sandbox, but I found the amount of extraneous cruft to be a time sink to remove. Kubrick has, what I would consider, a lot of junk (e.g. pixels for text layout, repeated CSS selectors, no obvious order) in the CSS stylesheet and custom functions but I like the overall website layout.

WordPress Plugins

Aside from the usual plugins WordPress needs to function properly (caching, spam blocking, SEO) the one plugin I usually install first is Pathless Category Links. It simply removes the ‘category’ level of the website for posts, which I think pollutes the website’s URL structure.

I’m running my own plugin to automatically add meta description tags, which can be used by Google for descriptions in search engine results pages, to the pages on agtb.net. I’ll be developing and releasing this and other WordPress plugins soon.

Techniques

CSS Typography

One CSS technique that I like and have used here is sizing text by ems after normalizing.

The idea here is that Web browsers default to a medium text size of 16px. So by resizing that to a useful number (10px) it is then possible to define size by ems based on that value and so use relatively resizable text.

body { font-size: 62.5%; } /* (16px @ 62.5% = 10px) */

Now simply set a legible text size for the main container element:

div#content { font-size: 1.2em; } /* (approximately 12px by default) */

jQuery Validation of Comment Forms

I wanted a clean and clear way to highlight any errors preventing submission to users of the comment forms at agtb.net. The default WordPress action is to take the user away to a new page listing problems, which seems awkward.

I’ve used jQuery with the Validation plugin to validate the comment forms. The default actions of jQuery: Validation are good and very quick to implement. After including jQuery in WordPress and appending a class of required to <input> elements the plugin inserts a <label> for each field to notify the user of the form’s requirements.

I wanted to notify the user of any problems by highlighting the fields and listing any errors clearly at the bottom of the form. Thanks to the good quality Validation plugin documentation I had soon added custom highlighting, messages, and error placement. To see this in action try submitting a comment without entering a name, valid e-mail, or comment. It’s a pleasure to use mature projects like jQuery:Validation.

Graphics

I do my own graphics whenever I can. I enjoy keeping my Photoshop and Illustrator skills keen and find that if I don’t use them regularly I can get a bit rusty. I’m not a graphics artist by trade so I lack a certain creative flair but I have a eye and attention for detail.

I’ve also used or tweaked some icons from the excellent Silk Icons package on agtb.net. There are probably enough good quality icons there to create your own Operating System.

XHTML and CSS Validation

Once the majority of development has been done it’s time to validate the HTML and CSS. I usually do this at the end of introducing a new feature because writing standards compliant code comes naturally. I find validation is useful for revealing mistakes such as missing HTML elements depending on the PHP path taken or the occasional typo.

I changed the DTD from XHTML 1.0 Transitional to Strict. To comply with Strict I only had to remove a few non-standard HTML attributes left over from the Kubrick theme.

You can validate this page and the website CSS with the buttons below. I also display validation buttons at the foot of the page so you (or I) can quickly check my code is standards compliant.

Development Workflow

I use Eclipse PDT (Ganymede) as a PHP editor with the Subclipse plugin for Subversion version control using a repository hosted at Dreamhost. I’m using XAMPP as a local testing server. And life is good!

I use a pretty standard repository layout of trunk/branches/tags directories for the agtb.net theme. I’m planning on using the vendor branch pattern for the WordPress core but the frequent security updates would probably be an unwelcome chore to integrate. I keep all website images under version control. Checking out and committing however run quite slowly so I export the website files via SSH on the Dreamhost server.

The rest is Firefox, Firebug, and Photoshop or Illustrator before switching back into Eclipse.