Archive for wordpress tag

Five steps to blog (re)design

For some time I’ve wanted to refresh the design here at damieng.com which evolved out of the Redoable theme with my own tweaks to colours, typography, images and background until it was almost my own.

Almost, but not quite.

As an engineer I prefer incremental improvement over a complete redesign but I was at the point where the code-base (HTML, CSS and PHP) was unworkable. Partly my fault, partly the sheer complexity of a general-purpose theme with wide-ranging plugin support I didn’t need.

These are the steps that helped me get to a  clean minimal code-base that did exactly what I wanted and would like to share the experience for friends about to go through a similar process.

1. Decide on a layout

Layout of DamienG.comGetting layouts right across browsers can be tricky.

Thankfully a number of individuals have put together a number of reusable CSS frameworks that provide grid-based approaches to layout, compensating for differences in browser defaults and including some minimalistic styling.

These let you hit the ground running but they are not complete themes unless you’re into minimalistic design.

I’m not a fan of fixed-width sites that contribute to the years of wear on my scrolling mouse finger so settled on the Fluid 960 Grid System which scales a 12 or 16 column grid system out to the full browser width while being incredibly easy to use and tweak.

At this point you’ll want to copy the CSS they provide into your own development folder and take the existing HTML sample page and cut it down to the bare minimum of <head> and its necessary <link…> elements to setup the CSS plus the <body> and any intermediate child elements required to get the basic structure in place.

Now think about how many columns each section needs to cover and whether it should continue taking columns to the right or whether it should start on a new row after the existing section has finished.

Given I wanted the layout shown above I needed just three containers – the primary left area (red) would span 12 columns and would contain the branding, navigation and actual content. The right area (blue) would span 4 columns and contain the sidebar. As I didn’t want my footer too high on pages with small amounts of content I created another section (not pictured) that also spanned 12 columns but would appear after the content in both sections. Simply:

<body>
<div class="container_16">
   <div class="grid_12">
       <a href="http://damieng.com/" />
       <ul class="nav" />
       <div id="maincontent" />
   </div>
   <div class="grid_4" id="sidebar" />
   <div class="clear" />
   <div class="grid_12" id="footer" />
</div>
</body>

2. Add your content

Unless you’re planning on throwing away any of your content (not recommended if you have it), now is the time to drop in actual content, navigation and any chrome. At this stage real static HTML content is best – the combination of PHP, remotely uploading files and hooking in to dynamic content can really slow you down while you are trying to get the basics sorted.

The easiest thing to do here is to just view source a page on your blog and copy out the required blocks. For me this was:

  • Two blog posts from the main page, they sit in the maincontent div above, each contained within a new <div class=”article”> so I can provide article-specific styling
  • A brand new set of nested navigation elements created by hand based on the page structure – initially two levels deep to support the drop-down CSS menus
  • My five sidebar elements – Search, Stay in touch, Topics, My most popular and Interesting finds

Bear in mind that you are going to need to keep the structure and content of your existing pages and articles unless you have the time to either go-back and edit each one or apply some bulk-changes via SQL UPDATE statements. For me, this meant keeping my post sub-headings as <h3> and sticking with my class=”alert”, class=”code” and  class=”download” blocks I use for notifications, code snippets and downloads which required bringing some CSS elements in from the old theme.

3. Style the page

Design inspiration can come from many places – here are some best-of designs, portfolios and showcases to draw from:

Now you have some basic HTML and CSS displaying real content it’s easy to see what works and what doesn’t with minimal resistance to experimenting.

I was happy with the existing look and I plan on further tweaks now my code-base is easy to understand so for now took the basic colours, background and icons then adjusted the layout, spacing, positioning, wording and elements like the content metadata. This was also an opportunity to experiment with some CSS techniques available but considering CSS3 browser support is limited right now I kept this to:

  • @font-face for headings – Font Squirrel have a great set of @font-face kits including fonts with the CSS snippets
  • text-shadow for headings and hyperlink hover-overs to achieve a glow effect
  • border-radius for curved blocks and navigation bar (also used prior to the redesign)
  • JavaScript to upgrade the search-box from type=”text” to type=”search” in Safari

The result is something that looks quite unique on Safari and Chrome yet still looks good on Internet Explorer 7.

4. Convert to a theme

Now our CSS and HTML looks great as a single page we need to create a theme for the blog engine. This consists of several specially-named files to dynamically construct the page as required.

