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!

  • Pingback: My 585 | Wordpress Magazine Inspiration

  • http://www.nometet.com Alex

    Great post. Very very useful. TY

  • Pingback: 6 tricks and tip to create a “Magazine” WordPress theme | bloground.ro - Blogging resources, WordPress themes and plugins for your development

  • http://wpjunkie.com WPJunkie

    Great tips.
    I too get a lot of emails about my thumbnails on my blogs lol I do mine slightly different but still with custom fields.

  • http://jamielesouef.com Jamie Souef

    The custom fields part of wordpress is defiantly under utilized! so powerful but not so user friendly.

  • Pingback: Monetize Magazine » Blog Archive » Creating a Magazine theme for WordPress

  • http://www.dragontheory.com Dragon

    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.

  • http://www.lyxia.org jbj

    @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.

  • http://www.dragontheory.com Dragon

    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?

  • http://www.lyxia.org jbj

    @Dragon: Sure, send me an email and i’ll send you a sample code.

  • Pingback: WordPress SEO: How to optimize the title tag for search engines

  • http://bloggingtips.my Blogging for Bloggers

    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

  • http://www.lyxia.org jbj

    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;
    }

    :)

  • http://www.gabfire.com Mehmet

    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.

  • http://www.lyxia.org jbj

    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() :)

  • http://bloggingtips.my Blogging for Bloggers

    Hey Jean

    Thanks for the code. I’ll see what I can do with it. You know me and PHP just don’t go along well.

    Yan

  • http://www.egracecreative.com Brandon Cox

    This is a pretty great list. You see these features scattered around but thanks so much for collecting them in one place. Tagged for reference!

  • http://www.lyxia.org jbj

    @Brandon Cox: Glad you enjoyed it! Thanks for the nice words.

  • Pingback: WordPress News &amp; Notes - October 9, 2008 | Wordpress Blog Services

  • Pingback: Magazine WordPress theme

  • Pingback: WordPress News & Notes - October 10, 2008 | How To WordPress

  • Pingback: The NMP Network : WordPress News For The Week Of October 10th 2008

  • http://gunnerpress.com J Mehmett

    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();

  • http://www.lyxia.org jbj

    @J Mehmett: You’re right, the is_home() function have to be replaced by is_front_page(). Thanks for notifying me!

  • http://jamielesouef.com Jamie Souef

    @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

  • http://gunnerpress.com J Mehmett

    @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.

  • http://gunnerpress.com J Mehmett

    According to my above comment, It seems the site eliminated my code. I use both of the two tags as below:

    if (is_home() || is_front_page())

  • http://www.lyxia.org jbj

    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!

  • http://jamielesouef.com Jamie Souef

    @J Mehmett: Great tip with the OR (||) statement!

  • http://www.winehappy.com kaycee

    this is a helpful tip. Ive been searching for info about this.. thanks a lot!

  • http://wp-maganews.net/ Tom Riddle

    Great article !

    I have used these tips & tricks for my theme and I got a nice result.

    Thanks a lot !

  • http://www.timelessinformation.com Armen Shirvanian

    Magazine themes have a wonderful look to them that is quite appealing. I prefer them over some of the more boxy-looking themes that don’t have a relaxed feel.

  • http://www.gagazine.com stellar

    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!

  • http://gunnerpress.com J Mehmett

    @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.

  • http://thisismyurl.com Christopher Ross

    You do a great job of explaining the process, I’m working on my own magazine style template right now so this is a huge help. Thank you.

  • http://21thoughts.com Roger Coathup

    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.

  • http://www.technosamrat.com TechnoSamrat

    Nice post… really very good.. I’ll use some of them in my website…

  • http://poputech.com Popular Technology

    I don’t mean to compare but you are far better than most WP designers… at least you are sharing your knowledge… I saw a theme you made and I’m really really impressed :)

  • http://www.lyxia.org jbj

    @Popular Technology: Thanks a lot, I really appreciate your kind words!

  • http://www.dstudiobali.com/busby-seo-challenge/ SEO Contest

    Hey Jean

    Thanks for the code. I’ll see what I can do with it. I’m working on my own magazine theme right now so this is a huge help.

  • Pingback: WPTUT - Wordpress Tutorials

  • http://www.seosoeasy.com seosoeasy

    I will use this tips & tricks for my future theme that iam going to develop.thank you.

  • Pingback: links for 2009-02-10 | it's about time

  • http://info-helpdesksoftware.blogspot.com dablu

    Great post, I found it useful where did you stated this site

  • Pingback: How to Display Your Content on a Blog’s Front Page | Webdesigner Depot

  • Pingback: Tips menampilkan kontent dalam frontpage blog yang efektif « Webdesigner Resources

  • zingo

    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