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.
What other items would you add to the checklist above?
Thanks for the list! I’m in the process of designing/coding my first Wordpress theme for my portfolio. I’m learning a lot in the process and definitely touching up on my CSS skills. Thanks a lot!
I very much appreciate the time you put into this and of course for sharing it. Ideal timing.
Thanks for posting this Brian! I think this is a good checklist for the wire framing stage, actually. That way, you already know what you’ll need to style!
This list is fantastic! Thanks so much for putting it together. It’s perfect timing for me, too, seeing as I’m working on my own wordpress site right now.
Nice list. I’ll be working on a similar list soon. I bookmarked this for future reference. Thanks for taking the time to put it together.
I have been working on integrating word-press within a fresh custom design from scratch.
And I am about to get to the point of doing the comments and I want to be able to style these similar to how I have seen others do.
Thanks for the tips it came at the right time…
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
This is a great checklist, Brian. Creating your very first wp theme can be overwhelming–this list makes it bearable. I like how you’ve broken it down into all the little details one might overlook when designing a wp theme.
The implementation of the theme is one of the most difficult, but fulfilling adventures too. Might I suggest that if your readers liked this article they might also like this article:
“Build your first wordpress theme with 4 easy-to-follow tutorials”
Thanks for the checklist. Definitely getting bookmarked.
thanks for this article, I’ll use it as a reference.
I saved the text only and printed it out!
Great checklist, and it has application beyond even WordPress sites. These are common elements of nearly any web site.
Great indepth post!
I think its a good idea to have a ‘checklist’ like this instead of having such a a long mental list to remember.
Can I nitpick? According to the University of Illinois and their guidance about Functional Accessbility, doesnt a page need only one H1 tag, i.e. the title of the website, and the next headings to be H2, i.e. title of each post?
Thanks for this helpful article!
@Caroline Murphy
I believe it’s common practice to use the H1 tag for the logo in the home page but in sub pages or article pages, you use the same tag for the page or article title.
Caroline,
It’s actually a very passionately debated topic. A lot of SEO gurus say you should apply h1 tags to post titles in order to include more words in important places when spiders/bots crawl your site.
There’s technicalities and then there’s that which will reach your web site goals. I think it absolutely depends on what you are trying to achieve. I personally have found h1 tags to be effective on post titles as well.
Cheers!
Wow! Congrats
I think that this checklist could be used for every kind of templates. Not only for Wordpress Templates
You’re design checklist will be really helpful during and upcoming project. Unfortunately, I constantly manage to forget once component or another, so this will keep me out of the soup!
Thank you for sharing. This is something I have meant to do a long time ago. It makes it a lot easier to have an available list to tick off. Nice work!
Woah. Just this morning I was thinking about how I want to start doing some WP theming, and I wondered if something like this existed. Great timing
Thanks for the exhaustive list, it will be really helpful.
Very interesting tutorial. I have always wanted to design my own theme but I think I still lack the coding skills necessary for it. As for the SEO aspect, I really think it depends on how your blog is structured. While I would never put multiple H1 tags on the same page, I’ll put the H1 in the blog title if it contains the main keywords or in the tagline if the blog title is irrelevant while the tagline contains the keywords. The post titles, then, are put into H2 tags. Of course, there are exceptions to this depending on how the content is organized and structured, but I would recommend making sure that the H1 is the first H tag that comes up when you strip the stylesheet. -Mike
Great post! Thanks!
I do a heck of a lot of WordPress work for my clients, and this will definitely prove a good reference for me. Definitely adding it to my del.icio.us so I can come back when I need it.
-Ben
simple brilliant overview. ever-noted.
Nice Post….
Very well-organized list - thanks for laying it all out so clearly. I’ve bookmarked it for future use.
Lovely work on the design Brian!
Peter,
Thank you! Glad you enjoy the look
Ooh handy! Thanks so much Brian!!
awesome post, organized down to the T.
Brian, this is a really useful post. The only thing I might add an over-the-top piece of work:
styling of the admin view
For organizations that have many people signing in to the wp-admin to serve as editors and authors, it may be cool to apply styles that are compatible with the org’s identity rather than the classic default grayscale or blue.
For designers interested in tinkering, the path is
/html/wp-admin/css/
(go with caution)
Thanks.
very nice checkllist! I’ve been working on a theme design this week and i luckily caught everything on this list!
Thank you for posting this. I’m in the process of designing a WP theme of my own and will definitely be taking this into account.
I love to find good articles that can really help me nice job on this post.
A good starting point for wordpress lovers. Thank you!
Awesome post! Well organized, pretty useful