Smashing Magazine - we smash you with the information that will make your life easier. really.

When designing a custom theme or deciding on an already-existing theme, bloggers have a lot of factors to consider and there is no shortage of options, particularly for WordPress users. A growing number of blogs are moving away from traditional blog layouts in favor of magazine-style themes; however, the layout and presentation of content has a major impact on visitors and there is no one-size-fits-all solution.

Key Differences

Magazine themes have a few characteristics that distinguish them from traditional blog themes.

1. Magazine themes only use excerpts or headlines on the front page, while standard blogs will use either full posts or excerpts.
2. A magazine theme functions more as a portal to content on the rest of the site. The magazine theme will give visitors a glimpse at what is available and it will direct them to go in whatever direction they like.
3. Magazine themes make more effort to organize the content of the blog and present what is most important, whereas traditional blog layouts will order front page content based on what is most recent.

A good visual guide for the distinction between a traditional theme and a magazine theme is the Gridline series. The first image below is the front page of Gridline Lite, a tradition blog theme. The second image is the front page of Gridline Magazine.

Gridline Lite uses an excerpt for the most recent post and smaller excerpts for other posts below that.

Gridline Magazine gets rid of the traditional blog sidebar and uses that space for more post excerpts and thumbnails. At the bottom there is also space for the most recent post in five additional categories.

Why Are More Blogs Moving to Magazine Themes?

While magazine-style themes are not new, their popularity has exploded in the past year or two. New themes are consistently being released (premium and free) for WordPress users. There are a few significant reasons for this trend.

1. A need to make more content easily available and to improve usability.
   A growing number of blogs are churning out post after post. With an increasing amount of content comes a need for better organization and presentation of that information. Traditional blog themes can make this very difficult while magazines themes will make it a bit easier.
2. The blending of blogs and websites.
   A few years ago most blogs were little more than personal journals. Now as blogging platforms like WordPress have become full-fledged CMS options, the line between a blog and a website is a bit more blurred. Websites that would not have used a blogging platform in the past are starting to convert, but they still need certain layout and functionality that is not possible with traditional themes.
3. An attempt to break away from the blog look.
   The standard blog themes are a turn-off to many visitors, and magazine themes offer more opportunities for a visually appealing design.
4. Multi-author blogs.
   Many blogs that use magazine themes are mutli-authored. These blogs will typically produce more content and have more variety of content, which makes a magazine theme more ideal.

Pros and Cons

Each style of theme has its own strengths and weaknesses. They should always be considered in the context of a particular blog in order to determine what type of theme will work best in that specific situation.

Pros of Magazine Themes

1. More content is featured on the front page

The primary reason for using a magazine-style theme is to show your visitors a greater amount of content from the front page. Of course, they’ll only be seeing small bits of information on several different topics, as opposed to simply seeing the latest post as would be the case with a traditional blog theme layout.

Most blogs contain a large amount of content and the tradition blog layout only allows for a small portion of the most recent content to be featured. Visitors may arrive at a blog with a magazine layout and see headlines and excerpts from 4 or 5 different posts above the fold. Obviously, this gives them more options and the chances are better that they’ll find something of interest to them.

2. More control over what is featured

Just as important as featuring more posts is the ability to easily control which posts are featured and for how long. The traditional blog layout will always give the most prominent location to the most recent post (although this can be modified to some degree with plugins). A magazine theme gives the blogger the ability to control what is featured by categorizing a new post appropriately.

The location of the new post on the blog front page will be controlled by the category assigned to the blog (in most cases), so all the blogger has to do is decide where the post should be shown and place it in the appropriate category. The ProBlogger front page has a slot for a recent featured post as well as a slot for a video post.

3. Potential for improved navigation

Magazine-style themes have the opportunity to make logical navigation easier for visitors because more content is visible on the front page and options should be made clear. However, a magazine layout that isn’t well organized can lead to more clutter and confusion. Those magazine themes that successfully improve the navigational experience for visitors will do a good job of separating the content so that visitors know where to go to find what they are seeking.

