Art of Blog 4.0 – A Thesis Customization

Art of Blog has launched a brand new re-design built by Your’s Truly on Thesis, and packed with a plethora of new features including post summary boxes, custom category and author pages, popular posts with thumbnails, and a brand new homepage layout to highlight the latest featured content.

The Evolution

Before we get into the good stuff, let’s hop in the way back machine for a second and check out the evolution of Art of Blog:

Version 1.0

Circa August 2006

Version 2.0

Circa April 2007

Version 3.0

Circa November 2009

Features

Alright, alright…on to the goodies :)

The Homepage

Where do I begin? This homepage is absolutely packed with a ton of features (and some complex code humming along in the background). First of all, there are three featured articles at the top. These represent three of the latest and greatest articles you’ll find on the blog. They have custom excerpt lengths, and they’re filtered from teasers featured in the main column. Oh, and did I mention those titles are overlayed with CSS? That’s right. No clunky plugins here ;)

Secondly, the teaser images are created using the post thumbnail system that is new WordPress 2.9. So are the popular and favorite post thumbnails. Oh, and so are the featured posts. The best part? There’s only one image to upload for each post. WordPress does all of the resizing automatically. The Thesis post image system is great, but this is a whole new dimension. I’m excited to see if Mr. Pearson comes out with something better in Thesis 2.0!

The Sidebars

sidebarThere isn’t quite as much to yell and scream about here, but those favorite and popular post lists are done without plugins. And the styling is extremely flexible. Did I mention that its all done with hooks? No widgets cluttering this database!

Single Posts

This is where the new skin really delivers the goods!

This is where the new skin really delivers the goods! Nick and I spent a ton of time thinking critically about comfortable reading, ease of use, and enabling readers (that would be you!) to consume and share content. From the custom byline to the post summary box to the alerts and notes, everything is designed to make it as easy as possible for you to consume and share content, and to find similar content.

The Archives

categoriesThis is another area where the new skin shines! It comes complete with customized category and author pages. The categories are especially special. Nick does not like the standard WordPress category pages as the permalinks aren’t optimal for SEO and they aren’t easily controlled without relying on a plugin. Since I don’t like that idea, we decided to build new ones from scratch using a custom Thesis template. We redirected the old category pages to the new ones, and filtered child category posts from each category page in order to minimize duplicate content. Each category also has its own separate header with keyword rich content.

The code for these pages is incredibly complex, but the end result is an awesome set of category pages that are certified SEO dynamos…and they don’t hurt navigation either! Check out an example here.

The author pages are pretty sweet too. They highlight each author on the blog, and feature links to their social media profiles as well as a list of posts written by that author. Here is a completely random – wink – example.

For The Love Of Navigation

The absolute most important element of any blog – aside from the content of course – is the navigation system. Making it easy for your readers to find the content that is most relevant to them quickly and easily is absolutely key to your success as a blogger. It is essentially the holy grail of blog design.

The new skin features numbered page navigation near the footer which makes it easier to find articles deep within the blog. However, the really great feature here is the breadcrumbs.

These aren’t just any breadcrumbs. They’re done without a plugin and they account for nested categories, nested pages, 404 errors, and search queries. Shoot, we’ve even got pagination covered! In short, every single page – save for the homepage which has featured posts instead – on the blog is accounted for. To my knowledge, this is the most thorough set of breadcrumbs you’ll find on a WordPress blog.

The Inspiration

I’ll admit that I didn’t conjure all of this out of thin air. Therefore, I feel obligated to give credit to the visionary designers that inspired me in some way shape or form.

The post summary boxes were inspired by the writing style of Willie Jackson, and the artistic design of one Kristarella! The box you’ll see on many of the posts here on Art of Blog (including this one) includes links to each of the H3 subheadings in the article to make it easy to find the part of the article you’re looking for.

The sidebars are a creative hybrid inspired by Matt Langford and the man, the myth, the legend himself, Chris Pearson. I love the way Matt floats the headings to the left and Chris’s right margin makes for the best sidebar heading design in the business in my humble opinion.

Finally, the homepage design was inspired by the Hyperion Theme from ThemeForest. The code of that theme is pretty sloppy, and I wouldn’t touch it with a ten foot pole in terms of SEO, but the homepage layout is genius!

Whaddya Think?

I’d love to know what you all think of the new design. A large amount of thought went into it, and there is literally not one single element of the design that Nick and I did not think critically about and go back and forth on. Ultimately, you’re the most important critic, so let us know what you think!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Comments

  • Nice work, Adam—the redesign looks fantastic. Thanks for the hat tip!

  • The difference IS in the details – you are proving that here. What a lot of folks don’t understand is that to get a simple and sleek look (as you have here) it actually takes MORE behind the scenes work. Nicely done all around, Adam.

  • Dan Rippon says:

    Like most things in life that look simple & graceful, what’s on the surface hides the depth. Great work guys…

  • Nick Reese says:

    Adam, I can’t say enough. It has been the biggest pleasure working with you. You have gone above and beyond. No corners were cut, everything was was done perfectly. Thank you for your outstanding work. I know it will be appreciated by all the future visitors.

  • Taffy says:

    Hi, I absolutely LOVE your site layout. I’m new to blogging and after months of stressing around with a free WordPress Theme and downloading quadzillions of pluggins (and losing most of what little hair I had left in the process…lol), I decided to scrap it all and start again. I’ve just downloaded Thesis and my hope is to somehow get my site to look like yours. I don’t think I’ll bother adding much content to it until I’ve built up most of my layout first (in case I have to start all over again!), so thanks for your tutorials. I wish I could just cut and paste your ‘entire’ layout into mine so I can just get on with things (mmm…wonder if there’s a way…lol). Oh well, better roll my sleeves up I guess. Once again, many thanks. Taffy.

    • Adam Baird says:

      If you’re willing to work at it, you can do just about anything with Thesis…I’d recommend coming up with something unique for your blog’s brand though! Take what you like from this site, and look around at other blogs too. Find what works for you. If you need help you can always ask in comments here. I’d check out the support forums over at diy as well…there is an insane amount of info there!

  • Taffy says:

    Hi Adam, thanks very much for your reply. Yeh, you’re right, there’s a load of stuff over on DIY, maybe a bit too much for someone like me (a bit thick!). But I am willing to work at it and as I’m in no huge rush I’m not going to add much ‘content’ to my site until I’ve got most of my lay-out set out first. (In case I mess things up like before and have to start all over again!)

    One of the (many) things I love about your site here is your right side-bar (‘search’, ‘popular posts’ and ‘favourites’). It’s so clean and clear—lovely.

    It would be much appreciated if could you could give me some guidance as to how replicate this on my own site.

    Many thanks, Taffy.

  • Taffy says:

    (PS I’ve got loads of pics stashed in my hard drive, how do I get one of them to appear in my posts like all you guys have in your posts here….At least you’ll be able to see my ugly British mug then! I did warn you I was new to blogging…lol. Taffy.)

  • Adam Baird says:

    Gravatar.com is your friend :)

  • Zac says:

    I like the custom summary box….Any chance you will do a tutorial on how to set that up on your own blog??

  • Avinash D says:

    No widgets. I still can’t believe that there aren’t any widgets in the sidebar. Wow. Just WOW! Incredible work Adam….

  • Dave Owen says:

    It would be awesome if we could get the code for ‘First of all, there are three featured articles at the top. These represent three of the latest and greatest articles you’ll find on the blog. ‘

  • Robin says:

    hey Adam,

    How to insert pages more pages into easy thesis theme so they show up?

    So for example at the moment it only has Home but I want pages running across the entire bottom of the header…?

    Thank you!