top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

How to filter post types with a select field in Wordpress?

+1 vote
34 views

I am working on a Wordpress project. I have a layout like shown in below the screenshot with a select field and boxes with news (two or more different post types). I want to filter with the select the post type so there should show up only the selected. How can i do that?

Screenshot :
enter image description here

posted May 13, 2017 by Kavyashree

Share this question
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button

2 Answers

0 votes
 
Best answer

If you're fine dropping the pagination and having all of your posts on a single page, one option is to use Isotope.js. In addition to being a very useful plugin, they have thorough documentation to figure out how to structure your code to get filtering working.

If the pagination is absolutely necessary, this becomes more complex. Here's the short hand-wavey version that needs testing: You can use JS to reload the page with an extra parameter added to the URL (ex: /your-page?filter=post_type_1). You'll need to register your custom URL parameter with WordPress. Then, in your PHP, you'll use that parameter data in your WP_Query (or whatever you're using to query posts) to grab only posts of that type. It would be smart to have a default, where if the filter parameter from the URL isn't present or doesn't match a post type you have in your site, you default to showing all posts.

answer May 22, 2017 by Biswajit Maity
0 votes

If you're fine dropping the pagination and having all of your posts on a single page, one option is to use Isotope.js. In addition to being a very useful plugin, they have thorough documentation to figure out how to structure your code to get filtering working.

If the pagination is absolutely necessary, this becomes more complex. Here's the short hand-wavey version that needs testing: You can use JS to reload the page with an extra parameter added to the URL (ex: /your-page?filter=post_type_1). You'll need to register your custom URL parameter with WordPress. Then, in your PHP, you'll use that parameter data in your WP_Query (or whatever you're using to query posts) to grab only posts of that type. It would be smart to have a default, where if the filter parameter from the URL isn't present or doesn't match a post type you have in your site, you default to showing all posts.

This blog post walks through how to do this method of filtering more thoroughly: https://codepen.io/the_ruther4d/post/custom-query-string-vars-in-wordpress.

answer Jul 19, 2017 by anonymous
Similar Questions
0 votes

I am currently working on my wordpress site and have started to use a timeline. There are next/previous buttons in the post, but I want them to display the post title instead of Next/Previous. I have looked over the wordpress code for this, but the dev is using non-standard code to achieve it.

Could somebody take a look at the code and tell me what I need to change.

<div class="clearfix"></div>
            </div>
            <div class="timeline-info">
                <div class="timeline-content">
                    <?php 
                    $content =  preg_replace ('#<embed(.*?)>(.*)#is', ' ', get_the_content(),1);
                    $content =  preg_replace ('@<iframe[^>]*?>.*?</iframe>@siu', ' ', $content,1);
                    $content =  preg_replace ('/<source\s+(.+?)>/i', ' ', $content,1);
                    $content =  preg_replace ('/\<object(.*)\<\/object\>/is', ' ', $content,1);
                    $content =  preg_replace ('#\[video\s*.*?\]#s', ' ', $content,1);
                    $content =  preg_replace ('#\[audio\s*.*?\]#s', ' ', $content,1);
                    $content =  preg_replace ('#\[/audio]#s', ' ', $content,1);
                    preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $content, $match);
                    foreach ($match[0] as $amatch) {
                        if(strpos($amatch,'soundcloud.com') !== false){
                            $content = str_replace($amatch, '', $content);
                        }elseif(strpos($amatch,'youtube.com') !== false){
                            $content = str_replace($amatch, '', $content);
                        }
                    }
                    $content = preg_replace('%<object.+?</object>%is', '', $content,1);
                    echo apply_filters('the_content',$content);?>
                </div>
            </div>
            <?php 
            $we_sevent_navi = get_option('wpex_navi');
            if($we_sevent_navi!='no'){
                $wpex_navi_order = get_option('wpex_navi_order');
                $preevtrsl = get_option('wpex_text_prev')!='' ? get_option('wpex_text_prev') : esc_html__('Previous article','wp-timeline');
                $nextevtrsl = get_option('wpex_text_next')!='' ? get_option('wpex_text_next') : esc_html__('Next article','wp-timeline');
                if($wpex_navi_order!='ct_order'){ ?>
                    <div class="timeline-navigation defa">
                        <div class="next-timeline">
                            <?php next_post_link('%link', $nextevtrsl) ?>
                        </div>
                        <div class="previous-timeline">
                            <?php previous_post_link('%link', $preevtrsl) ?>
                        </div>
                    </div>
                    <?php 
                }else{
                    wpex_next_previous_timeline($preevtrsl,$nextevtrsl);
                }
            }?>
            <div class="clearfix"></div>
        </div>
  </div>