The front page of Dazed Digital makes it easy for visitors to see the various types of content that is available on the site, such as fashion, music, arts & culture, and photography.

4. More professional look

While there are plenty of blogs with traditional themes that are well-designed and extremely attractive, there are exponentially more blogs that feature a very typical blog theme that some visitors find to be boring. Using a magazine-style theme certainly doesn’t guarantee a more professional look, but because it can help to get rid of the typical blog look it can help to make a site look more corporate image and less of a blog appearance.

Boxwish is a new site dedicated to movies. It uses a magazine-style layout to give the site a very professional and attractive look.

5. More appropriate for large sites

The typical blog layout doesn’t work well for blogs that post a large amount of content on a consistent basis. Because it doesn’t allow for flexibility in terms of what is featured on the front page and because less content will be given a prominent location, there may be a lot of valuable content that is getting less exposure than it deserves. A magazine theme is better equipped to handle several posts per day without any of them getting lost in the shuffle.

Popvine is a celebrity news and gossip site that publishes a large amount of content. Its layout allows much more to be visible on the front page than a traditional blog layout would allow.

6. Can lead to better use of categories

Most blogs use categories ineffectively and inconsistently. Because the order and placement of content on the front page of a magazine theme is so heavily dependent on the categorization of posts, it can force the blogger to be more careful with the chosen categories, which may lead to more usefulness of the system.

Cons of Magazine Themes:

1. Can be more work for the blogger

Depending on the theme you’re using, you may be forced to use custom fields and to pay more attention to the length of your custom excerpts. The tasks involved with posting to a magazine theme are pretty minor, but they will typically take a few minutes for each post. In general, premium themes will be easier and less time-consuming than free themes. Developers of premium themes are much more likely to take the time to develop advanced options from the dashboard that will make things easier for users.

2. Blogs with infrequent posts can look awkward

Because magazine themes feature such a variety of content on the front page, a blog that doesn’t post frequently can leave older content on the front page in prominent locations for much longer than with a traditional blog theme. This can make the blog look more outdated and less professional. Depending on the subject of your posts they may or may not be time sensitive.

3. The appearance can be overwhelming or cluttered

Well-designed magazine themes will maintain a good balance and will avoid clutter. However, it’s very easy to end up with a jumbled look by using a magazine theme that tries to cram too much content into the spaces available. Overdoing it will cause some visitors to be overwhelmed with too many options that aren’t clear and they’re likely to leave without navigating through the site.

4. Price

A high percentage of premium themes available for sale are magazine-style. While there are some good free options, there are less quality choices than there are for traditional blog themes. Additionally, developing a custom magazine theme will typically be more expensive and time consuming than developing a traditional theme, primarily because there is some extra coding that is involved.

5. Requires more clicks from visitors

With a traditional blog theme that displays full posts on the front page, visitors may be able to read several posts without even clicking off of the hompage. With a magazine theme, visitors will have only very small excerpts or maybe just headlines on the front page, and they’ll need to click to a specific post to read anything.

6. May be unfamiliar to some blog visitors

Although many people find traditional blog layouts to be lacking in terms of attractiveness, those who read a lot of blogs will be very familiar with the standard blog navigation, such as category links, popular post lists, date archives, blogrolls etc. These visitors may be less comfortable with the navigation and usability with a magazine theme, although this is becoming less of an issue as more blogs are moving to this style.

Considerations for Choosing a Style of Theme

Looking at the pros and cons may lead to a bit of confusion for bloggers, because it’s not a one-sided issue. Because each blog has a unique purpose and a different approach to presenting information, each case should be considered individually to decide on the right style of theme. Here are some factors that should be considered.

1. Impact on Visitors

While many bloggers are switching to magazine themes because they find them to be more attractive and less like a standard blog, the impact of the theme on visitors should also be considered when deciding on the type of theme. As the pros and cons were covered, many of them were based on how the theme impacts the user experience. The navigation (number of clicks, familiarity, etc) will be one of the major differences between the two styles of themes. Additionally, the amount of content on the front page will be a major impact on the user experience. For sites that draw visitors looking for news-related topics, they like to be able to see a lot of headlines to find something of interest.

2. Impression of Size

Because many of the websites using a magazine layout are major news websites, there is a certain impression of size given to visitors when they encounter a blog with a magazine-style theme. Blogs using a more traditional layout may seem like a smaller site to new visitors than the same blog would appear if it were using a magazine theme. Although a traditional blog layout can give the impression of a smaller site, many blog readers will appreciate the feel of being on a more personal level with the blogger, as opposed to feeling like they’re on a large impersonal site with many different authors.

3. Frequency of Posts

It was mentioned earlier that magazine-style themes can look awkward or outdated if posts are few and far between, and for this reason the actual or anticipated frequency of posting should be a major consideration when deciding on a theme style.

4. Diversity of Content

The use of categories by magazine themes can do more than just control what content is featured and for how long. Additionally, magazine themes can help to separate content in a way that is easier to manage and more usable for readers.

For example, take the Macalicious theme layout. There are three slots on the front page for featured posts: Recent News, Rumors, and Tips & Tricks. Visitors can quickly see what’s available and they can visualize the distinction of content much better than they could with a traditional layout where all categories were lumped together in one loop.

5. Niche

While websites and blogs in specific niches tend to be similar to one another in their approach, the typical blog readers in various niches will also have some common expectations from the sites that they visit. If your blog is in a news-related niche, almost all other blogs in your niche are probably already using a magazine theme. In other niches it may be just the opposite. While being unique is generally a good thing, be sure that you’re not alienating a major portion of your readers by using a style of layout that makes them uncomfortable with the site.

Tutorials for Designing a Magazine Theme

If you’re looking to learn more about creating your own magazine themes, NETTUTS is the best resource available. They have several different tutorials that teach different approaches or aspects of the magazine layout.

• Prototype a Magazine-Style Homepage Template with the Blueprint CSS Framework
  This tutorial is a good starting point for learning the process of designing and laying out a magazine theme on a grid. You’ll be taken through the process of setting up the grid and the HTML/CSS code.
• Build a Newspaper Theme with WP_Query and the 960 CSS Framework
  Using the popular 960 Grid System you’ll be able to create a newspaper or magazine layout the uses WordPress’s functionality to control which posts are shown in different sections of the front page.
• Build a Basic Newspaper Style Layout with WordPress and jQuery
  This tutorial uses jQuery to create size-degrading headers that will keep your grid looking professional.
• Build a Featured Post Section in WordPress
  Most magazine themes will have a prominent spot on the front page for posts in a featured category. This will allow you to highlight new and popular content in the right locations and not overpower them with subsequent posts that may not be as important.
• Which CSS Grid Framework Should You Use for Web Design?
  This is an extremely in-depth article that explains the purpose of grid frameworks and lists tons of resources.

Darren Hoyt is one of the designers of Mimbo Pro, one of the more popular premium magazine themes for WordPress. On his blog he’s written a few posts that will be helpful for designers and developers of magazine themes:

• In Praise of WordPress Template Tags, Part II: The Magazine Layout
  Darren takes a look at the Mimbo theme (the free version) and how it manages to pull off the magazine layout. This article is obviously helpful for anyone using and customizing Mimbo, but many of the same concepts are applicable to developing your own magazine theme.
• Creating Two-Tiered Conditional Navigation in WordPress
  While this type of navigation isn’t exclusive to magazine themes, these sites do tend to be larger and in greater need of more advanced navigation that the traditional blog.
• Combining Featured Posts Within the Standard Loop
  WordPress users often want posts in magazine themes to be displayed in ways that can be a bit tricky. Darren provides an example situation with one of his clients and he provides the code for his solution to the layout issues.

HeadsetOptions.org has published a series of posts that break down the main issues regarding development of a magazine-style layout in WordPress:

• Anatomy of a Magazine Style Premium WordPress Theme: Prelude
• Part 1 — The Loop
• Part 2 — DOMtab, Tabber, and More
• Part 3.1 — Navigation – Second Lavel Menu
• Part 3.2 — Conditional Navigation Menus

Chris Coyier of CSS-Tricks recently published a tutorial Creating a Slick Auto-Playing Featured Content Slider. Chris approach could be used to work with a featured post section on the front page of a magazine layout.

When developing a magazine theme for WordPress you’ll need to do some things with the loop that aren’t a concern with a standard blog theme, including the use of multiple loops. Perishable Press has a helpful tutorial that provides the code that they use for a theme with 3 different loops, the Perishable Press Triple Loop for WordPress.

Cats Who Code has a helpful tutorial for creating an effective navigation menu for your own magazine theme. You can learn how to create an advanced dropdown menu quickly in WordPress: “Magazine Style” Horizontal Dropdown Menu.

Speckyboy put together a nice collection of the Top 30 Modern Web Designs (Magazine Style Showcase). This post is excellent for seeing the magazine layout on some major news websites and others that certainly don’t feature a traditional blog layout.

Resources for Grid-Based Design

Many magazine themes are built on a grid to establish the structure of the site. If you’re interested in becoming more familiar with grid-based design, these resources can help.

Grids are Good
This is a PDF of a PowerPoint presentation at SXSW by grid experts Khoi Vinh and Mark Boulton.

Five Simple Steps to Designing Grid Systems
Mark Boulton’s detailed series on getting started with grid-based design.

Oh Yeeaahh!
Khoi Vinh takes a look at how Yahoo could be improved if it were designed on a grid.

Grid-Based Design: Six Creative Column Techniques
Smashing Magazine’s look at designing on a grid. Sean Hodge takes a look at several different approaches to grid-based design with plenty of examples.

Grid and Column Designs
Nick La of Web Designer Wall put together a gallery of 32 excellent examples of grid-based design and he categorized them to help demonstrate the possibilities and various approaches.

960 Grid System
This framework was mention earlier regarding a link to a tutorial. Nathan Smith developed the 960 Grid System in attempt to simply the development process for others. Give it a try and see if you like working with a framework or starting on your own from scratch.

Blueprint
Another CSS framework and grid is Blueprint. Several notable designers took part in the development of Blueprint.

YUI Grids CSS
Yahoo! also has their own CSS framework that can help for designing on a grid.

Free Magazine-Style Themes for WordPress

If you’re looking to use a free WordPress theme to or to customize one for yourself, there are several quality choices available.

One of the most popular free magazine themes is Mimbo by Darren Hoyt.

Branford Magazine is another excellent choice that was inspired by Mimbo and Revolution.

Rebel Magazine by default will display five excerpts on the front page and it also includes an area in the sidebar for video.

For more of the best free magazine themes, see:

• 20 of the Best Free Magazine WordPress Themes from Pingable
• Free Magazine-Style WordPress Theme Gallery from Hack WordPress
• 45+ Free WordPress Themes with Magazine or Grid Layouts from WPZOOM

Premium Magazine-Style Themes for WordPress

While free magazine themes are becoming more popular, a very high percentage of premium WordPress themes available for purchase are designed with a magazine-style layout. Here are a few of the better premium themes.

Magazine News is built specifically for sites with lots of content and it’s built to support AdSense or other types of ads.

Darren Hoyt and Ben Gillbanks also offer Mimbo Pro, which is a more advanced, user-friendly version than the free theme.

The Gazette Edition is one of several quality themes offered by WooThemes. It has the clean, professional look of a major news site.

Fresh News is another theme from WooThemes. This one offers the user a choice of three homepage layouts.

Brian Gardner’s popular Revolution series includes Revolution Magazine, a very professional and customizable option.

Quommunication News is a clean theme that makes full use of categories.

For more of the best premium magazine themes, see:

• Best News and Magazine Style Premium WordPress Theme Gallery from Premium WordPress
• Premium WordPress Themes Gallery from Hack WordPress
• 100 Premium WordPress Themes from Outlaw Design Blog