You can build this from scratch but a basic theme like Starkers ‘naked’ WordPress theme is recommended. Merge the layout and style of your theme with the dynamic tags that drop in content, navigation and titles in from the basic theme. A quick start would be to modify:

  • header.php with your HTML up to opening your main content div but:
    • remove <link type=”text/css”> elements to the CSS and replace with the one line <link> from the theme
    • replace the static navigation elements with a call to a function to dynamically build it such as <?php wp_list_pages(‘depth=3&title_li=’); ?>
    • links for shortcut icons and ensure they point to files that exist, you don’t want to be serving up 404 error pages every time
    • meta tags – take the dynamic ones with <?php?> elements (content-type, description etc). from the theme and merge them with your sites existing ones if you have any
  • sidebar.php with your HTML from closing the main content div through to closing the sidebar div
  • footer.php with your HTML footer div (and in my case the preceding clear div) through to the end of the file
  • single.php with your HTML that appears around each article with the necessary tags (like <?php the_content(); ?> taken from the naked theme)
  • style.css with relative references to your CSS files and your new metadata, e.g.
/*
Theme Name: DamienGNew
Theme URI: http://damieng.com
Description: Minimalistic theme based on Fluid 960 Grid.
Version: 1
Author: Damien Guard
Author URI: http://damieng.com
*/
@import "css/reset.css";
@import "css/grid.css";
@import "css/damieng.css";
@import "css/navigation.css";

Rename the theme folder and upload it to your blog in the right location – for WordPress this is wp-content/themes.

5. Test drive, tweak, rinse and repeat

Now you want to test the theme without interrupting the existing one so don’t go and set it to be the default just yet.

If you are using WordPress a few tips:

  1. WP Super Cache enabled sites – check Don’t cache pages for logged in users so you don’t see cached pages in the original theme pages or serve up pre-cached new themed pages for other visitors
  2. Theme Test Drive – lets you specify a new theme and what access level it applies to (e.g. 10 for admin) so you will see it while you are logged in for testing
  3. Page templates –  leave them to last as WordPress will try to use them in the default theme too
  4. Keep an eye out for error_log files – they contain details of when pages failed

It’s worth testing your site in popular browser and operating system combinations from your own analytics or you don’t have any of your own stats check out usage share of web browsers at Wikipedia. The major engines are:

  • Internet Explorer (Windows)
  • WebKit (Safari on OS X, Chrome on Windows & Konqueror on Linux)
  • Gecko (Firefox cross-platform & Camino on Mac)
  • Opera (cross-platform)

Bear in mind that each browser can behave quite differently between versions – Internet Explorer 6 will likely render quite differently to 7 or 8.

Sites like BrowserShots can help by rendering your page on a multitude of browsers for you and present screen-shots (once the theme is live) to compare. Validating your HTML and CSS is a good idea because the errors and warnings it spots are the likely cause for odd rendering problems.

Now you see a single blog post rendered it’s time to go through the rest of the files and apply the same merging process before you sit back, smile and make your new theme the default.

[)amien

WordPress 2.5 notes from the field

It’s been a few weeks since I upgraded to WordPress 2.5 and whilst the upgrade went well it hasn’t been all plain sailing.

New and changed

Manage files removed

The Manage > Files administration function has been silently removed despite still appearing in the on-line documentation.

If you don’t have FTP access this was the only way to modify your .htaccess and other important files without installing additional software. I can understand such a powerful function could be abused but an option to turn it back on or even a warning about its removal in the upgrade notes/read-me would have been useful.

Hopefully somebody will repackage the old functionality into a plug-in.

New look administration

I’m not sold on the new administration theme look but Dean J Robinson has crafted a plug-in called Fluency that refines the styling.

Generally usability in the administration user interface is better, the write post screen makes a lot more sense and the category & tag management is more logical.

Auto update plug-ins

I love this new feature, it shows you when a new version of a plug-in is available and then lets you automatically update. It isn’t without issue however, specifically it:
Screen-shot of WordPress 2.5's automatic plug-in upgrade feature

  1. overwrites modified local versions without warning
  2. may go wrong (it “upgraded” my wp-PostViews to wp-DBManager)
  3. does not provide a roll-back or revert facility

Still it’s a v1 feature and I’m sure it’ll get some refinement in 2.6.

Compatibility

Live search broken (Redoable theme)

The Ajax-enabled live search is broken in Redoable although the normal search works. There have been no signs of an update in quite despite an un-patched HTML injection vulnerability.

Gregarious

This social bookmarking plug-in is broken in 2.5 and the author is too busy to fix it right now and the search for an alternative led me to Joost and his Sociable plug-in.

