Order articles by date or name

Sparkling
1

Hey,

Can anyone tell me how I can add a switch button to the articles site, so that visitors are able to choose how the articles are displayed.
I want them to be ordered by name by default, but the user should be able to click on a button which says “Oder articles by date”. I think, that toggle button would do well, so you can always switch back to the default setting.

Would be very awesome if somebody could help me doing this.

Some details:
My menu only contains several categories, so the user clicks on a menu button and is forwarded to the post site where all the articles of that category are displayed. That page should contain the switch button.


Order the articles by:
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Date</button>
  <button type="button" class="btn btn-default">Name</button>
</div>
2

Hi @sam94,

I hope you are well today and thank you for your question.

To achieve this you have to develop custom code as shared in the following topic.

https://colorlibsupport.com/t/sort-articles-of-a-category-by-name/#post-45921

Developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Colorlib recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5 http://freewptp.com/contact

Best Regards,
Movin

3

Hey Movin,

Thanks for your reply. I now found a solution which works fine for me, maybe there are better ways to do this but hey, it works.
For those, who are also searching a method to reach this, I’ll post my solution below.

First another question from my part. On the page, there are 10 articles which are displayed, the other articles can be found by a click on the “Older articles”-button. Could you please tell me where I can change this button to a simple numbered Navigation, like we all know it from Google or even this forum? Big thanks in advance!

My own solution

I added the buttons to my template, just beside the Title.

<div>
<p>Sort articles by: </p>
<button type="submit" class="btn btn-default"><a href="?orderby=date">Date</a></button>
<button type="submit" class="btn btn-default"><a href="?orderby=name">Name</a></button>
</div>

Now you have to add the following function to your functions.php:

function order_category( $query ) {
    switch($_GET['orderby'])
    {
    case 'title':
    default:
        $orderby = 'title';
	$sort = 'asc';
        break;

    case 'date':
        $orderby = 'date';
	$sort = 'desc';
        break;
    }
    if ( $query->is_category() && $query->is_main_query() ) {
        $query->set( 'order', $sort );
        $query->set( 'orderby', $orderby );
    }
}
add_action( 'pre_get_posts', 'order_category' );

That’s it.

4

Awesome great to see you got that achieved.

Thanks for sharing the solution here in this forum for others.

Your help here for others is really appreciated.

5

I don’t know if you saw my question, because it’s a bit hidden in my last post.
Could you please give me a hint, where and how I can change the displaying of the articles on the category page (which bases on the archive.php).
I would want to change the number of displayed posts and change the navigation of the different sites of posts.

By default, the sparkling theme displays the 10 newest articles, the older ones can be seen by a click on the “Older articles”-button.
For my site, I would want to show only 5 articles and have a “googlelike” Navigation.
-> http://getbootstrap.com/components/#pagination

How can I reach this?

6

You can change the number of displayed posts from your site reading settings as described on the following page

http://www.wpbeginner.com/beginners-guide/how-to-change-the-number-of-posts-displayed-on-your-blog-page/

and to display “googlelike” Navigation you have to use the following WordPress plugin.

7

Thank you very much Movin!
It’s great that one can always count on your help.

8

You are most welcome here :slight_smile: