wpPro offers design, development and full-service professional WordPress hosting service for serious bloggers web design web development professional WordPress hosting

wpPro offers design, development and full-service professional WordPress hosting service for serious bloggers

Anatomy of a Magazine Style Premium WordPress Theme – Part 1 “The Loop”

Asides anyone?

To add to this mix, popular sites like Photomatt and WLTC extensively use asides. We know it’s has not been adopted into magazine style themes yet, but it is potentially one the most useful hacks you can add to your theme. Just to keep things simple, we will use the loop we created earlier as an example code and add the asides.

  1. <?php get_header(); ?>
  2. <?php while(have_posts()) : the_post(); ?>
  3. <div class=”post” id=”post-<?php the_ID(); ?>”>
  4. <?php if (in_category(#2)) : ?>
  5. <div class=”asides_entry”>
  6. <ul>
  7. <li><?php echo wptexturize($post->post_content); ?> · <?php comments_popup_link(’(0)’, ‘(1)’, ‘(%)’); ?></li>
  8. </ul>
  9. </div>
  10. <?php else : ?>
  11. <h1><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” rel=”bookmark”><?php the_title();
    ?></a></h1>
  12. <div class=”meta”>Posted on <?php the_time(’F jS, Y’) ?> under <?php the_category(’, ‘) ?> <?php if (function_exists(’the_tags’)) { ?><?php the_tags(”, ‘, ‘, ”); ?><?php } ?></div>
  13. <?php if (in_category(#)) : ?>
  14. <?php the_content(’Read the rest of this entry »’); ?>
  15. <?php else : ?>
  16. <?php the_excerpt (’Read the rest of this entry »’); ?>
  17. <?php endif; ?>
  18. <div class=”meta”>Published by <?php the_author() ?> // <?php comments_popup_link(’Comment now »’, ‘1 Comment »’, ‘% Comments »’, ‘commentslink’); ?></div>
  19. <?php endif; ?>
  20. <?php endwhile; ?>
  21. <?php get_sidebar(); ?>
  22. <?php get_footer(); ?>

The addition of lines 4 though 10 and line 19 will make posts in a chosen asides category display within a unordered list. You could download a copy of this file in text format or view the demo, note that posts 2 and 3 in our demo are listed within a bulleted list with no heading. We use headings on this site, but most asides do not display any headings.

01.11.2008 - 1:31 pm - Design, How to, Resources, Techniques, Tips - 1,524 views -

20 Responses to “Anatomy of a Magazine Style Premium WordPress Theme – Part 1 “The Loop””

Pages: [4] 3 2 1 »

  1. 20
    When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine Says:

    [...] Part 1 — The Loop [...]

  2. 19
    Comment on Anatomy of a Magazine Style Premium WordPress Theme … Says:

    [...] More here: Comment on Anatomy of a Magazine Style Premium WordPress Theme … [...]

  3. 18
    Wordpress Themes: 20+ Tutorials, Clubs, Themes, and Resources | Outlaw Design Blog - A Graphic Design Blog Says:

    [...] Anatomy of a Magazine Style Premium WordPress Theme – Part 1 “The Loop” No quite sure how the wordpress loop works yet? Try checking out this article and you should have better idea of how to use the above 1001 wordpress loops. How to make a random post button This simple tutorial by WP Guy teaches you how to add a random post function into your sidebar. [...]

  4. 17
    Sunny Says:

    @ Chico

    One loop can display posts from X and then Y, use this method from Codex.

    To display archives on a monthly basis try using a plugin such as this.

  5. 16
    Chico Says:

    Hi

    I have been looking around for good examples of multiple loops use in WP.

    I am desperately trying to make something similar work for my blog. My desired setup would have:

    On front page, the latest post from categoryX, followed by the latest post from categoryY then two lists outside the loop ( I think ) with the top 5 rated articles in one and the 5 most viewed posts in the other. Both of these lists would be generated by plugins (and repetition of posts not an issue on the frontpage which would not show posts in the loop after the two featured ones)

    However in my archives page I would need to show all posts grouped by month.

    Any help/tip/idea to modify the code above for my needs would be immensely appreciated.

    C.

    p.s I realise my request is similar to previous comment but still need help.

Pages: [4] 3 2 1 »

Leave a Reply