How to sort a table of custom posts by column containing custom field

Question

I have a custom post type called laptop with custom fields such as CPU, OS, RAM etc. creatied using the Advanced Custom Fields plugin.

I'm displaying a table of laptops, where the table header is a row of custom fields, and each following row is a laptop name and it's custom field values in each of the corresponding column cells.

I want to be able to sort the table by clicking on the table TH cell containing the custom field name.

I've been pointed to meta query clauses by ACF support, but I'm out of my depth with those.

I'd really appreciate some help in generating URLs to wrap around the the custom field name in each TH element.

can this help you a bit wordpress.stackexchange.com/questions/183601/… — prosti
– prosti, Commented Oct 6, 2016 at 9:14
@prosti, sort of. I don't have categories of laptops, and the custom post type laptop is not a category of Wordpress post. Also, I need to be able to filter by multiple custom fields, not just one, and I don't see from the code in the answer above how to do that. Thanks though! — Steve
– Steve, Commented Oct 8, 2016 at 7:19
Thanks @prosti, that's a great resource, however, it does not allow you to specify that you want to order the results by custom field, which is what I need. — Steve
– Steve, Commented Oct 8, 2016 at 9:54
Am I correct to assume you are planning to do sorting via back-end request? And if Yes, why? — rock3t
– rock3t, Commented Mar 4, 2017 at 18:38

Paul 'Sparrow Hawk' Biron · Accepted Answer · 2017-03-05 00:49:19Z

To follow up on @rock3t's comment, do you really have to query the backend whenever a user clicks on a column header?

Have you looking into using the jQuery tablesorter? It allows an end-user to sort an HTML table by doing DOM manipulations.

I've never used it in a WP project, but I have used it extensively in other projects I've built and it works great. It's very configurable, so I'm sure it will satisfy your needs.

tablesorter is not one of the jQuery plugins included with WP Core. So you'll have to download it (from the above link), include it in your plugin/theme somewhere and enqueue it. Then, enqueue a simple JS file that would like something like:

(function ($) {
    $(document).ready (function () {         
        $('#id_of_your_table').tablesorter ({widgets: ['zebra']}) ;     
        }) ;
})(jQuery) ;

You can read more about how to use tablesort in their docs, including various other parms to the tablesorter() method.

prosti · Accepted Answer · 2016-11-19 13:02:56Z

Simple with this reference: https://codex.wordpress.org/Class_Reference/WP_Query

orderby should be meta_value

'meta_value' - Note that a 'meta_key=keyname' must also be present in the query.

Your key name should be one of the: CPU, OS, RAM ...

Also you can consider the WP_Meta_Query class. https://codex.wordpress.org/Class_Reference/WP_Meta_Query

The Update

I got this result

    Array
(
    [0] => WP_Post Object
        (
            [ID] => 3233
            [post_author] => 1
            [post_date] => 2016-11-19 12:51:43
            [post_date_gmt] => 2016-11-19 12:51:43
            [post_content] => abc
            [post_title] => Mac Air Pro 9G
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => mac-air-pro-3
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2016-11-19 12:52:19
            [post_modified_gmt] => 2016-11-19 12:52:19
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://steve.com/laptop/mac-air-pro-1-copy/
            [menu_order] => 0
            [post_type] => laptop
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [1] => WP_Post Object
        (
            [ID] => 3232
            [post_author] => 1
            [post_date] => 2016-11-19 12:46:50
            [post_date_gmt] => 2016-11-19 12:46:50
            [post_content] => abc
            [post_title] => Mac Air Pro 8G
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => mac-air-pro-2
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2016-11-19 12:52:47
            [post_modified_gmt] => 2016-11-19 12:52:47
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://steve.com/laptop/mac-air-pro-1-copy/
            [menu_order] => 0
            [post_type] => laptop
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

    [2] => WP_Post Object
        (
            [ID] => 3231
            [post_author] => 1
            [post_date] => 2016-11-19 12:12:38
            [post_date_gmt] => 2016-11-19 12:12:38
            [post_content] => abc
            [post_title] => Mac Air Pro 4G
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => closed
            [ping_status] => closed
            [post_password] => 
            [post_name] => mac-air-pro-1
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2016-11-19 12:52:57
            [post_modified_gmt] => 2016-11-19 12:52:57
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://steve.com/?post_type=laptop&#038;p=3231
            [menu_order] => 0
            [post_type] => laptop
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )

)

Here is the content of the single-laptop.php file:

<?php
/**
 * The template for displaying all single posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package microformats
 */

get_header(); 


// WP_Query arguments
$args = array (
    'post_type'              => array( 'laptop' ),
    'post_status'            => array( 'published' ),
     //'s'                      => 'atom', // only if you need that
    'nopaging'               => true,
    'posts_per_page'         => '-1',
    'ignore_sticky_posts'    => true,
    // order
    'orderby'                => 'meta_value', 
    'meta_key'               => 'ram',
    'order'                  =>'DESC',
    /* you will need this only if
    'meta_query'             => array(
        array(
            'key'       => 'ram', // or os, or cpu
            'value'     => '4', // meaning 4G of ram
            'compare'   => '>',  // meaning only biggar
            'type'      => 'NUMERIC',
        ),
    ),
    */
);


// The Query
$query = new WP_Query( $args );
print_r($query->posts);


?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'template-parts/content', 'single' ); ?>

            <?php
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            ?>


            <hr class="fat" />              

        <?php endwhile; // End of the loop. ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Thank you prosti. By default, I want all laptops to display, so I have: $loop = new WP_Query( array( 'post_type' => 'laptop', 'postsperpage' => '30', 'max_num_pages' => 20 ) );. I don't want to limit the default WP_Query by meta_value. How would I use your solution given this requirement for a default set of laptops? Thanks. — Steve
– Steve, Commented Nov 7, 2016 at 3:28
Hi, OK, I am working on something extremely important, so I don't have even 10 minutes right now. However, I will update you in next few days. — prosti
– prosti, Commented Nov 7, 2016 at 17:29
Hi Prosti, that did not help. It is not single-laptop.php I need help with, but the front-page.php which produces the table of laptops. — Steve
– Steve, Commented Mar 4, 2017 at 8:10

Stack Exchange Network

How to sort a table of custom posts by column containing custom field

2 Answers 2

The Update

Your Answer

Linked

Hot Network Questions

How to sort a table of custom posts by column containing custom field

2 Answers 2

The Update

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions