6 tricks and tips to create a “Magazine” WordPress theme

A lot of bloggers enjoys the magazine WordPress themes. Even if there's a lot of Magazine themes availables, in my opinion nothing is better than creating your own. I have compiled 6 excellent tips and tricks to help you to create a killer WordPress theme.


1 – Conditionnals comments

WordPress has several functions to determine on what kind of page the visitor is located. With these functions, it is possible to display some parts only on specific locations.
These are 14 functions:

  • is_home()
  • is_single()
  • is_page()
  • is_category()
  • is_author()
  • is_date()
  • is_year()
  • is_month()
  • is_day()
  • is_time()
  • is_archive()
  • is_search()
  • is_paged()
  • is_404()

For exemple, if you’d like to display your tagcloud only on your blog homepage, you’ll use the is_home() function:

<?php if ( is_home() ) { ?>
<h3>Tags</h3>
	wp_tag_cloud('smallest=8&largest=18');
<?php } ?>

2 – Static page as a homepage (With PHP!)

By default, WordPress allows you to define a blog page as a homepage, instead of the list of posts. Even if this option is standard, many bloggers are unaware of its existence.
To do this, go to your admin panel, then in Settings → Reading and select “Front page displays: A static page.

Like the other pages of your blog, the homepage will be editable in your WordPress dashboard. If you wish to insert php code, the PHP Exec plugin is a very good choice.

3 – Multiples queries in homepage

By default, most themes homepage consists of a list of post in chronological order, whatever the category in which these post belongs to.
A key feature of the themes magazine is that their homepage displays posts by categories instead of publication date.
Take the simple example that you run a blog speaking of the three most prevalent OS. You will have a Mac category, a GNU/Linux category and a Windows category. The following example shows how to display the home page articles last two of these three categories:

<?php
//IDs of your categories
$display_categories = array(1,7,4);
foreach ($display_categories as $category) {
	//showposts = Number of posts to display per category
	query_posts("showposts=2&cat=$category");
        $wp_query->is_category = false;
        $wp_query->is_archive = false;
        $wp_query->is_home = true;
        ?>
	//Displays category name
	<h3><a href="<?php echo get_category_link($category);?>"><?php
        single_cat_title(); ?></a></h3>

	//WordPress loop
	<?php while (have_posts()) : the_post(); ?>
		<h5><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h5>
		<a href="<?php the_permalink() ?>" rel="bookmark"></a>
		<?php the_excerpt(); ?>
      	<?php endwhile; ?>
<?php } ?>

4 – Using custom fields to display thumbnails on blog homepage

Since we launched Cats Who Code in June, we received several emails asking us about how we display thumbnails on out homepage. The answer is simple: We use a custom field.
When you’re writing a new article on WP Dashboard, you’ll see a “Custom Fields” option at the bottom of the page, allowing you to create a field name (Key) and give it a value.

As an example, in your article, create a new field. Give him as a key Image and value as the absolute url of an image you want displayed in the summary of your article on the homepage.

Now, edit the index.php file from your theme. In WordPress loop, add the following code below your article title:

<?php
$values = get_post_custom_values("Image");

if (isset($values[0])) {
?>
      <img src="<?php echo $values[0]; ?>" alt="" />
<?php } ?>

If you refresh your blog homepage now, you’ll see your thumbnail. Easy, isn’t it?

5 – Killer navigation menu

Cats Who Code
I recently wrote a guest post on the popular blog Hack WordPress about the Top 5 navigation menus for WordPress. You should definitely have a look at this post!

6 – Tabs

If you read a lots of blogs, you’ve probably already seen very long sidebars due to the ammount of widgets (Tagcloud, sponsors, latest posts, etc.) This isn’t only unesthetic, it’s only hard to find any kind of info in a so congested sidebar.
To deal with this problem, more and more bloggers use tabs for a cleaner presentation of their sidebar content.

Several solutions are available. Among those I tested, Patrick Fitzgerald’s Tabber seems to be a pretty good solution.
Its implementation is simple: Once you included the tabber.js in the <head> section of your header.php file, you simply have to place a similar code in your sidebar:

<div class="tabber">

  <div class="tabbertab">
    <h3>Tags</h3>
    <?php wp_tag_cloud('smallest=8&largest=18');<?php
  </div>

  <div class="tabbertab">
    <3>Blogoliste</h3>
    <?php wp_list_bookmarks('categorize=0&title_li='); ?>
  </div>

</div>

And you, do you have a killer tip that we should add to this list? Tell us in the comments!