logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$8
Query Posts 4 into List, automatically add last class.

Hello,

I am querying 4 sub pages based on a predefined ID into a list format (4 home page boxes) … it works, but the last box needs to have a special class;

<li class="last">content</li>

I am trying to make the site a dynamic as possible for my end user.

Any suggestions would be much appreciated!


<ul class="four_column">
<?php query_posts(array('post_parent' => 8, 'orderby' => 'menu_order', 'order' => 'asc' , 'post_type' => 'page' )); while (have_posts()) { the_post(); ?>
<li><?php the_title(); ?></li>
<?php } ?>

<!-- Need to add class .last to 4th li -->
<li class="last"><?php the_title(); ?></li>

</ul>

This question has been answered.

West Coast Design Co. | 08/31/10 at 10:46am Edit


(5) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    08/31/10
    11:36am
    Roberto Mas says:

    Do it with jQuery

    give your ul an id

    example

    <ul id="myList">
    <li>...

    $('#myList li:last').addClass("last");

    if you need help implemeting that

    rmas@aussisimple.com on msn or gmail

    Previous versions of this answer: 08/31/10 at 10:59am | 08/31/10 at 10:59am | 08/31/10 at 10:59am

  • avatar
    Last edited:
    08/31/10
    11:36am
    Nilesh shiragave says:

    Why you are using query_post() to display subpages . you can use wp_list_pages() to display child pages of a page.

    If you want to display subpages of page id 8 then you can use following code.


    <ul class="four_column">
    <?php wp_list_pages('sort_column=menu_order&title_li=&child_of=8'); ?>
    </ul>


    and if you want to display child pages of current page then you can use following code

    <ul class="four_column">
    <?php wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID); ?>
    </ul>



    and to style last a element you can use following code


    <style type="text/css"
    >
    .four_column li a:last-child
    {
    color:red;
    }
    </style>



    Previous versions of this answer: 08/31/10 at 11:15am

    • 08/31/10 11:19am

      West Coast Design Co. says:

      Nilesh,

      Thanks for the response … however I am purposely querying pages, those pages will be packages displayed on the front page … context populated by meta fields, in addition to being complete pages.

      Cheers,

    • 08/31/10 11:28am

      Nilesh shiragave says:

      Ok ....

      then use this code instead of using the query_post()


      <ul class="four_column">
      <?php
      $pages = get_pages(array('child_of'=>8,'sort_column'=>'menu_order'));
      $totalpages=count($pages);
      $count=0;
      foreach ($pages as $pagg) {
      $count++;
      if($count==$totalpages)
      {
      echo '<li class="last">';
      }
      else
      {
      echo '<li>';
      }
      echo $pagg->post_title;
      echo '</li>';
      }
      ?>
      </ul>
      <style type="text/css">
      .four_column li.last
      {
      color:red;
      }
      </style>


    • 08/31/10 11:33am

      Nilesh shiragave says:

      And if you want pages having specific custom fields then you can get pages having specific custom fields using get_pages().

      For more details check get_pages()

    • 08/31/10 11:35am

      Nilesh shiragave says:

      Sorry posting again..

      Final code


      <ul class="four_column">

      <?php

      $pages = get_pages(array('child_of'=>8,'sort_column'=>'menu_order'));

      $totalpages=count($pages);

      $count=0;

      foreach ($pages as $pagg) {

      $count++;

      if($count==$totalpages)

      {

      echo '<li class="last">';

      }

      else

      {

      echo '<li>';

      }

      echo $pagg->post_title;

      echo '</li>';

      }

      ?>

      </ul>

      <style type="text/css">

      .four_column li.last

      {

      color:red;

      }

      </style>


      And if you want pages having specific custom fields then you can get pages having specific custom fields using get_pages().

      For more details check get_pages()

  • avatar
    Last edited:
    08/31/10
    11:36am
    Chris Lee says:

    @West Coast Design:

    Use the WP_Query Approach. The Above Jquery Approach is a hack. Won't work if javascript isn't loaded.



    <?php
    // Start your new Query. add your arguments
    $q = new WP_Query(); $args = array(
    'post_type'=>'page',
    'order'=>'ASC',
    'orderby'=>'menu_order',
    'post_status'=>'publish'
    );
    $q->query($args);
    ?>
    <?php if ($q->have_posts()) : while ($q->have_posts()) : $q->the_post(); ?>
    <?php // modify post_class function
    $postclassargs = "post-count-".$q->current_post; // add Class post-count-(#)
    if ($q->current_post == 0) $postclassargs .= ' first '; // if it's the first post add first
    if ($q->post_count == $q->current_post+1) $postclassargs .= ' last'; // if it's the last post add "last"
    $postclassargs .= ' '.$post->post_name;
    ?>



    Then finish the rest of the loop with whatever you need. You want to do this over the wp_list_pages because wp_list pages doesn't actually list content.

    Previous versions of this answer: 08/31/10 at 11:14am | 08/31/10 at 11:15am | 08/31/10 at 11:16am

  • avatar
    Last edited:
    08/31/10
    11:39am
    Andrew Petrusha says:

    <ul class="four_column">

    <?php $i = 0; ?>

    <?php query_posts(array('post_parent' => 8, 'orderby' => 'menu_order', 'order' => 'asc' , 'post_type' => 'page' )); while (have_posts()) { the_post(); ?>

    <?php $i++; ?>


    <li <?php if($i == $wp_query->post_count) { ?>class="last"<?php } ?> ><?php the_title(); ?></li>

    <?php } ?>


    </ul>

    p.s.
    you are very strange... my answer faster and more reasonable...

    Previous versions of this answer: 08/31/10 at 11:15am | 08/31/10 at 11:39am

    • 08/31/10 11:47am

      West Coast Design Co. says:

      Andrew,

      I guess your right … interesting for you to be offended considering I was the one clueless of the approach.

      At the end of the day; Mykyta’s code was right for me.

  • avatar
    Last edited:
    08/31/10
    11:36am
    Mykyta Savchenko says:

    Here is php implementation:


    <ul class="four_column">
    <?php
    $liNum = 1; //variable for counting li number
    $liLast = 4; //what li should be with class
    ?>
    <?php query_posts(array('post_parent' => 8, 'orderby' => 'menu_order', 'order' => 'asc' , 'post_type' => 'page' )); while (have_posts()) { the_post(); ?>

    <li <?if ($liNum==$liLast) {?>class="last"<?}?>><?php the_title(); ?></li>

    <?php $liNum++; } ?>

    </ul>


    If you'll need this class for 8th or n post just change $liLast = 4.

    Previous versions of this answer: 08/31/10 at 11:27am

    • 08/31/10 11:33am

      West Coast Design Co. says:

      Mykyta,

      Seems there are a few options to choose with this particular objective, your code seemed to be the most complete and simplest to understand.

      Thanks!

This question has expired.





Current status of this question: Completed



Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.