I’m not 100% happy with the output from Sociable right now but that can wait until my new theme is finished.

Other tweaks

These weren’t caused by the 2.5 upgrade but once you start messing with one thing there’s always that urge to fix other things you know aren’t right.

Google Analytics

Whilst testing my site I found XHTML compliance was broken. It turns out that Joost’s Google Analytics for WordPress incorrectly rewrites the hyperlinks when they parent another element such as an image. Putting on my PHP hacking hat I managed to fix it by editing the plug-in and changing the last line of ga_parse_link to:

return '<a '.$matches[1].'href="'.$matches[2].'//' .$matches[3].'"'.' '.$coolBit.$matches[4].'>'.$matches[5].'</a>';

Subscriber counts

My feed subscriber counts have been bugging me for a while as they jump up and down seemingly at random. In fact, it can be traced down to two things:

  1. If you base it on less than 5 days of activity you’ll get the weekend dip
    Solution: Count 7 days worth of individual subscribers
  2. Google Reader etc. sometimes stop passing the subscriber count from time to time
    Solution: Use single most recent multi-subscriber header for each service/feed in the last 30 days

If you want to do the same you need to edit the Feed Statistics plug-in and change the how_many_subscribers function to:

$q = "SELECT subscribers, CASE WHEN subscribers = 1 THEN identifier ELSE CONCAT(identifier, feed) END AS ident FROM ".$table_prefix."feed_subscribers  WHERE ((subscribers = 1 AND
	date > '".date("Y-m-d H:i:s", time() - (60 * 60 * 24 * get_option("feed_statistics_expiration_days")))."' ) OR 
	(subscribers = 1 AND LOCATE('###',identifier) != 0 AND 
	date > '".date("Y-m-d H:i:s", time() - (60 * 60 * 24 * get_option("feed_statistics_expiration_days") * 3))."' ) OR
	(subscribers > 1 AND date > '".date("Y-m-d H:i:s", time() - (60 * 60 * 24 * 30 * 3))."' ) )
	ORDER BY ident ASC, date DESC";

This should help but it’s not ideal with individual readers counted more than once if they change IP and groups counted as one if they are sharing an IP/NAT.

[)amien

My favourite WordPress plugins

I’ve been asked what plugins I recommend for WordPress so here’s the ones I currently use. Some of them require work in your theme – I started with the Redoable 1.2 theme which supports many of them.

Akismet

Probably one of the most well-known plugins for WordPress this little wonder screens all comments for spam using the Akismet web service. Get a key to access the service by signing up for a at WordPress.com and then configuring it in Plugins > Akismet Configuration.

Feed Statistics

I’m don’t want my subscribers in the control of a third party but I do like FeedBurner’s subscriber counts and analysis tools.

The Feed Statistics plugin provides a small subset of that functionality, the important one being a subscriber count which I now show in the sidebar. I went with a 3 day count configured from the Feedin WordPress admin.

Google Analytics for WordPress

There are a bunch of Google Analytics integration plugins out there but Google Analytics for WordPress apears to be the one currently using Google Analytics New Tracking Code ga.js instead of the old Urchin one. This actually uses a new URL and technique that hopefully won’t be blocked by so many viewers and also promises access to exciting new features as they become available…

Google Reader widget

I’m still in love with Google Reader especially since they added search to it (quite how they forgot that I’ll never know). One of the great things is that you can share your stories with your friends or better yet expose it as another RSS.

Google Reader widget adds a sidebar widget to show the stories you have chosen to share in your sidebar so no need for the annoying link-list posts (unless you need to add opinion or commentary of course). Configurable via Plugins > Google Analytics.

Gravatars2

Blog that don’t allow comments don’t get onto my Reader list without a fight. Without comments a post can’t be trusted – the author isn’t interested in any other opinions or thoughts.

Gravatar is a great site where you can register a picture with your email address so any site implementing Gravatars will show it next to your comments. In no time you’ll start recognising faces and pictures and decide if you want to check out their blogs too.

The Gravatars2 plugin puts those images next to the people who comment on your blog and can helpfully cache them locally for you given permission. It is configured from Options > Gravatars and the cache managed from Manage > Gravatar Cache.

Gregarious

Social bookmarking is incredibly popular through sites like Digg, StumbleUpon, Reddit, Delicious, Technorati, Windows Live Favourites or plain old email.

