Since Agregado launched on Monday, we’ve had about 3500 downloads plus a lot of questions about how it works and why it was made. Here’s a bit more documentation to add to what Smashing already published.
The Inspiration
This year it became obvious microblogging tools like Twitter were monopolizing people’s attention. Blogs got updated less and the sidebar content (Flickr thumbs, delicious bookmarks) largely directed users elsewhere. Tumblr and FriendFeed also became popular and it seemed many bloggers suddenly felt limited by the traditional blog format.
Already thinking about all this, I got an email from Smashing Magazine in June offering to commission a theme. I pitched a lifestream+blog concept, sent rough comps and they were totally supportive. I enlisted my friend/co-worker and developer extraordinaire Matt Dawson to split up the duties.
Overall Design
Agregado is Portuguese for “syndicate, collect, aggregate”. The homepage mockups were designed while using a new MacBook and working evenings in a dark, cramped pub in Portugal. It’s interesting that the dark, shiny design ended up reflecting that work environment, but it wasn’t really on purpose.
The design elements aren’t really based on anything, mainly improvisation. It’s always hard to design something general enough to suit everyone’s blogging purposes, but that’s a topic for another post.
The Navigation
Because the layout incorporates a lot of different content types, I obviously didn’t want to go the route of the magazine layout and overwhelm users. I wanted to do a theme that felt very personal and very compressed. WordPress comes with a number of sidebar modules by default (XHTML Validation, Monthly Archives, Search), but I find myself using them pretty rarely.
Subcategories have been compressed behind dropdowns, which use a heavily modified version of these Coda-style bubbles that run on jQuery. They also use opacity attributes which aren’t supported by older browsers, but it goes to show that a lot of Agregado was improvised. This first week after launching, we’re still gauging what works and what doesn’t. If this was a pro theme, I would not have been quite so free-wheeling.
We did run into some trouble here: for the jQuery bit to work, each <a> tag in the nav needed a class of “trigger”, but wp_list_categories only attaches a class to the <li>. So Matt was able to use a bit of jQuery magic to dynamically add the class, although it’s not visible in the source code unless you’re inspecting with a tool like Firebug. It was cool to see how that was done and it’s already inspired a couple more ideas for future themes.
The icons on the right side of the navbar are just another attempt to compress information and get it out of the way to make room for the main event: the last 9 blog posts. Does it work? I can see why some would have trouble with the usability, but again it’s all an experiment. Succeed or fail, it highlights the need to break out of the standard WordPress schema once in awhile.
Typography
Because the theme uses light text on a dark background, I used larger type size for single-post pages, and kept the line-height (145%) and letter-spacing (0.15em) pretty breathable.
On the homepage posts and lifestream, you’ll notice fresher headlines are bigger/lighter, but get incrementally smaller/darker as they get older. This was an attempt to make posts a little more visually meaningful, more like tag clouds. Don’t know if it works for everyone, but I enjoy the effect.
The Last 9 Posts
To pull those headlines and style the font-size and -color accordingly, Matt put together some code (similar to Probama) that attached unique #id’s to those left-floating list-items…
…which makes CSS styling easy. But how did each <li> actually get assigned an #id? Matt explains:
I added a little counter incrementer right at the beginning of the loop. It gets printed to the page on each iteration as part of that entries class, and then at the end of that iteration, it gets one added to it ($count++).
Essentially, it counts the posts and inserts a numerical value in the class. This technique is also used to break up the monotony on Mimbo Pro’s category archives pages.
The Lifestream
The lifestream is central to the theme, even though it only appears on the homepage. After a couple mockups displaying the lifestream in various formats, the Smashing Mag folks and I decided it was best in a sidebar, completely distinct and separate from the blog posts.
The code itself is a fork of Kieran Delaney’s SimpleLife plugin, which uses SimplePie to parse RSS feeds and display them in chronological order. The code was built right into functions.php with hooks into the control panel to configure feeds.
While revamping SimpleLife, many bugs were fixed, but a few remained, even a couple days after the launch. There are currently still some limitations: certain feeds can be slow, erratic, feature strange unparseable characters, or just not show up at all. Matt added some functionality which creates a /cache/ folder and sets 0777 permissions, speeding things up a bit. I’d also recommend WP Super Cache.
The Contact Form
This was code developed by Tim McDaniels that was adapted from Mimbo Pro. It hooks into the control panel, allowing admins to set their email address and success message. Due to spam these days, it’s no longer safe to publish a static email address to blogs, so including a contact form in personal blog like Agregado was an obvious choice. It currently has no CAPTCHA, but seems to collect virtually no spam in my experience.
The Static Pages
Agregado includes custom code which determines whether a Page is parent-level, and if so prints the child links in the sidebar. Accordingly, CSS is used to show or hide submenus. This sounds obvious, but we were never a fan of how WordPress handled this natively while building sites at Category 4, so I re-used some code from our own WordPress framework.
The Archives Page
Admittedly, for blogs with thousands of posts, the custom archives page could get a bit messy. At the same time, the way we’re typically expected to navigate archives never appealed to me either — clicking “November 2006″, for example, and hoping to find the right post. Visually, it works much better for me to see everything in a grid, sorted by month, in descending order.
The Pagination
I’ve never loved paging back through archives when my only options are “newer” or “older” because I can’t quickly visualize just how large the archives might be. So Matt adapted the code from Yellow Swordfish’s WP plugin and built it right into functions.php. You can see it at the bottom of an archive pages like this one, or in search results. To my eye, much more useful.
The Release
You ever test the hell of something, then make some 11th-hour changes which end up affecting other parts of the code, but since you already tested those things the first time around, you don’t check to see if the other parts are affected?
Yeah.
Some of these issues even slipped past the beta testers. In any case, we had a few “oh shit!” moments in the 48hrs after the original release, but got those bugs squashed pretty quickly.
Matt was a great partner in this project and did not seem to mind when I threw random tasks at him (the animated dropdowns, the cascading font sizes) during spontaneous brainstorms. Matt’s posted a few of his own discoveries during the building of Agregado:
- Aggregating Your Social Bookmarking Feeds with Simple Pie
- Preventing Your Javascript from Loading in an iFrame
- Using WordPress’ wp_enqueue Script in Themes and Plugins
The Future
We’re going to release a fully localized version of Agregado soon, thanks to some editing of strings by our friend Ralph in Austria. Plus, better error-checking and more consistent parsing of feeds from services like Yahoo Pipes. Keep sending any suggestions you’ve got.
In the next year or two, I think services like Tumblr will continue gaining popularity and people will want more and more ways to mix media and social/third-party content into their blogs. Most bloggers aren’t writing as many essay-length posts. Attention spans are becoming seriously short. I think the challenge for designers and theme authors is finding ways to present information as immediately as possible, from multiple sources, without it being chaotic or unnavigable.
11:11 am
You’ve done great job creating that theme, I believe You will got a lot more downloads because of publishing theme at SM. Thanks for theme’s review.
4:31 pm
I did like the idea of the contact form but I’ve had several pieces of spam through it already so am going to look at taking it off :(
Caspar
8:20 am
Really nice! Thanks!
8:30 pm
Nice to see how it came all together.
I’ve been playing a bit around with it, how would I change the category drowdown from showing sub categories to showing posts (if it’s possible)?
11:03 am
I think Agregado offers more a parent theme structure than a one-stop theme. The visuals are so iconic, and work really well, that anyone using it for their own site would want to change some things around. All the structure of Agregado seems like it fits the parent theme role really well.
If I had the time, I’d be tempted to start a forum where folks could share their child themes or other adjustments. There’s a lot too work with!
3:20 am
Thanks for this great theme!
We’re using it for our Official Blog: http://clickapost.com/blog ;)
Tweaked it a bit to match the site’s colors and design – but still love the simplicity and beauty it brings.
Keep up the good work!
Petar
http://www.ClickaPost.com
1:04 am
Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.
4:39 pm
@Daniel: good points, and see my most recent post about parent-child themes.
7:19 pm
Great stuff – very helpful and informative!
I still cant figure out how to stop the offset of the posts…
How do i make the latest post come up again under the big latest post where there are the list of 8 posts. Does that make sense?
Thanks!
5:27 pm
Darren,
First off, amazing amazing theme! I can’t wait to play around with it some more. But I have an issue I can’t seem to resolve. For some reason my Lifestream is in order by feed and not chronological?
http://www.basementofmybrain.com/
Is there an easy fix?
5:38 pm
Darren & Matt already fixed my issue… man they’re fast ;)
5:39 pm
This is due to including the Netflix feed, which unfortunately inserts illegal characters and breaks the parser.
8:16 pm
Hey Darren,
Brilliant design! I’m in “aw”!
Please tell me where is that cramped pub where you worked on this… I live in Lisbon and I wanna go there!!!!!!!!
I’ve just downloaded it and I’m gonna test it on my blog.
Keep it up and take care ;)
10:35 pm
Thanks MrWannaB! The pub was the Beefeater in Cascais – ever heard of it?
10:46 pm
Naaa, I don’t go to Cascais much. I live right in the center of Lisbon (it’s quite inspiring too!!!!)
Where you here on vacation? Hope you enjoyed it! :D
10:27 am
We stayed in Lisbon and loved it. On our last night, I proposed to my girlfriend under this sign.
2:54 pm
I really like the theme…the lifestream was definitely the way to go. Well done :)
6:11 am
thanks. super themes. super site
11:56 am
Is there another color for Agregado. Brown is good, but not eye catching enough!
5:38 am
What an awesome Theme! Use it on my personal Site! Lovin it! It is exactly what i need! Thank you very much!