WordPress blog design checklist and walkthrough

Sure you can sift through 1,000 of free WordPress templates, but nothing compares to a custom blog design that differentiates your company or matches your existing website. Recently a past client of mine recontacted me for a custom WordPress blog design, as an effort to help promote and expand her online presence as a children’s book author and child development speaker/writer. While designing the blog [view source file] I decided to make a checklist for future custom blog designs of all the various elements to design and consider when dealing with a standard WordPress template.

While each blog design will vary from project to project, below are the basic areas and elements to consider when designing a custom WordPress blog, along with images of my client’s new blog.

The header

While a header seems like a pretty typical area to always include in a blog design, a few things to include in the header area include:

  • Logo/name of the blog
  • Tagline
  • Navigation
  • Subscription and social networking buttons
  • Search box

Also when designing elements such as the navigation, consider things such as rollovers and image sprites and how they will look and interact.

Main content area

This area typically requires the most attention, as there are various areas and elements to be considered. To keep things a clearer I broke down the main content area:

Text/copy styles:

  • Titles of each post (H1)
  • H2, H3, H4, H5, and H6 subtitle styling
  • Paragraph text, address and preformatted text
  • Quoted text
  • Ordered lists
  • Unordered lists
  • Bold, italic, underline and strike-through text
  • Hyperlink color/rollover
  • Image styling (ie: border color/thickness)

Post meta data:

  • Comments
  • ‘Published on’ and/or ‘publish by’
  • Excerpt text (ie: Continue reading »)
  • Tags
  • Categories

Page/article navigation:

» Excerpt text (ie: Read more »)
» Page navigation links

Page and individual article appearance:

  • How many posts will appear per page
  • How each post will be divided from the previous and next post

Sidebar(s)

This area will most likely be the most unique from blog to blog. From single sidebars to double sidebars to sidebars with sidebars this is where you can get creative and also add great functionality to a blog. Here are things to consider when designing or choosing sidebar items:

  • Social media links
  • Subscription links (RSS/Email)
  • Info about the blog
  • Search functionality
  • Categories
  • Popular articles
  • Most commented articles
  • Flickr photo stream
  • Recent news
  • Twitter update(s)
  • Advertisements
  • Recent posts
  • Blogroll (other blogs you like)
  • Links
  • Email forms
  • Contact information
  • Archives

Comments

Intrigue visitors to comment by having a well designed comment area. When designing the comments section consider the design and layout for:

  • The number of comments on the post
  • Gravatars
  • Anonymous reader icons
  • Data and time of comment
  • Hyperlinks within comments
  • Persons name/handle
  • The authors reply in the comments (make it stand out from the readers)
  • How the comments will be separated from the previous and next comments
  • What number comment they are reading (ie: 2 of 15)
  • Text styling

‘Leave a comment’ form

  • Fields you would like the commentor to fill out (ie: name, website, twitter, message)
  • Submit button
  • Subscribe to comments by RSS
  • Notification of comments by email
  • Mandatory field indicators (ie: *)
  • ‘Remember me’ check boxes
  • Comment ‘preview’ button/option
  • Bot prevention question field
  • Text styling/formatting for user

Footer

The footer is another area that you can get creative with if you like or just leave room for copyright information. Here are some things to consider:

  • Copyright info
  • Navigation
  • Contact info
  • Social media links
  • Resources
  • ‘Back to top’ scrolls
  • RSS and email subscribe options
  • About info
  • Hosting info

Other information to consider

If I’m handing off the PSD file to be coded I also like to include an instructions file that includes information such as:

  • Background repeats (ie: repeat-x, repeat-y)
  • Posts shown per page
  • Line height of text (ie: 1.5em)
  • Line height of lists (ie: 1.75em)
  • Rollover information for buttons, images and text
  • Visited, inactive and active link color
  • Lettering spacing (where/when needed)
  • Image border thickness (ie: 3px)
  • URLs to all links (if your developers are setting that up)
  • Any jQuery plugins
  • How many posts show show in the sidebars “Top Posts”
  • How the ‘Read more’ should be stated (ie: Continue reading this article »)

While the blog is still being developed by WPCoder, you can view the entire image source file until then. Will update with link once theme is up and live.



Discussion and Comments

+ Add to the discussion
  1. Looks great! Nice work!!

  2. Nina says:

    I find I keep coming back to this article! Thanks so much. Great post :)

  3. samantha says:

    Excellent check list. really appreciable work. Thanks

  4. linkslondon says:

    You got an amazing list Brian. Will surely help this to my wordpress blogs. I have tried some in the past few days and I think I’ll try yours this time and see if it’ll work out fine. Thanks Again!

  5. Jack says:

    Hi Brian,
    That’s great you shared about the wordpress blog design.
    I got it informative and I have bookmarked this page. Well, Thanks for this wonderful stuff.

    Jack

  6. Ken Enlarge says:

    I find I keep coming back to this article! Thanks so much. Great post :)

  7. plus, i have a question. you seperated each part. does it really necessary or you just do this to be more understandable?

  8. Brian says:

    Tucker,
    This was done only for the sake of the article. All “separate” pieces were part of one PSD file.

  9. Logo Design says:

    its great i thanks to you for share basic knowledge of wordpress i learn much more please more post like it

  10. excellent walk through. very helpful especially for beginners. Thanks!

  11. Xain says:

    I really appreciate you for your work Brian.

  12. excellent walk through. very helpful especially for beginners. Thanks!

Brian Hoff
About Brian Hoff: Designer, Writer and Speaker

I’m a graphic designer living in Brooklyn, New York who loves creating compelling and useful websites and memorable interactions across the web. When I’m not designing I can be found writing, speaking and occasionally part-time teaching at colleges — all on the subject of design. I started this blog to share my passion and experiences with designers and clients. I'm most active on Twitter; say hello:


POWERED by FUSION