Gregarious takes care of providing links to submit your posts to these sites at the whim of a passing viewer. You can configure it in Options > Gravatars to choose the sites you want (I added DotNetKicks with a URL of http://www.dotnetkicks.com/kick/?url={url} ) as well as emailing you when a post is dugg and draw those famous little ‘n diggs’ yellow buttons.

Related Posts

Problogger’s Darren Rowse recommends interlinking posts to keep readers on your site and interested.

Related Posts automatically provides a list of likely related posts & pages based on keyword matching.

StatPress

Google Analytics is nice but the stats tend to lag a bit behind and sometimes you want to know what’s happening right now.

StatPress collects and reveals interesting real-time stats on Dashboard > StatPress including per-day & month counts of visitors, pageviews, spiders and feeds as well as recent hits, search terms and referrers. It also shows some visitor analysis and an interesting spy mode that shows recent visitors path through the site including how they got there.

My only complaints are that the MySQL database grows quite quickly and the analysis pages are slow. This is most likely caused by logging and analysis of raw data. Still it seems a lot less resource hungry that FireStats.

WP-PostRatings

An attempt to get quick feedback on what posts people are finding interesting and which aren’t with a simple star-rating next to each post.

Through no fault of it’s own WP-PostRatings has failed rather miserably here with few people wanting to click a star to rate a post. Will be dropped in the redesign.

WP-PostViews

Another visitor-retention seeking effort. By presenting the most popular content in the sidebar I’m hoping to entice people to look at a couple of other posts and hit the magic RSS subscribe button.

WP-PostViews records the stats and provides a method to get the post stats out you can put into your theme but most importantly comes with a widget to render a sidebar full of your most popular content.

[)amien

Notes on the move to WordPress

The change to WordPress from Subtext went without major hitch. This was great considering I was tweaking the design and articles right up to going on holiday (I wouldn’t do this in a professional environment but my blog is a sandpit for such dare-devil risk taking ;-)

Here are my notes on the experience.

Spam

Akismet is good but I prefer the invisible captcha that Subtext was using. I’ve gone from dealing with 1 rogue spam a month to 1-2 held for moderation a day.

View counts

The WordPress import format doesn’t deal with view counts. I wrote a query against Subtext to list them, a query in MySQL to identify article numbers then manually executed

UPDATE post_meta SET meta_value = meta_value + 123 WHERE meta_key = 'views' AND article_id = 456

For every article replacing 123 with Subtext’s view count and 456 with the WordPress article id. As my blog was previously on Blogger.com which doesn’t provide view counts they are a year or so lower than reality.

Preserving links

I chose a custom permalink format of /blog/%year%/%monthnum%/%day%/%postname% which gives http://damieng.com/blog/2007/10/01/first-of-october for posts. This is similar to the old format of http://www.damieng.com/blog/2007/10/01/first-of-october.aspx but obviously has the file extension and www dropped. Apache’s .htaccess file made redirecting the old links a breeze which was important to me as my blog suffered big drops in Technorati and Google when I last moved from Blogger.com to Subtext. The required lines to achieve this, redirect /blog/ and keep the RSS going were:

RedirectMatch permanent ^/blog/archive/(.*).aspx$ http://damieng.com/blog/$1
RedirectMatch permanent ^/blog/$ http://damieng.com/
RedirectMatch permanent ^/blog$ http://damieng.com/
RedirectMatch permanent ^/blog/rss.aspx http://damieng.com/feed
RedirectMatch permanent ^/blog/Rss.aspx http://damieng.com/feed

Editing

The default editor is fast and for the most part okay although it lacks the ability to change from the default paragraph tag to headings, preformatted blocks, blockquotes etc. It also very annoyingly tries to be helpful by turning carriage returns into new paragraphs which would be fine if it was clever enough to leave <pre> blocks well alone.

Steve suggested FCKeditor which is very slow at initialising on my machine and also tends to really mess up my HTML :(

Going forward

There are still a number of things I want to do including further deviating from the Redoable theme. Lightening up the look somewhat perhaps with some soft gradients and alternative typefaces will go a long-way. I’ll also want to do a proper logo at some point as soon as I can decide what it should look like.

Being that WordPress is a higher visibility target Phrixus suggested hiding the wp-admin directory as an extra level of protection against automated vulnerability/brute-force attacks which I shall also try.

I need to speak to GrinGod about the download counting mechanism he mentioned too.

The original Blogger.com content from a year or two ago will be phased out/removed as it would appear it dilutes my page rank having almost-identical content elsewhere not to mention messing up traffic stats etc.

[)amien