Support » Themes and Templates » jQuery tabs displaying posts on index – Could use some help.

  • Hello everyone, I’m stuck in a pickle and would appreciate any help.
    I’ve been working on a theme and I’m just about done with it, but I hit a snag. On the index page, the goal is to have posts in tabs after the headline post, and before some single posts. I have every other function of the theme done but this one. So you can guess how frustrated I’ve been getting. 🙂

    Now I can get it to work when it’s just displaying one post. The code looks like this…

    <div id="tabs">
    <?php
    query_posts( 'showposts=1&offset=1' );
    if (have_posts()) :
    while (have_posts()) : the_post(); $category = get_the_category();
    ?>
    <ul>
    <li><a href="#tabs-1"><?php echo $category[0]->cat_name; ?></a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
    <?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
    <div class="post-image left">
    <img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
    </div><!--END post-image-->
    <?php endif; ?>
    <div class="post-inner-box-2 left">
    <h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
    <br />
    <div class="post-intro-box">
    <?php the_excerpt( '' ); ?>
    </div><!-- End post-intro -->
    <div class="continue-reading-box">
    <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
    </div>
    <?php
    endwhile;
    endif;
    ?>
    </div><!--END tab-1-->
    <div id="tabs-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a pretium enim. Nulla ornare metus ut enim pharetra sit amet consectetur neque euismod.
    </div><!--END tab-2-->
    <div id="tabs-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a pretium enim. Nulla ornare metus ut enim pharetra sit amet consectetur neque euismod.
    </div><!--END tab-3-->
    </div><!--END tabs-->

    But when I try to do more then one post, it doesn’t work, and the code looks like this…

    <div id="tabs">
    <?php
    query_posts( 'showposts=3&offset=1' );
    if (have_posts()) :
    while (have_posts()) : the_post(); $category = get_the_category();
    ?>
    <ul>
    <li><a href="#tabs-1"><?php echo $category[0]->cat_name; ?></a></li>
    <li><a href="#tabs-2"><?php echo $category[0]->cat_name; ?></a></li>
    <li><a href="#tabs-3"><?php echo $category[0]->cat_name; ?></li>
    </ul>
    <div id="tabs-1">
    <?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
    <div class="post-image left">
    <img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
    </div><!--END post-image-->
    <?php endif; ?>
    <div class="post-inner-box-2 left">
    <h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
    <br />
    <div class="post-intro-box">
    <?php the_excerpt( '' ); ?>
    </div><!-- End post-intro -->
    <div class="continue-reading-box">
    <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
    </div>
    </div><!--END tab-1-->
    <div id="tabs-2">
    <?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
    <div class="post-image left">
    <img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
    </div><!--END post-image-->
    <?php endif; ?>
    <div class="post-inner-box-2 left">
    <h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
    <br />
    <div class="post-intro-box">
    <?php the_excerpt( '' ); ?>
    </div><!-- End post-intro -->
    <div class="continue-reading-box">
    <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
    </div>
    </div><!--END tab-2-->
    <div id="tabs-3">
    <?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
    <div class="post-image left">
    <img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=150&h=100&zc=1" alt="<?php the_title(); ?>" />
    </div><!--END post-image-->
    <?php endif; ?>
    <div class="post-inner-box-2 left">
    <h3 class="post-title-box left"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
    <br />
    <div class="post-intro-box">
    <?php the_excerpt( '' ); ?>
    </div><!-- End post-intro -->
    <div class="continue-reading-box">
    <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>" rel="bookmark" title="More <?php the_title_attribute(); ?>">Continue Reading</a>
    </div>
    </div><!--END tab-3-->
    <?php
    endwhile;
    endif;
    ?>
    </div><!--END tabs-->

    Right away I’m thinking the problem is with the unsorted list area then the content div’s… Although I might be wrong.

    So what do you guys think?

    Oh! FYI: I’m using the latest version of jQuery.

    Thanks for any help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi C187
    I think i wrote the right plugin for your tabs. It’s called Post 2 Tabs and it’s a Simple plugin that allows you to generate a tab container widget based on Jquery UI tabs. Each tab is a category with a number of posts customizable.
    It will display last posts of your favorite categories just put each category ID number separated by comma in the wp-admin.
    It’s just born and i wish it can help you, also if you don’t use it you can take inspiration from my php code.
    This is the link of plugin page (just published) and requested to WordPress Plugins directory.
    Download it and let me know if you need help
    Jquery Tabs plugin
    Feedback are appreciated 🙂
    Pino

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘jQuery tabs displaying posts on index – Could use some help.’ is closed to new replies.