Jump to content

Help with creating magazine style archive page in WordPress


Cyberchimps

Recommended Posts

I will try to keep this as concise as possible.

 

We are doing a site for a client and need some help with creating a magazine style template for the archive page for the various categories.

 

We are using the following theme: http://www.wpzoom.com/demo/manifesto/ which features this magazine style format for the way it handles the featured posts below the feature slider and the other thing. We want to feature the same format on the individual category pages, but are running into a few issues. Let me copy and paste the code that accomplishes this on the home page:

 

<div id="featCategories">

          <?php
          $cc = 0;
          $c = 10;

          while ($cc < $c)
          {

          $cc++;
          $category = "wpzoom_featured_big_category_" . "$cc";

          if ($$category != 0)
          {

          $cat = get_category($$category,false);

          $catlink = get_category_link($$category);

    $breaking_cat = "cat=".$$category;  // Breaking tag slug

    wp_reset_query();

    query_posts("showposts=$wpzoom_featured_big_categories_posts&$breaking_cat&order_by=post_date&order=DESC");

    ?>

            <div class="category<?php if (!($cc % 2)) {echo ' category-last';} ?>">

              <div class="title">
                <a href="<?php echo get_category_feed_link($$category, $feed ); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/icon_rss.png" alt="" /></a>
                <h3><a href="<?php echo"$catlink";?>"><?php echo"$cat->name";?></a></h3>
              </div><!-- end .title -->

 

I understand what the php function is doing, but unfortunately as it is written it calls from a setting in the back end for which categories you want displayed on the home page. What I'm interested in taking from this is the following (which is what is ultimately allowing for the two box style magazine layout:

<div class="category<?php if (!($cc % 2)) {echo ' category-last';} ?>">

 

category-last is the style class which floats the posts on the right side to the right, so every other post needs to have this class.

 

Here is the code for the current archive.php page (sorry for all the code but I'm sure you would be asking for it anyway)

<?php wp_reset_query(); ?>
          <div id="archive">

            <?php if (is_category()) { ?>

            <div class="title breadcrumbs">
              <?php $cat_ID = get_query_var('cat'); ?>
              <a href="<?php echo get_category_feed_link($cat_ID, '' ); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/icon_rss.png" alt="" /></a>
              <?php echo '<h3>'; wpzoom_breadcrumbs(); echo'</h3>'; ?>
            </div><!-- end .title -->

            <?php }
            elseif (!is_category() && !is_home()) { ?>

            <div class="title breadcrumbs">
              <?php echo '<h3>'; wpzoom_breadcrumbs(); echo'</h3>'; ?>
            </div><!-- end .title -->

            <?php }
            else { ?>

            <div class="title">
              <h3><?php _e('Recent Posts', 'wpzoom');?></h3>
            </div><!-- end .title -->
            <?php } ?>

            <div class="box">

<?php if (have_posts()) : ?>
            <ul class="posts">
<?php
    while (have_posts()) : the_post();
    $i++;
?>
              <li>
                <?php unset($img);
if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
					$thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
            $img = $thumbURL[0];
					}

            else {
                unset($img);
                if ($wpzoom_cf_use == 'Yes')
                {
                  $img = get_post_meta($post->ID, $wpzoom_cf_photo, true);
                }
                else
                {
                  if (!$img)
                  {
                    $img = catch_that_image($post->ID);
                  }
                }
              }

         if ($img){
         $img = wpzoom_wpmu($img);
         ?>
        <div class="cover"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&h=120&w=160&zc=1" width="160" height="120" alt="<?php the_title(); ?>" /></a></div><?php } ?>
                <div class="postcontent">
                  <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                  <div class="postmetadata">
                    <ul>
                      <li class="calendar"><?php the_time("$dateformat"); ?></li>
                      <li class="author"><?php _e('By', 'wpzoom');?> <?php the_author_posts_link(); ?></li>
                      <li class="category"><?php the_category(', '); ?></li>
                      <li class="comments"><a href="<?php the_permalink() ?>#commentspost" title="Jump to the comments"><?php comments_number(__('no comments', 'wpzoom'),__('1 comment', 'wpzoom'),__('% comments', 'wpzoom')); ?></a></li>
                    </ul>
                  </div>
                  <?php the_excerpt(); ?>
                  <p class="more"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="readmore" rel="nofollow"><?php _e('continue reading »', 'wpzoom');?></a> <?php edit_post_link( __('Edit this post', 'wpzoom'), ' | ', ''); ?></p>
                </div>
                <div class="cleaner"> </div>
                <div class="sep"> </div>
              </li>
<?php endwhile; //  ?>
            </ul>
            <div class="cleaner"> </div>
  <?php else : ?>

  <p class="title"><?php _e('There are no posts in this category', 'wpzoom');?></p>

  <?php endif; ?>

          <div class="navigation">
            <p class="more"><?php next_posts_link(__('« Older Entries', 'wpzoom')); ?><?php previous_posts_link(__('Newer Entries »', 'wpzoom')); ?></p>
          </div><!-- end .navigation -->

            </div><!-- end .box -->

          </div><!-- end #archive -->

          <div class="cleaner"> </div>

So basically I just need help with writing a simple little function that allows me to make every second post call that "category-last" class instead of just "category".

 

Again I realize this was long, but any help would be greatly appreciated.

Link to comment
Share on other sites

<?php wp_reset_query(); ?>
          <div id="archive">

            <?php if (is_category()) { ?>

            <div class="title breadcrumbs">
              <?php $cat_ID = get_query_var('cat'); ?>
              <a href="<?php echo get_category_feed_link($cat_ID, '' ); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/icon_rss.png" alt="" /></a>
              <?php echo '<h3>'; wpzoom_breadcrumbs(); echo'</h3>'; ?>
            </div><!-- end .title -->

            <?php }
            elseif (!is_category() && !is_home()) { ?>

            <div class="title breadcrumbs">
              <?php echo '<h3>'; wpzoom_breadcrumbs(); echo'</h3>'; ?>
            </div><!-- end .title -->

            <?php }
            else { ?>

            <div class="title">
              <h3><?php _e('Recent Posts', 'wpzoom');?></h3>
            </div><!-- end .title -->
            <?php } ?>

            <div class="box">

<?php if (have_posts()) : ?>
            <ul class="posts">
<?php
$i = 0;
    while (have_posts()) : the_post();
    $i++;
?>
              <li>
                <?php unset($img);
if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
					$thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
            $img = $thumbURL[0];
					}

            else {
                unset($img);
                if ($wpzoom_cf_use == 'Yes')
                {
                  $img = get_post_meta($post->ID, $wpzoom_cf_photo, true);
                }
                else
                {
                  if (!$img)
                  {
                    $img = catch_that_image($post->ID);
                  }
                }
              }

         if ($img){
         $img = wpzoom_wpmu($img);
         ?>
        <div class="cover"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&h=120&w=160&zc=1" width="160" height="120" alt="<?php the_title(); ?>" /></a></div><?php } ?>
                <div class="postcontent">
                  <h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                  <div class="postmetadata">
                    <ul>
                      <li class="calendar"><?php the_time("$dateformat"); ?></li>
                      <li class="author"><?php _e('By', 'wpzoom');?> <?php the_author_posts_link(); ?></li>
                      <li class="<?php if($i%2 == 0) echo 'category-last';  ?> category"><?php the_category(', '); ?></li>
                      <li class="comments"><a href="<?php the_permalink() ?>#commentspost" title="Jump to the comments"><?php comments_number(__('no comments', 'wpzoom'),__('1 comment', 'wpzoom'),__('% comments', 'wpzoom')); ?></a></li>
                    </ul>
                  </div>
                  <?php the_excerpt(); ?>
                  <p class="more"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="readmore" rel="nofollow"><?php _e('continue reading »', 'wpzoom');?></a> <?php edit_post_link( __('Edit this post', 'wpzoom'), ' | ', ''); ?></p>
                </div>
                <div class="cleaner"> </div>
                <div class="sep"> </div>
              </li>
<?php endwhile; //  ?>
            </ul>
            <div class="cleaner"> </div>
  <?php else : ?>

  <p class="title"><?php _e('There are no posts in this category', 'wpzoom');?></p>

  <?php endif; ?>

          <div class="navigation">
            <p class="more"><?php next_posts_link(__('« Older Entries', 'wpzoom')); ?><?php previous_posts_link(__('Newer Entries »', 'wpzoom')); ?></p>
          </div><!-- end .navigation -->

            </div><!-- end .box -->

          </div><!-- end #archive -->

          <div class="cleaner"> </div>

 

That should work.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.