I'm having a bit of issue with this snippet. Filter doesn't adjust pagination. So let's say you have 30 new posts in "apple" category and 5 old post in "orange" category. When click "orange" to get just "orange" posts, I get blank results until I click to page 4.
I'm not sure if I'me explaining this clearly.
Hi Nori,
That is correct, the UIkit filters don't handle query so it doesn't handle such scenarios. The best bet in your case is to have an category menu which alter the query (reloads the page on click) or to do it via ajax.
Happy coding,
Hi Mariusz, (or anyone kind enough) Would you be kind to share the dynamic grid filter, using it with beans?
I've a CPT: cover - taxonomy: color - with 3 terms: red, white, blue. In the taxonomy archive: taxonomy-cover.php - would want to load all the posts for: red, white, blue.... then, with the dynamic grid filter, to able to filter red, white, blue .. and all . (maybe create a secondary nav-menu for that - which would also help the pagination). I would appreciate anyone's help with this.
Thanks again
Dear Frederick Smith:
You can use Thierry's snippet on your taxonomy-cover.php template file, and then do the CPT filtering on your functions.php file (or your main plugin file), as once in the template file it's too late to alter the main query parameters. So, in your functions.php file, for instance, you can do something like this:
add_action( 'pre_get_posts', 'only_cpt_posts' );
function only_cpt_posts( $query ) {
if ( $query->is_main_query() && ! is_admin() && $query->is_home() ) {
$query->set( 'post_type', 'page' );
}
}In my case I added the post type parameter and set it to 'page' post type.
I hope this answer can be useful for you.
Hi Disnel Rodríguez, Thanks for checking in, and thanks for your reply. (I tried that before my post), Unfortunatelly that Thierry's snippet wont work for me as I've custom taxonomy. But I appreciate fyour reply. Maybe somone will check in - who have a snippet that works for custom taxonomy. Thanks, Fred.
Hi again Frederick Smith!
I found your question so interesting that I did a little further research. Forgive me if you have walked this path before, the fact is I made some adjustments to Thierry's snippet to accept a custom taxonomy so you can filter your posts by them. It seems to work for me, can you please try it and see if that is what you want?
Important, you must replace every ocurrence of "sample_taxonomy" with the actual slug of your taxonomy. I didn't use any constant until be sure the code suits your needs.
<?php
// Enqueue UIkit assets.
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
function example_enqueue_uikit_assets() {
beans_uikit_enqueue_components( array( 'grid' ), 'add-ons' );
}
// Display posts in a responsive dynamic grid.
add_action( 'beans_before_load_document', 'example_posts_grid' );
function example_posts_grid() {
// Alter the main query so we can target the needed CPT
// Add grid.
beans_wrap_inner_markup( 'beans_content', 'example_posts_grid', 'div', array(
'data-uk-grid' => "{gutter: 20, controls: '#tm-grid-filter'}",
) );
beans_wrap_markup( 'beans_post', 'example_post_grid_column', 'div', array(
'class' => 'uk-width-large-1-3 uk-width-medium-1-2',
) );
// Move the posts pagination after the new grid markup.
beans_modify_action_hook( 'beans_posts_pagination', 'example_posts_grid_after_markup' );
}
// Add posts filter.
add_action( 'beans_content_before_markup', 'example_posts_filter' );
function example_posts_filter() {
$categories = get_terms( array(
'taxonomy' => 'sample_taxonomy',
'hide_empty' => false,
)
);
?>
<ul id="tm-grid-filter" class="uk-subnav uk-container-center">
<?php foreach ( $categories as $category ) : ?>
<li data-uk-filter="<?php echo esc_attr( $category->slug ); ?>">
<a href="#"><?php echo esc_attr( $category->name ); ?></a>
</li>
<?php endforeach; ?>
</ul>
<?php
}
// Add filter data to each post.
add_filter( 'example_post_grid_column_attributes', 'example_post_attributes' );
function example_post_attributes( $attributes ) {
$terms = get_the_terms( get_the_ID(), 'sample_taxonomy' );
$categories = array();
if ( $terms ) {
$categories = wp_list_pluck( get_the_terms( get_the_ID(), 'sample_taxonomy' ), 'slug' );
}
return array_merge( $attributes, array(
'data-uk-filter' => implode( ',', (array) $categories ), // automatically escaped.
) );
}
// Load the document which is always needed at the bottom of template files.
beans_load_document();Hello again Disnel Rodríguez, Thanks for your help. Unfortunatelly it didn't work. It loads the nav menu and the main div, but blank - no posts -. (yes I did change "sample_taxonomy") it's correct and checked.. Also another I see is the, menu li 'data-uk-filter=' is correct with the tax terms...... but the one blank div data-uk-filter=" " is empty ( it doesn't fill in the taxonomy terms to match to the nav - li data-uk-filter=
this is the part what would fill in the grid div 'data-uk-filter=
return array_merge( $attributes, array(
'data-uk-filter' => implode( ',', (array) $categories ), // automatically escaped.
) );I think the issue is with "color" is being a custom taxonomy, for the "cover" CPT - the "$categories" may not recognize the color taxonomy to list all the posts. for all the terms - so since no posts are loaded - it can't create the beans_wrap_markup grid 'data-uk-filter' either to match the li elements for the posts.
btw: if I use the above code to create "taxonomy-color.php" it returns 404. - so I had to create a post using the above code - as a page template. - and call that post. Also, I use grid with equal heights site wide - not dynamic grid ( which is un-equal heights )- but I will change that.
So I don't know if you can figure it out...... Thanks Fred
Dear Fred:
Seems to me that the problem is located here:
if ( $terms ) {
$categories = wp_list_pluck( get_the_terms( get_the_ID(), 'sample_taxonomy' ), 'slug' );
} $terms should be filled up here:
$terms = get_the_terms( get_the_ID(), 'sample_taxonomy' );But for you get_the_terms function is returning nothing, so $categories remains as an empty array too. Since that functions gets all the taxonomy terms attached to the current post, perhaps the problem is you're querying the wrong post type. Remember this?
add_action( 'pre_get_posts', 'only_cpt_posts' );
function only_cpt_posts( $query ) {
if ( $query->is_main_query() && ! is_admin() && $query->is_home() ) {
$query->set( 'post_type', 'page' );
}
}Did you check that the loop is getting the CPT using the custom taxonomy terms?
Hi Disnel, Thanks for looking into this. Unfortunatelly it still doesn't work - doesn't display the posts. (the navigation menu is correct), but no posts.
Yes I made sure all is correct and pre_get_posts section in functions.php is calling the correct CPT..... I even tried this in the functions.php - add is_tax - since this is a taxonomy archive....
add_action( 'pre_get_posts', 'only_cpt_posts' );
function only_cpt_posts( $query ) {
if ( $query->is_main_query() && ! is_admin() && $query->is_tax( 'color' ) ) {
$query->set( 'post_type', 'cover' );
}
}
But, It just won't load the posts...... So I don't know what to say..... I will just have to figure it out another way to try to make it work...
BTW; So just to veryfy...I put this simple code into my taxonomy archive ( taxonomy-color.php). The taxonomy: color - has 3 terms: red, white, blue And it shows all the posts by each terms and it's all correct....
//simple taxonomy archive//shows all posts for each taxonomy terms///
//sample - post_type: cover - taxonomy: color - term/categories: red, white, blue //
$terms = get_terms( 'color', array(
'orderby' => 'count',
'hide_empty' => 0
) );
// now run a query for each cover
foreach( $terms as $term ) {
// Define the query
$args = array(
'post_type' => 'cover',
'color' => $term->slug
);
$query = new WP_Query( $args );
// output the term name in a heading tag //show slug $term->slug //
echo'<h2>' . $term->name . '</h2>';
// output the post titles in a list
echo '<ul>';
// Start the Loop
while ( $query->have_posts() ) : $query->the_post(); ?>
<li class="tax-listing" id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;
echo '</ul>';
// use reset postdata to restore orginal query
wp_reset_postdata();
}So I don't know what to say....... I will just have to find a way and figure out how to make this work, and see we can find a way to make this grid filter for a taxonomy archive to work in beans.
Thanks, Fred
Dear Fred:
It must be certainly something wrong with your installation and/or configuration. I just created a Cover CPT (using the Custom Post Type UI plugin) as yours with my sample_taxonomy support. It works! If I may I would suggest you to create another testing enviroment, just in case you have missed up something in the way.
I hope you can solve your problem soon.
Hi Disnel, Thanks again for checking in. I will probably create another testing.... However, what strange is the CPT works, taxonomy and taxonomy terms (categories) works too.. .if I go to: localhost/test.com/color/red/ shows all the posts under red, localhost/test.com/color/white/ shows all the posts under white, localhost/test.com/color/blue/ shows all the posts under blue, ... and everything else as well....... ...Just so strange....... Will let you know. Thanks again for your help and inputs. Fred
Hi Disnel,
I decided I'm going to setup another testing envirement.
Would you be kind to post me the script that worked for you for, - that way I would know that that should work.
I would appreciate it, thanks a lot, Fred
Hello Fred,
Just use the last snippet I gave you, the one with the sample_taxonomy definition, I put it on my test enviroment in the home.php template. Don't forget the pre_get_posts declaration in the functions.php file also, and the taxonomy. In my case I registered it like this (I didn't use any plugin for that):
add_action('init', 'wpshout_register_taxonomy');
function wpshout_register_taxonomy() {
$args = array(
'hierarchical' => true,
'label' => 'Sample Taxonomy',
'show_in_rest' => true
);
register_taxonomy( 'sample_taxonomy', array( 'post', 'page', 'cover' ), $args );
}and for the Cover CPT I used the Custom Post Type UI plugin. That's all I needed. Perhaps you should try it exactly that way to check if the problem is related to the plugins combination on your sandbox.
I hope you get luck this time.
Hi Disnel,
Ok, I will try that. btw: you said earlier: "Seems to me that the problem is located here:
if ( $terms ) {
$categories = wp_list_pluck( get_the_terms( get_the_ID(), 'sample_taxonomy' ), 'slug' );
} $terms should be filled up here:
$terms = get_the_terms( get_the_ID(), 'sample_taxonomy' );
So it shold be like this:?
if ( $terms ) {
$terms = get_the_terms( get_the_ID(), 'sample_taxonomy' );
} But isn't that the same what's in the snippet section above?
function example_post_attributes( $attributes ) {
$terms = get_the_terms( get_the_ID(), 'sample_taxonomy' );Also, Im not using this snippet in the home page... I want to use it in the taxonomy archive page:
taxonomy-color.php
So the code in the functions.php should be like this:?
add_action( 'pre_get_posts', 'only_cpt_posts' );
function only_cpt_posts( $query ) {
if ( $query->is_main_query() && ! is_admin() && $query->is_tax( 'color' ) ) {
$query->set( 'post_type', 'cover' );
}
}
Hello Fred:
What I was trying to say regarding to the $terms array is that I had to include that conditional for the code to work properly (in the original snippet it's not present). So, if no $terms then $categories also remains as an empty array and that's the reason the grid doesn't display the posts. I think you have a starting point for debuging here:
$terms = get_the_terms( get_the_ID(), 'sample_taxonomy' );since for you get_the_terms is returning nothing.
And yes, that's exactly the code you have to put in functions.php. In a brand new enviroment your code should work as mine, but my suggestion is that you try to use the already working set (my sample configuration), and if it's OK then adapt to your situation. Take it into account if you get an empty posts page again.