0 votes

I have a WordPress Blog which I updated regularly. I always updated my older post of my Wordpress Blog. I need a system that when I will updated any of my older post then the older post need to be shown at first as regular post. Can anybody help me?

0 votes

So basically I have been trying to make my permalinks look like this:

/recipes/postid/postname

Rather than what has the potential to become this:

/recipes/postparent/postparent/postparent/postparent/postname

Users have the ability to create posts on the front end that are children of other posts. This can go on and on and I don't want the permalinks to be insanely long.

I was able to remove all parent post names from the permalink using the code below. However, this doesn't work if someone creates a post name that already exists.

I would like to be able to change the permalink to include the post id in it so this doesn't happen but I can't figure it out. I appreciate any help!

Here is the code:

function Recipes() {

$labels = array(
'name'                  => _x( 'Recipes', 'Post Type Recipes', 'recipes' ),
'singular_name'         => _x( 'Recipe', 'Post Type Singular Name', 'Recipe' ),
'menu_name'             => __( 'Recipes', 'recipes' ),
'name_admin_bar'        => __( 'Recipes', 'recipes' ),
'archives'              => __( 'Recipes Archives', 'recipes' ),
'parent_item_colon'     => __( 'Parent Recipe', 'recipes' ),
'all_items'             => __( 'All Recipes', 'recipes' ),
'add_new_item'          => __( 'Add New Recipe', 'recipes' ),
'add_new'               => __( 'Add Recipe', 'recipes' ),
'new_item'              => __( 'New Recipe', 'recipes' ),
'edit_item'             => __( 'Edit Recipe', 'recipes' ),
'update_item'           => __( 'Update Recipe', 'recipes' ),
'view_item'             => __( 'View Recipe', 'recipes' ),
'search_items'          => __( 'Search Recipes', 'recipes' ),
);
$args = array(
'label'                 => __( 'Recipes', 'Recipes' ),
'description'           => __( 'Recipes', 'recipes' ),
'labels'                => $labels,
'supports' => array(
  'title',
  'thumbnail',
  'comments',
  'editor',
    'revisions'),
'taxonomies'            => array( 'category', 'recipes-tag' ),
'hierarchical'          => true,
'public'                => true,
'show_ui'               => true,
'show_in_menu'          => true,
'menu_position'         => 5,
'menu_icon'         => 'dashicons-editor-ul',
'show_in_admin_bar'     => true,
'show_in_nav_menus'     => true,
'can_export'            => true,
'has_archive'           => true,
'exclude_from_search'   => false,
'publicly_queryable'    => true,
'capability_type'       => 'page',
'show_in_rest'       => true,
'rest_controller_class' => 'WP_REST_Posts_Controller',
'rewrite'               => array( 'slug' => 'recipes' ),

);
register_post_type( 'recipes', $args );

add_rewrite_rule(
        '^recipes/([^/]+)/?$',
        'index.php?post_type=recipes&name=$matches[1]',
        'top'
    );

}

add_action( 'init', 'Recipes', 0 );


function bvt_recipes_flatten_hierarchies( $post_link, $post ) {
    if ( 'recipes' != $post->post_type ) {
        return $post_link;
    }
    $uri = '';
    foreach ( $post->ancestors as $parent ) {
        $uri = get_post( $parent )->post_name . "/" . $uri;
    }

    return str_replace( $uri, '', $post_link );
}
add_filter( 'post_type_link', 'bvt_recipes_flatten_hierarchies', 10, 2 );
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...