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

Query Posts 4 into List, automatically add last class. WordPress

  • SOLVED

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;

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

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>

Answers (5)

2010-08-31

Roberto Mas answers:

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

[email protected] on msn or gmail

2010-08-31

Nilesh shiragave answers:

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>




West Coast Design Co. comments:

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,


Nilesh shiragave comments:

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>



Nilesh shiragave comments:

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 [[LINK href="http://codex.wordpress.org/Function_Reference/get_pages"]]get_pages()[[/LINK]]


Nilesh shiragave comments:

Sorry posting again..

<strong>Final code</strong>

<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 [[LINK href="http://codex.wordpress.org/Function_Reference/get_pages"]]get_pages()[[/LINK]]

2010-08-31

Chris Lee answers:

<strong>@West Coast Design:</strong>

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.

2010-08-31

Mykyta Savchenko answers:

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.


West Coast Design Co. comments:

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!

2010-08-31

Andrew Petrusha answers:

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


West Coast Design Co. comments:

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.