Trends

Exploring the Current WordPress Magazine Theme Design Trends

We take a look at some of the unique design trends for WordPress magazine themes that have been cropping up recently.

There’s no denying the popularity of WordPress as an open source CMS. It has a terrific advantage when it comes to theming and plugin development because there are so many helpful resources with plenty of online support. Building your own WordPress theme from scratch has never been easier, and building lots of unique features into that theme has become much more commonplace.

In this post I’d like to cover a series of unique design trends for WordPress magazine themes. WordPress has evolved from a simple blogging platform to an extensive CMS giving developers more control with an enormous API. News & magazine themes have sprouted from this evolution and continue to improve with each passing year. I hope these magazine trends can offer a reliable starting point for WordPress designers and developers.

Mixed Content Styles

Some of the largest online news websites take advantage of mixing up content listings. Regular blog themes list posts in a consistent format all the way down the page. But magazines have a greater opportunity to create different article columns focusing on categories, tags, comments, authors, and other bits of metadata. Free WordPress magazine themes and premium themes all offer content-first layouts and eye-catching home pages. 

The idea of mixed content is to give readers easy access to browse through a vault worth of golden content. Magazines typically publish content more frequently than blogs, and this creates a precedent to share more content with readers. Homepage designs have become especially detailed like the Hot Topix theme.

hot topix dense magazine theme wordpress

Right at the top you’ll find a widget showcasing the latest five posts with featured images. But scrolling down into the main page you’ll find a hodgepodge of article list styles with small thumbnails, big thumbnails, even no thumbnails. You’ll also notice a dynamic sorting widget to sort articles by most popular, publication date, or number of comments.

I don’t think every magazine needs to be as detailed as this example. The Hot Topix theme is meant to be slightly exaggerated by showcasing all of the different methods for sorting articles. But it’s still a great example for design inspiration. With large enough thumbnail images you can make big featured posts along with average-sized listings and small thumbnails in the sidebar.

Generic blog themes are known to list recent content unadorned of any frills. Magazine themes should be more ostentatious by adding unique content outside of recent posts.

Fullpage Sliders & Rotators

Every full-scale magazine theme includes some type of content rotator, carousel, or large article display. Featured images are constantly used to promote news with online magazine themes. Large content sliders are much more prominent since many posts have a featured image attached to them.

A large content display/rotator certainly wouldn’t fit into every magazine theme. Typically you should make room on the homepage to showcase new posts or very popular articles. The method of organization could be relative to number of comments, number of views, number of shares, or any other metric.

But keep in mind these large displays shouldn’t replace the prototypical content listing. Instead, this feature should draw awareness and bring clicks deeper into the site – but readers should also be able to easily find recent post content.

widemag large wide magazine themeforest theme

The example found on Widemag is peculiar but intriguing. Directly underneath the page header you’ll find a fullscreen slider which rotates between recent posts.

The layout is fully responsive, and the content rotator adjusts based on the browser width. I think it looks great in the sense that it behaves well and blends nicely. But it would be nicer if each post link included more than just the headline.

filtered mag magazine theme wordpress

FilteredMag is fascinating because it uses a full width carousel rotator which loops between a series of different posts. Each post includes the headline along with the category and publication date. The featured images look crisp and felicitous in the background.

When visitors first land on the homepage this slider will undoubtedly capture their attention. Before scrolling anywhere visitors have a large view into the magazine’s recent content. Again this may not be an ideal solution to every layout, but when done properly it looks fantastic.

Dropdown Mega-Menus

Plenty of larger online magazines use dropdown mega-menus because they can hold a lot of content. Each dropdown targets a specific set of links – usually categories which have nested sub-categories.

Mega-menus often span the entirety of the page and can take many different forms. These menus derive from the horizontal nav bar which is commonly associated with single-column dropdowns. But the mega-menu is more suited to websites that have a lot of content like you would expect to find in a magazine.

kami magazine wordpress theme blog design

I like the example on KAMI because it demonstrates how you can use different mega-menu styles. Some dropdowns might have columns with different links while other dropdowns could display recent posts under a specific category.

The most common choice is a hybrid as seen in the screenshot above. This combines a small list of sub-categories along with a few recently published articles.

Everything in a good magazine theme should drive readers further into the website. Once a magazine has been online for 3+ years the site naturally compiles a treasure trove of post archives. New readers might love to check out a certain post from 24 months ago, but older content isn’t found easily. This is why sub-categories and related posts are so helpful in modern WP themes.

Accessible Related Posts

We all know about related post content – from widgets to plugins there are hundreds of choices. But I’d like to expand on the various methods of adding these related posts into a WordPress theme. Notably, the goal is to capture attention from a reader and drive them to click onto another article of intrigue.

weekly news premium wordpress theme related posts

Take a peek at an example post on the Weekly News theme. Directly next to the first couple paragraphs is a small widget listing other related posts that are worth reading. Each link captures attention quickly using thumbnail images. This related articles list would surely improve the number of average pageviews per visit – but it’s not the only option.

In the sidebar you’ll find a “weekly timeline” widget that lists a series of new articles in descending order by post date. Each link is color-coded based on category and the whole widget blends nicely into the design. These unique widgets can perform much better than you might expect. You just need to have the courage to brainstorm concepts like this and try them out on a live website.

For a more traditional approach try adding some related content directly after the post. The Weekly News theme uses typical WordPress “next post/previous post” links underneath each article. I find these links work a lot better-using thumbnails, but they’re worth implementing either way.

There are dozens of choices for displaying related posts, and they’re all useful in their own way. But a common principle is to make the related links accessible and enticing. Thumbnail photos can help, big link text can also help. Find some interesting methods that could work and test them out in your next design.

Expansive Footer Areas

If you haven’t guessed by now, magazine themes are typically more boisterous and colossal in size compared to blog themes. Taking advantage of every page section is important. A website’s footer can range from just a few links to a multitude of columns. Magazine themes tend to fall somewhere in the middle, veering towards the larger side if there’s enough content to fill.

blackmag magazine wordpress theme

One such example is BlackMag which features a very common magazine footer. It uses a solid background color and three different columns, only one of which lists recent posts. The other two list the magazine editors along with some extra details on the website itself.

There’s also a newsletter subscription field along with links to the magazine’s social network profiles. A website’s footer is typically expected to hold links that aren’t deemed important enough for the main navigation. This is the perfect place to link pages that may not be crucial but are still important(author archives, social media).

scoupmag scopemag magazine wordpress footer

ScopeMag has a very similar layout style with four footer columns. But the content is more traditional with a list of categories, recent posts, and blogroll links. WordPress allows developers to build widgetized areas into any theme section, including the footer. So you could even build a custom widget listing recent posts from a certain author and swap that into the layout. If you can think it then it can be built.

Since magazine themes are meant to drive pageviews and breed lifetime readers, the footer should reflect this mentality. Keep unequivocal focus onto the website or related features like a newsletter.

The best way to conceptualize a new magazine design is by separating the trends you like from the trends you don’t like. It’s useful to spend time browsing through popular online magazines to gauge the user experience from your subjective opinion.

Nowadays WordPress has enough extensibility that you can build almost any idea you want. The question isn’t can it be built, but should it be built? I hope these trends can get you started down the right path to designing creative and usable magazine themes.

 

Featured image: Magazines, Photodune
This article was originally published in 2016.


About the Author Jake Rocheleau

Jake is a passionate writer & digital designer frequently researching the latest trends in UI/UX design and user behaviors. You can find work samples on his portfolio and follow his tweets @jakerocheleau.