Support » Plugins » Hacks » show posts with certain meta value jquery

  • Hey!

    So i´m searching around the internet quite a few hours now, but i cant find an exact solution to this:

    What i am trying to accomplish is a loop-query, which will give me only posts from a certain meta-value, when the user clicks a button with the name of the meta-value.
    I have a meta key “Year” and values “2012”,”2013″
    Example: on top the user should see two buttons with 2012 and 2013 and when he clicks them he sees only posts with that meta value. And that in jquery, so no page-reload.
    I couldnt get this example running.

    To go further it would also be cool to have like in the link the abilty to sort by 2 meta keys.

    I am really getting stuck here, can anyone guide me in the right direction?

    thx in advance

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz


    That example can be a challenge as it involves AJAX, which is cool, but is better added later after you get your basic query working. Just load a whole new page for now. So your meta buttons are really just links to a page based on a new archive page template you create with a custom loop. Pass the meta value as an URL parameter for now.

    Refer to Class Reference/WP Query, in particular the usage example and the custom fields (meta) parameters section. Grab the URL parameter out of $_GET, build the query arguments, then do the loop to display the results.

    When you get that working, that loop can be converted to respond to an AJAX request instead of a GET request.

    You will see in the above link that multiple keys can be part of a query using ‘meta_query’, so your more distant goal is attainable, but first things first! Get a basic meta query working.


    Thx for the good lead!

    I got it now:

    It spills me all the posts with entwerfen3 in the custom field cf_cf_Lehrveranstaltung.

    But since i didn´t understand what´s the GET-variable and where to put it i used the_permalink

    Yuu can see the living example here:

    But now to the thing: How can i get a dropdown with all the meta-values listed to work? (for now doesnt need to be ajax, in can reload the page)

     * Template Name: Projekte
     * The portfolio page template displays your portfolio items with
     * a switcher to quickly filter between the various portfolio galleries.
     * @package WooFramework
     * @subpackage Template
    global $woo_options;
    	 <div id="content" class="page col-full">
    		<div id="main" class="col-left">
    		<?php if ( isset( $woo_options['woo_breadcrumbs_show'] ) && $woo_options['woo_breadcrumbs_show'] == 'true' ) { ?>
    			<div id="breadcrumbs">
    				<?php woo_breadcrumbs(); ?>
    			</div><!--/#breadcrumbs -->
    		<?php } ?>  
                <div <?php post_class('drop-shadow lifted'); ?>>
    			    <h1 class="title"></h1>
    				<div class="entry">
    $args= array(
    	'meta_query' =>  array(
    			'key' => 'cf_cf_Lehrveranstaltung',
    			'value' => 'Entwerfen3',
    			'compare' => 'LIKE'
    // The Query
    // The Loop
    $the_query = new WP_Query( $args );
    // The Loop
    while ( $the_query->have_posts() ) :
    	echo '<li>' . get_the_title() . '</li>';
    			<div class="clear"></div>
                </div><!-- /.post -->
    		</div><!-- /#main -->
            <?php get_sidebar(); ?>
        </div><!-- /#content -->
    <?php get_footer(); ?>


    Moderator bcworkz


    I don’t quite get exactly what you’re asking, this is a generic answer that I think will be helpful.

    If you are using dropdown lists, let’s skip over the GET method and use POST. It works better for forms and will be the method of choice for future AJAX implementation as well. GET was only suggested because it works well with < a > tags and buttons. POST also works well so the dropdown and the result code can reside on the same page, also an advantage for future AJAX.

    The template is setup so if it is a GET request, the dropdowns are displayed. If it is a POST request, the submitted values are inserted into a query and the results displayed.

    One option for the dropdowns is to simply hardcode the HTML, populating the option list with known meta values. If you need to populate the option list with all meta values from all posts, it gets tricky because it seems all post meta functions only work for a particular post, not all of them. Unless you can find the right function, I think you’ll need to do a $wpdb query to get an array of all meta values used.

    To build a dropdown from an array of meta values, first output the form and select tags. The do a foreach loop on the array, outputting the option tags with the meta value inserted into the value attribute and as the display label. Then output the closing select and form tags.

    When the form is submitted as POST, the selected value of each field is available as $_POST[‘select-name’]. Use such values to build your query arguments. Then create a new query object and run the loop as normal.

    Once this setup is working, converting to AJAX is straight forward. Unfortunately, AJAX in WP has a few quirks you need to address or you will get strange unexplainable results. If you are familiar with AJAX but not for WP, do some research before diving in. If not, starting from the beginning with WP specific examples should work fine.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘show posts with certain meta value jquery’ is closed to new replies.