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

by Jean. 47 Comments -

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, 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!

Comments (47) - Leave yours

  1. Dragon said:

    Thanks for #2.

    Please forgive the noob question but how then do I display the list of posts on a page other than the home page? Thanks again.

  2. jbj said:

    @Dragon: You got to use the WordPress loop and the query_posts() function. X-OR is currently writing a tutorial about that subject, so stay tuned! You should suscribe to our rss feed to be sure you’ll not miss the tutorial.

  3. Dragon said:

    Thanks so much for the VERY quick reply (fastest ever for me). I will certainly subscribe to your feed. Unfortunately though I need to have this part of the project (http://dragontheory.com/wall2.0c) done in 8 days. So I don’t have time to wait. I am a front-end-only dev that is totally new to WordPress and PHP. I know this is getting off subject from your article (and don’t want to let the cat out of the bag) so is it possible to corospond via email?

  4. Blogging for Bloggers said:

    Hey Jean

    With regard to the thumbnails, how do you specify the size and what about position or is there anything else I need to take care of, what about adding the code on the index.php (homepage)?

    Thanks
    Yan

  5. jbj said:

    Hi Yan!
    You can use CSS to specify the position and size of the image. For exemple, add a postimg class to your image in the html code:

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

    and then style the class in your style.css file:

    .postimg{
    width:90px;
    height:90px;
    position:relative;
    }

    :)

  6. Mehmet said:

    Great post JBJ,

    I am not sure whether it is correct or not, but whenever I use a wp_query, I am placing a wp_reset_query() right after the loop to put things back the way I found them.

  7. jbj said:

    Hey Mehmet, thanks for the interesting contribution! Another way to reset the loop after a wp_query() or a query_posts() is the rewind_posts() function.
    This function will reset $current_post and $post so you can start a new loop and fetch data from the last posts. Pretty much the same than the wp_reset_query() :)

  8. Magazine WordPress theme said:

    [...] как да създадем Magazine WordPress theme 6 tricks and tip to create a “Magazine” WordPress theme WP-Magazine WordPress ThemeWidget-Ready, User-Friendly, and Optimized for WordPress Versions 2.2 [...]

  9. The NMP Network : WordPress News For The Week Of October 10th 2008 said:

    [...] Six Tips On Creating A Magazine Theme – For the ambitious ones out their, Catswhocode.com published an article describing six tips and tricks on creating a Magazine styled theme. The article describes how to use conditional comments, static page as the homepage, multiple queries in the homepage, using custom fields and more. The site even gives you code examples that you can copy and paste for learning purposes. – http://www.catswhocode.com/blog/blogging/wordpress/6-tricks-and-tip-to-create-a-magazine-wordpress-t… [...]

  10. J Mehmett said:

    Fabulous thing!!! I can say that it is easy to create your own theme. But if someone found of another theme s/he has the modification option, yet.

    In the “Conditionnals comments” section of this article, I would like to add:

    is_home(); function is going to be deprecated in the upcoming WP releases and though its still in use, its successor is: is_front_page();

  11. Jamie Souef said:

    @J Mehmett: your are right about the is_front_page();, but you must take into account legacy versions that will not support the new features. generally, as a rule, i stop using depreciated elements 1 version after it’s been deemed ‘deprecated’. IE is_front_page(); i wouldn’t use till wp 2.8

  12. J Mehmett said:

    @Jamie Souef:

    Currently, I use both of the two functions as:

    So the theme will safely work on both the new and the legacy versions even after is_home(); is deprecated after WP3 or something beyond it.

  13. jbj said:

    J Mehmett idea of using both in a OR statement is definitely the right way in my opinion! Thanks to both of you for the interesting discution!

  14. stellar said:

    wordpress is great but there are some features that is somewhat difficult. it is not user-friendly but i think there are some alternatives to it. the codes you listed are of great help. thanks!

  15. J Mehmett said:

    @stellar:

    I can say WordPress is the easiest blog/CMS solutions when it comes its code. It has sweet and clean APIs that you can’t find anywhere else and it has well documented and user friendly Wiki called Codex and if you visit there respective two weeks, you’ll become real WP fan. Sorry for the off topic, but I wanted to tell you the word, deeply :D

    Magazine themes has their own challenges and someone needs huge check list to start creating his own magazine or news oriented theme.

  16. Roger Coathup said:

    We recently launched a WordPress based Magazine website:

    http://www.daisygreenmagazine

    Some clever tricks in there, in particular with regard to images (e.g. autothumbnailing, and pulling from a post without the need for custom fields).

    Let me know if there are any bits you particularly like, and I’ll explain the steps to achieve them.

  17. zingo said:

    Thanks a million times.You have been so helpful.I am currently creating a news theme.I am having some challenges but following your tutorials gradually. Thank you so much

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!