{"id":121770,"date":"2023-07-07T09:31:26","date_gmt":"2023-07-07T04:01:26","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=121770"},"modified":"2023-07-07T11:22:39","modified_gmt":"2023-07-07T05:52:39","slug":"add-category-wise-filter-in-custom-post-grid-layout-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-category-wise-filter-in-custom-post-grid-layout-in-elementor\/","title":{"rendered":"How to Add a Category Wise Filter in Custom Post Grid Layout in Elementor?"},"content":{"rendered":"\n

Looking to add a category-wise filter to your custom post grid in Elementor? By using the category filter, your visitors can easily navigate through different categories of posts and find the content they are most interested in.<\/p>\n\n\n\n

With the Dynamic Smart Showcase widget from The Plus Addons for Elementor you can easily add a category filter to your custom post grid.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Smart Showcase widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

To do this, add the Dynamic Smart Showcase widget on the page, and select Magazine Filter<\/strong> from the Style<\/strong> dropdown, after selecting the appropriate style from the Magazine Layout<\/strong>, you have to select Posts<\/strong> from the Post Type<\/strong> dropdown.<\/p>\n\n\n\n

Then go to the Extra Options<\/strong> tab, and turn on the Category Wise Filter<\/strong> toggle. <\/p>\n\n\n\n

To ensure this works, make sure to assign categories to your post, only then it will show here.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

Now you\u2019ll be able to see filter options in your post listing that you can use to filter the posts by category.<\/p>\n\n\n\n

From the All Filter Category<\/strong> Text<\/strong> field, you can add an additional filter label to show all the posts.<\/p>\n\n\n\n

From the Only Show Next Previous<\/strong> toggle, you can add a next previous navigation to the list.<\/p>\n\n\n\n

\n

Note: Enabling the Only Show Next Previous option will hide the filters.<\/em><\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

You can also select different predefined styles for the category filter labels for normal and hover states from the Category Filter Style<\/strong> and Filter Hover Style<\/strong> dropdowns, respectively. <\/p>\n\n\n\n

From the Filter Alignment<\/strong> section, you can align the filter.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

Category Filter in Custom Post Type<\/h2>\n\n\n\n

To add a category filter to a custom post type you need to have a custom post type with a custom taxonomy. You can use the free Advanced Custom Fields (ACF)<\/a> to create a custom post type<\/a> and custom taxonomy<\/a>.<\/p>\n\n\n\n

Make sure you have added some posts in the custom post type and taxonomy in the custom taxonomy. Suppose we have a custom post type called Books<\/strong> and a custom taxonomy called Book Author<\/strong>. <\/p>\n\n\n\n

Now add the Dynamic Smart Showcase widget on the page, and select Magazine Filter<\/strong> from the Style<\/strong> dropdown, after selecting the appropriate style from the Magazine Layout<\/strong>, you have to select your custom post type i.e. Books<\/strong> from the Post Type<\/strong> dropdown.<\/p>\n\n\n\n

Then go to the Content Source<\/strong> tab, and select your custom taxonomy i.e. book-author<\/strong> from the Taxonomy<\/strong> dropdown.<\/p>\n\n\n\n

Then go to the Extra Options<\/strong> tab, and turn on the Category Wise Filter<\/strong> toggle.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

Now you\u2019ll be able to see filter options in your custom post type listing that you can use to filter the posts by taxonomy.<\/p>\n\n\n\n

The rest of the options will work similarly to the normal post.<\/p>\n\n\n\n

Also, read How to Create a Custom Post Grid Layout with Dynamic CPTs in Elementor<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":121774,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[577,526],"class_list":["post-121770","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-dynamic-smart-showcase","docs-plus-listings"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=121770"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/121770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/121774"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=121770"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=121770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}