3

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 Oct 6 '16 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 Oct 8 '16 at 7:19
  • 1
    can this help you generatewp.com/wp_query – prosti Oct 8 '16 at 8:39
  • 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 Oct 8 '16 at 9:54
  • 1
    Am I correct to assume you are planning to do sorting via back-end request? And if Yes, why? – rock3t Mar 4 '17 at 18:38
1
+50

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.

0

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&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 Nov 7 '16 at 3:28
  • 1
    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 Nov 7 '16 at 17:29
  • Hi @prosti, how are things going? – Steve Nov 17 '16 at 7:28
  • Check it @Steve. – prosti Nov 21 '16 at 9:34
  • 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 Mar 4 '17 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.