- August 28th, 2008
- 55 Comments
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.
Magazine themes have a few characteristics that distinguish them from traditional blog themes.
- Magazine themes only use excerpts or headlines on the front page, while standard blogs will use either full posts or excerpts.
- 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.
- 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 Magazine3 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.
- 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.
- 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.
- 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.
- 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 ProBlogger5 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.
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.
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.
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.
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 Macalicious13 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.
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 Framework15
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 Framework16
Using the popular 960 Grid System4017 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 jQuery18
This tutorial uses jQuery to create size-degrading headers that will keep your grid looking professional.
- Build a Featured Post Section in WordPress19
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?20
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 Pro21, 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 Layout22
Darren takes a look at the Mimbo4323 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 WordPress24
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 Loop25
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: Prelude26
- Part 1 — The Loop27
- Part 2 — DOMtab, Tabber, and More28
- Part 3.1 — Navigation – Second Lavel Menu29
- Part 3.2 — Conditional Navigation Menus30
Chris Coyier of CSS-Tricks recently published a tutorial Creating a Slick Auto-Playing Featured Content Slider31. 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 WordPress32.
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 Menu33.
Speckyboy put together a nice collection of the Top 30 Modern Web Designs (Magazine Style Showcase)34. 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.
Grid-Based Design: Six Creative Column Techniques38
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 Designs39
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 System4017
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.
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.
For more of the best free magazine themes, see:
- 20 of the Best Free Magazine WordPress Themes49 from Pingable
- Free Magazine-Style WordPress Theme Gallery50 from Hack WordPress
- 45+ Free WordPress Themes with Magazine or Grid Layouts51 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.
For more of the best premium magazine themes, see:
- Best News and Magazine Style Premium WordPress Theme Gallery64 from Premium WordPress
- Premium WordPress Themes Gallery65 from Hack WordPress
- 100 Premium WordPress Themes66 from Outlaw Design Blog
- 1 http://graphpaperpress.com/2007/12/09/gridline-lite/
- 2 http://graphpaperpress.com/2007/12/09/gridline-lite/
- 3 http://graphpaperpress.com/2007/12/08/gridline/
- 4 http://graphpaperpress.com/2007/12/08/gridline/
- 5 http://problogger.net/
- 6 http://problogger.net/
- 7 http://www.dazeddigital.com/Default.aspx
- 8 http://www.dazeddigital.com/Default.aspx
- 9 http://boxwish.com/
- 10 http://boxwish.com/
- 11 http://popvine.com/
- 12 http://popvine.com/
- 13 http://macalicious.com/
- 14 http://macalicious.com/
- 15 http://nettuts.com/html-css-techniques/prototype-a-magazine-style-home-page-template-with-the-blueprint-css-framework/
- 16 http://nettuts.com/working-with-cmss/build-a-newspaper-theme-with-wp_query-and-the-960-css-framework/
- 17 http://960.gs/
- 18 http://nettuts.com/html-css-techniques/build-a-basic-newspaper-style-layout-with-wordpress-and-jquery/
- 19 http://nettuts.com/working-with-cmss/build-a-featured-posts-section-for-wordpress/
- 20 http://nettuts.com/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/
- 21 http://www.darrenhoyt.com/2008/03/12/mimbo-pro-magazine-theme-released/
- 22 http://www.darrenhoyt.com/2007/07/24/in-praise-of-wordpress-template-tags-part-ii-the-magazine-layout/
- 23 http://www.darrenhoyt.com/2007/08/05/wordpress-magazine-theme-released/
- 24 http://www.darrenhoyt.com/2008/02/12/creating-two-tiered-conditional-navigation-in-wordpress/
- 25 http://www.darrenhoyt.com/2008/02/02/combining-featured-posts-with-the-standard-loop/
- 26 http://www.headsetoptions.org/2008/01/04/anatomy-of-a-magazine-style-premium-wordpress-theme-prelude/
- 27 http://www.headsetoptions.org/2008/01/11/anatomy-of-a-magazine-style-premium-wordpress-theme-part-1-the-loop/
- 28 http://www.headsetoptions.org/2008/01/19/anatomy-of-a-magazine-style-premium-wordpress-theme-part-2-domtab-tabber-more/
- 29 http://www.headsetoptions.org/2008/02/11/anatomy-of-a-magazine-style-premium-wordpress-theme-part-31-navigation-%E2%80%93-second-level-menu/
- 30 http://www.headsetoptions.org/2008/04/19/anatomy-of-a-magazine-style-premium-wordpress-theme-part-32-conditional-navigation-menus/
- 31 http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/
- 32 http://perishablepress.com/press/2006/11/22/perishable-press-triple-loop-for-wordpress/
- 33 http://www.catswhocode.com/blog/blogging/wordpress/wordpress-magazine-style-horizontal-dropdown-menu-320
- 34 http://speckyboy.com/2008/05/26/top-30-modern-web-designs-magazine-style-showcase/
- 35 http://www.subtraction.com/pics/0703/grids_are_good.pdf
- 36 http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/
- 37 http://www.markboulton.co.uk/journal/comments/simple_steps_to_designing_grids/
- 38 http://www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/
- 39 http://www.webdesignerwall.com/trends/grid-and-column-designs/
- 40 http://960.gs/
- 41 http://code.google.com/p/blueprintcss/
- 42 http://com1.devnet.scd.yahoo.com/yui/grids/
- 43 http://www.darrenhoyt.com/2007/08/05/wordpress-magazine-theme-released/
- 44 http://www.darrenhoyt.com/2007/08/05/wordpress-magazine-theme-released/
- 45 http://www.der-prinz.com/2008/01/20/wordpress-magazine-style-theme-branfordmagazine/
- 46 http://www.der-prinz.com/2008/01/20/wordpress-magazine-style-theme-branfordmagazine/
- 47 http://www.wpthemedesigner.com/2008/05/07/rebel-magazine-theme/
- 48 http://www.wpthemedesigner.com/2008/05/07/rebel-magazine-theme/
- 49 http://www.pingable.org/20-of-the-best-free-magazine-wordpress-themes/
- 50 http://hackwordpress.com/best-magazine-style-wordpress-themes/
- 51 http://www.wpzoom.com/wordpress-themes-sets/45-free-premium-wordpress-themes-with-magazine-or-grid-layouts/
- 52 http://www.wordpressthemesmarket.com/premium-themes/magazine-news-wordpress-theme/
- 53 http://www.wordpressthemesmarket.com/premium-themes/magazine-news-wordpress-theme/
- 54 http://prothemedesign.com/themes/mimbo-pro/
- 55 http://prothemedesign.com/themes/mimbo-pro/
- 56 http://www.woothemes.com/2008/02/the-gazette-edition/
- 57 http://www.woothemes.com/2008/02/the-gazette-edition/
- 58 http://www.woothemes.com/2008/04/fresh-news/
- 59 http://www.woothemes.com/2008/04/fresh-news/
- 60 http://www.revolutiontheme.com/themes/revolution-magazine
- 61 http://www.revolutiontheme.com/themes/revolution-magazine
- 62 http://quommunication.com/news/
- 63 http://quommunication.com/news/
- 64 http://www.premiumwp.com/archive/2008/06/18/best-news-and-magazine-style-premium-wordpress-theme-gallery/
- 65 http://wphacks.com/best-premium-wordpress-themes-gallery/
- 66 http://outlawdesignblog.com/2008/100-premium-wordpress-themes/