Buttons to Change Loops on a Single Page

  • Resolved pg73

    (@pg73)


    14 years, 7 months ago

    Hi

    I need some advice please. I want to have my index.php page have two buttons (‘date’ & ‘comments’) on it, when you first go to the page the loop will display posts as usual – new to old (with the ‘date’ button shown as current/active). But if you were to press the ‘comments’ button, the page would reload? using another loop that displays the posts by the amount of comments, most to least (with the ‘comments’ button now shown as current/active.)

    Is this possible to do? I can see that I could create a separate ‘comments’ page and have the ‘comments’ button link to that page, with a custom loop on it. But I would rather it were done on the one page.

    Any advice would be greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)

  • You can use the orderby query var for this.

    example.com/?orderby=comment_count

    Just tested the above on my 2.9.2 install and it works (didn’t realise orderby was a public query var, but i guess it is, because it’s working).

    So, normal order.. just open the page.

    example.com/

    Order by comment count, query the page as..

    example.com/?orderby=comment_count

    So maybe something like..

    <?php
if( !$wp ) global $wp;
$orderposts = ( $wp->query_vars['orderby'] && $wp->query_vars['orderby'] == 'comment_count' ) ? 'comment_count' : 'date';

if( 'date' == $orderposts ) {
	echo '<a class="button active" href="'. get_bloginfo('siteurl') .'">Date</a>';
	echo '<a class="button" href="'. get_bloginfo('siteurl') .'?orderby=comment_count">Comments</a>';
}
else {
	echo '<a class="button" href="'. get_bloginfo('siteurl') .'">Date</a>';
	echo '<a class="button active" href="'. get_bloginfo('siteurl') .'?orderby=comment_count">Comments</a>';
}
?>

    You’d then just add two classes into the stylesheet, a button class to style the two links, and an active class to change the styling of the button to make it appear active (be it the background, or whatever), here’s some example CSS.

    a.button {
	border:1px solid;
	border-color: #bbb;
	color: #8a8a8a;
	line-height:25px;
	padding:5px 8px;
	background:#f2f2f2;
	text-shadow: rgba(255,255,255,1) 0 1px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	margin:0 5px 0 0;
}
a.button.active {
	background:#e1e1e1;
	color: #acacac;
}
a.button:hover {
	text-decoration:none;
}

    Note regarding the conditional code:
    There may be users(you/anyone) reading this thinking, why didn’t i use get_query_var('orderby'), the reason for that is quite simple, it looks something like this when a query is made setting the orderby.. wp_posts.post_date DESC, so rather then have to strip the data from that, i felt it a better approach to pull the necessary data out the query vars array.

    I’m not sure exactly what kind of buttons you wanted, or whether you wanted them side by side, but the above code should be sufficient in giving you an example to work from.

    Hope that helps… ??

    Thread Starter pg73

    (@pg73)

    Great, will try it later and let you know how I get on with it, thanks! I’m still working on getting those anchors styled just how I want them – actually (if it’s not taking the p), can I ask for one more thing – I will write it in the other post. THANK YOU.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Buttons to Change Loops on a Single Page’ is closed to new replies.