10 Ways to Get That Elusive ‘Magazine’ Look in WordPress

WordPress ‘Magazine’ themes haven’t been around for long, but they’ve exploded in popularity. In this post we’ll look at ten ways to get that elusive ‘magazine’ look into your own WordPress theme.

1. Dynamic sidebars

On just about every blog out there, the sidebar will remain the same on every single page you visit. With your magazine theme you obviously want to avoid the ‘hey, I’m a blog!’ look. The code below is adapted from the Mimbo theme.

So. Using simple if statements we can set content to display on posts, pages, whatever. In this example if the current page is a post then we’ll display other posts from the same category:

<?php
if ( is_single() ) :
global $post;
$categories = get_the_category();
foreach ($categories as $category) : $posts = get_posts('numberposts=5&exclude=' . $GLOBALS['current_id'] . '&category='. $category->term_id);
if(count($posts) > 1) 

{ ?> <div class="widget"> 

<h3>More posts in <?php echo $category->name; ?>

'</h3> <ul> <?php foreach($posts as $post) : ?> 

<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> 

<?php endforeach; ?> </ul> </div> <?php } ?> 

<?php endforeach; ?> <?php endif; ?>

2. Auto image resizing in posts

This is something that all the magazine themes do these days, but not without good reason; auto image resizing is super useful. There are a number of scripts that do the job, but my favourite is phpThumb

The example below is taken from an article I wrote on CatsWhoCode a while ago. Using phpThumb, it adds a shortcode that allows you to upload any old image and then resize it automatically to 590px (or whatever the width of your content area is). To use it, just put the url of the image between [img] and [/img] ie [img]/images/animage.jpg[/img]. Just put the code below into your functions.php file.

<?php function imageresizer( $atts, $content = null ) {
return ‘<img src=”/THEMEURL/phpthumb/phpThumb.php?src=’ . $content . ‘&w=590″
alt=””>’; }

add_shortcode(‘img’, ‘imageresizer’); ?>

3. Featured content gallery

The inevitable! The featured content gallery that is literally plastered everywhere! But hey, you can’t deny it looks quite nice. It’s super easy to use – a plugin of it is available at FeaturedContentGallery.com, or a tut showing you how to implement it directly into your theme is on CatsWhoCode.

4. An amazing options page

Something else that is a necessity these days is to have an awesome options page for your theme. Luckily creating on options page is something that we’ve just covered on [wp]! In part one we created the backend, and in part two we implemented it.

5. Tabbed sidebar

Tabbed content on your sidebar is very cool. Fact. Thankfully, they’re very easy to implement, as another post here on [wp] shows.

6. Display most viewed posts

This is something very magaziney (that is a word :P). Using Alex King’s Popularity Contest plugin, we can display the most viewed post, with the following code:

<?php if (function_exists('get_most_viewed')): ?>
<li>
<h3>Most Viewed</h3>
<ul>
<?php get_most_viewed('post', 5); ?>
</ul>
</li>
<?php endif; ?>

7. Display selected posts on the homepage without an extra category

Most magazine themes demand you create a category called ‘Featured’. We obviously don’t want to do this as it’s very annoying to have a category called ‘Featured’ left around when you switch themes. As Jean explains on WPRecipes, using custom fields, you can cleverly avoid the dreaded category and instead create a custom field called ‘Featured’, and for posts you want to be featured, just put a 1 as the value. Anyway, the world’s longest clause has now finished and I’ve had to put a full stop in. Do it with the following code:

<?php if (have_posts()) :
while (have_posts()) : the_post();
$customField = get_post_custom_values("img");
if ( (isset($customField[0])) && ($customField[0] == "myValue") ) {
//Custom field have myValue as a value, display info
the_title();
the_excerpt();
}
endwhile;
endif;
?>

8. Highlight current category

This is something else that is very magaziney. Highlighting the current category is very easy to do, as is done in the The Stars theme. Just create some styling for current-cat and you’re done.

<li class="<?php if (((is_home()) && !(is_paged())) or
(is_archive() && !(is_category())) or (is_single()) or (is_paged()) or (is_search()))
{ ?>current-cat<?php }
else { ?>cat-item<?php }
?>"><a href="<?php echo get_settings('home');
?>"><?php _e( 'Home', 'wpbx' ) ?></a></li>

9. Awesome breadcrumbs

Breadcrumbs are pretty much bog standard these days, but awesome breadcrumbs? Not likely. Thankfully, I wrote a tut on WPHacks a while ago explaining how to make Apple.com style breadcrumbs. Check it out and you too can have awesome breadcrumbs.

10. Change the default gravatar

Something I did when making my NomeBlog theme was change the default gravatar. Of course, it’s a magaziney thing to do. Thankfully it is quite easy too – just create a 100x100px image gravatar.gif and upload it to your theme’s directory. Then add the following code to your functions.php file:

<php if ( !function_exists('fb_addgravatar') ) {
function fb_addgravatar( $avatar_defaults ) {
$myavatar = get_bloginfo('template_directory').'/gravatar.gif';
//default avatar
$avatar_defaults[$myavatar] = 'Exciting new gravtar';

return $avatar_defaults;
}

add_filter( 'avatar_defaults', 'fb_addgravatar' );
}?>

Once you’re done, you can change the default gravatar in the backend under ‘Discussion’.

And that’s that

There we are. Wasn’t that fun! Anything you’d like to add? Leave a comment.