In this post we take a look at four excellent, and popular, designs, from simple to complex, that can help inform your next blog design. The sites we’re going to look at are Lifehacker, PSD Tuts, Smashing Magazine and Canada’s National Post.
We’ll look at the general layout in great detail, via a wireframe of the main sections, and the details generally, with a bit of a writeup, in the form of notes, on what’s going on. Clicking on the wireframe opens up a full-size version. Feel free to use the wireframes in your own projects to help you get a handle on just where your stuff should be in a successful blog design.
Studying the masterworks and previous success is one of the key ways to breed success in your own designs. Let’s study up.
My favorite thing about the Lifehacker template is the top posts of the day featured for maximum (literal, even) effect at the top of every page. Each featured item gets a thumbnail image, a category, a title and a cool hover effect.
The blog branding is almost a secondary item here but is still highlighted and serves to further highlight the search which is almost exactly in the middle of the above-the-fold screen. And note that the search takes up just as much visual area as the site logo. Can you make search anymore prominent? Anyway, the real Lifehacker brand is the reams and reams of excellent content. A fat logo and pretty header just gets in the way. In fact, all of the sites we’ll look at, mostly eschew cuteness and large headers that only serve to brand their site.
This is the only layout in this little study with a sidebar on the left. But the sidebar on the right is mostly negative space and really helps to focus your eye on what’s happening in the main content area.
Plan your WordPress site design
Figure out what sort of pages we’ll need
Before a visual design can begin, you need to do content design. Determine what exactly you’re going to say. Words, sentences and paragraphs are the building blocks of your site’s foundation. Make sure you’ve put them together correctly. And make sure you know what you need that foundation to do. I mean, think about how those words, sentences and paragraphs are going to effect your bottom line. Remember, we’re making this site for a reason. Whether it’s to get a laugh or make a buck, all those words, sentences and paragraphs need a reason for being there. They mean something.
Anyway, you’ve done all that right? We need to think about how we’re going to present that content. To put things really simply, once you know what you’re going to say with your content and what you want it to do site design comes down to designing series of page templates. That’s it really. As a practical matter, site design becomes a series of templates. Continue reading
Are WordPress Themes open source? Is it right to release them on a pay-to-download basis?
… what these premium theme providers are doing … we would call that “Evil”Chase Sagum
… themes link and use lots of internal WordPress functions, which make them linked under the GPL and subject to being a GPL-compatible license. If a theme (or a plugin) used no internal WP functions or APIs, then it could probably be considered independent, but that would be really really hard for a theme. Matt Mullenweg
I haven’t really talked about it a lot but I’ve been trying to do pay-for-use themes differently. Namely, giving away what might normally be considered a “Premium” theme—my WordPress theme framework Thematic—and charging for upgrades in the form of Child Themes and custom design. I think it’s a little more fair to the WordPress community and the debatable concerns around the ethics of paid WordPress themes.
But there’s still more questions. There’s always questions, isn’t there? Continue reading
A question from a reader has prompted this post. What makes a WordPress Theme Framework? I say, any WordPress theme can be a theme framework.
I’m researching Thematic and would really like some clarification on child themes. You say several places to use a child theme but I couldn’t find a list — is Junction the only one? I’m very interested in your comment that “if you’re starting with a Child Theme any WordPress theme becomes a blank framework”. But how? Could you explain a bit? Maybe a step-by-step explanation? Do you install Thematic, then the child theme, then how does “any WordPress theme” come into play? Valerie
So is it true? Yep. I’ll tell you how, why and what it means. Continue reading
Problem: You want to take advantage of WordPress Parent-Child Themes but you want more control than is usually afforded through CSS alone. What about adding a Favicon? Or a link to a custom stylesheet for IE fixes.? Or editing the menu? How do you do that without messing around with the original Parent Theme?
Solution: You do what I did. I had this exact same problem redesigning ThemeShaper to take advantage of my WordPress Theme Framework, Thematic. I’ll tell you how I solved it and give you a better idea of the power of the
functions.php file in WordPress Child Themes.
When you’re done reading this post you should be well on your way to taking full advantage of the power of WordPress Child Themes and redesigning your blog the smart way—leaving the original parent theme files untouched.
And if you haven’t heard about WordPress Child Themes before, make sure you take a look at my post on How To Protect Your WordPress Theme Against Upgrades. I go through a quick primer on them and how to get started using them (along with some useful tips on using Plugins).
First, Make a Functions.php File
Currently, only two overriding files are recognized in WordPress Child Themes,
functions.php (unless my proposal for 2.7 makes it in). You can do a lot with CSS alone but with
functions.php your theme can interact with WordPress just like a plugin.
First things first: make a file in your Child Theme folder called
functions.php and add the PHP opening and closing tags to the first and second line (
?>) using your favorite text editor (I use Smultron). Make sure you don’t have any extra lines before or after these tags. We’re going to be inserting the following snippets of code on the lines in-between these tags. Now you’re ready to make your WordPress Child Theme sing.
… not literally, of course. That would be annoying. Continue reading
WordPress is exceptionally easy to Theme—but it can be better. WordPress can be a smart little CMS for most websites—but it can be better. How? WordPress Theme Frameworks.
A while ago I asked a whole bunch of smart people what they thought the future of WordPress themes would look like. I also asked the whole WordPress community (also very smart) to think about a new default theme for WordPress. It’s putting those two things together that’s led me to the following statement:
The future of WordPress theming is in Theme Frameworks. If WordPress included three or four theme frameworks—not default themes—in the core it wouldn’t just be the easiest CMS to theme, it’d be the smartest.
Thinking of Theme Frameworks as something different from Themes could be revolutionary. And they don’t have to be included in the WordPress core to change how we think of WordPress themes. But take a look at my proposal for powering-up Child Themes in WordPress 2.7 and some of the current benefits of using them. And while you’re at it, check out Thematic.
Thematic is my own personal WordPress theme framework that I’ve released to take advantage of all this. Sort of an über-theme that puts the best of everything in one place so the core of it will never have to be messed with. It really leverages what you can do with WordPress themes: everything that needs to be changed is either an option (even the footer credits!) or a widget, leaving customization to the CSS in a Child Theme.
And that’s Customization that’s easy to make—for developers and enthusiasts—since the Thematic CSS is modular. The Reset, base Typography and Plugin styles have been separated from the basic look and ready to be used independently by Child Themes.
What do you think about WordPress theme frameworks? Sound Exciting? I think so.
Problem: You’ve finally found a theme you like but you want to modify it. The modifications are pretty simple but what happens when you want to upgrade the theme? Do you really want to go through all those files again hunting down the changes? Don’t you wish you could just upgrade and be done with it?
I’ve been there. I’ve done everything the wrong way at least twice. Learn from my mistakes. Here’s the right way to modify your theme and protect it against any future upgrades. And don’t worry, it’s really simple. As it usually turns out, WordPress is ready for us and has done most of the heavy lifting.
Now that Gravatar support is part of the WordPress core adding them into your WordPress theme is easy. Adding them to your comments has been documented. How about adding them to your post titles to highlight the comment author? Within the loop? That’s fairly easy too. Here’s the code:
<?php echo get_avatar( get_the_author_email(), '80' ); ?>
Pretty simple, huh?
get_the_author_email outputs the post author’s email and the “80” is the size of the avatar image in pixels (you can change that). How this will look depends on how you use it; where you put it in the theme (it has to be in the loop!) and how you style it.
Hey There! If you haven’t yet, make sure you check out The Future of WordPress Themes 2009 after you’re done reading 2008’s predictions. It’s a good read.
When I predicted the downfall of premium WordPress themes I immediately began to think of the future of WordPress theming in general. Where was it headed really? And if I really wanted to know, who should I ask? Well, if you want to know where WordPress themes are headed in the future, these are the kind of people you want to ask—and the people to watch. And wow, am I glad I asked.
Here are 11 people committed to thinking creatively about WordPress themes and what they mean. These are some of the people who will carry and lead WordPress theming into 3.0 and beyond. Some of these people will set the agenda for the future of WordPress themes. And this is what they think it will look like. Continue reading