{"id":21305,"date":"2021-03-13T15:00:45","date_gmt":"2021-03-13T14:00:45","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=21305"},"modified":"2021-03-12T13:25:32","modified_gmt":"2021-03-12T12:25:32","slug":"wordpress-filter-posts-pages","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-filter-posts-pages\/","title":{"rendered":"How to Let Users Filter Your WordPress Posts and Pages"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The more your users like your website, the more often they will return to it. Sounds like a no-brainer, doesn\u2019t it? The trick is giving your users the features they expect from your website; sometimes even the features they don\u2019t know they need beforehand. <strong>User experience is key<\/strong>, in other words. Now, no matter what kind of website you may be running, it will have content on it. If it has been up for a long time, it will likely have a lot of content. However, <strong>each individual visitor has their own tastes and needs<\/strong>. If you let users filter your posts and pages, <strong>they will have an easier time finding the content they want<\/strong>, and their impressions of your website will be all the better for it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/magazine\/add-search-to-menu-wordpress\/\">Setting up a search bar<\/a>, or even using WordPress\u2019s default search function will go some way towards facilitating your visitors\u2019 search for desired content (and we recommend you do so), but searches have a crucial limitation: they will only return results containing keywords your visitor uses when submitting a query. Filtering your posts and pages will, conversely,<strong> lead your visitors to more related content<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will show you how to let your users filter your posts and pages in WordPress. But first, let us take a few moments to tell you about why we think you should do it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Why Should I Let Users Filter My Posts And Pages?<\/h2>\n<p>[\/vc_column_text][vc_column_text]The answer is obvious: to improve your website\u2019s UX. But how does letting your users filter your content improve UX?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However your visitors stumble upon your website, the way you keep them interested is having the content they want. But <strong>great content, unfortunately, isn\u2019t enough<\/strong>. Your visitors have to have an easy time finding what they want on your website. You could (and should)<strong> provide them with a search bar<\/strong>, but, as we have said earlier, a search will only render results based on keywords. With a filtering system, you provide your visitors with more. You <strong>give them results based on categories and tags<\/strong> \u2013 content they might not have explicitly searched for, but which is relevant to their interests. By <strong>catering to your visitors\u2019 interests<\/strong> instead of just answering their queries, you not only give your visitors what they want, but also point them towards more of your content which they may find interesting, entertaining, or relevant.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Your visitors can typically click a category or tab, for instance, and view all the posts with the said tag or category. But sorting can actually be much more powerful than that. Your visitors might want to <strong>filter using more than one category or tag<\/strong> (say, posts from the <em>Sports<\/em> category with the <em>Transfers<\/em> tag) or maybe look up posts by a particular author tagged with a particular keyword \u2013 everything by said author on a certain topic.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is particularly <strong>useful if your website hosts a lot of content<\/strong>, as it allows your visitors to get a bespoke experience. This is especially relevant if your content is broad and diverse, as would be the case for a news website, for instance. Visitors with niche interests will find their way to the content they want simply by using categories and tabs as filters. Everybody appreciates <strong>ease of navigation<\/strong>, even if they are not aware of it. And a good user experience means a better likelihood of their coming back for more.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to Let Users Filter Your Posts And Pages Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/search-filter\/\" target=\"_blank\" rel=\"noopener\">Search &amp; Filter<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After having installed and activated the plugin, click on <strong>Settings<\/strong> on the Installed Plugins screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Plugin-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Plugin-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Plugin-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Plugin-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Plugin-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will be taken to a screen detailing the ways to use this very versatile plugin. For starters, there is the default shortcode.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"647\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-and-Filter-Screen.jpg\" class=\"attachment-full size-full\" alt=\"Search and Filter Screen\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-and-Filter-Screen.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-and-Filter-Screen-300x200.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-and-Filter-Screen-768x513.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-and-Filter-Screen-620x414.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To see it in action, we will add it to a page. To do this in the Gutenberg editor, we will simply click the <strong>plus<\/strong> sign and add a shortcode block. Elementor users should, conversely, use the shortcode element from the left-hand side menu, while Classic editor users can simply paste the shortcode where they want it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Shortcode-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Shortcode-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Shortcode-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Shortcode-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Add-Shortcode-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since we are using Gutenberg, we need to paste the shortcode <em>[searchandfilter fields=&#8221;search,category,post_tag&#8221;]<\/em> from the plugin\u2019s settings page to the shortcode block.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-Page-SC.jpg\" class=\"attachment-full size-full\" alt=\"Search Page SC\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-Page-SC.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-Page-SC-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-Page-SC-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Search-Page-SC-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And now we have a fully functional search field with category and tag filters.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-1.jpg\" class=\"attachment-full size-full\" alt=\"Filter Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-1-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But can you customize this plugin to allow for more filtering options? Of course you can! It just takes a bit of fiddling with the shortcode itself.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note how the shortcode<em> [searchandfilter fields=&#8221;search,category,post_tag&#8221;]<\/em> contains three criteria for sorting: the search field, the category, and the tag. You can completely eliminate the search field simply by erasing it from the shortcode.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em>[searchandfilter fields=&#8221;category,post_tag&#8221;]<\/em> will render a filtering tool based solely on categories and tags.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-2.jpg\" class=\"attachment-full size-full\" alt=\"Filter Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want to allow your users to filter your content using more than one category or tag, you can do that, too. Simply alter the shortcode to <em>[searchandfilter fields=&#8221;post_tag,post_tag&#8221;]<\/em> and you will get a refined tag filtering tool.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-3.jpg\" class=\"attachment-full size-full\" alt=\"Filter Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-3.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-3-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-3-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Filter-Preview-3-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So, with one simple, easy to use plugin, you can set up as many filtering layers as possible, making it really easy for your visitors to get exactly the content they are after: make your filters as loose or as refined as you like.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These filters can be especially useful if you know how to <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-taxonomy\/\">use WordPress taxonomies correctly<\/a>. In fact, the better you organize your content, the better the filters will work. We also have a guide for you if you want to know more about best practices in <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-categories-vs-tags\/\">organizing your WordPress content<\/a>, but the gist of it is that you ought to keep categories broad, and really refine the tags.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Your posts should ideally belong to no more than one category, and have as many tags as you see fit. This is also how you should configure your content filter widgets: a category or two, and multiple tags. Be careful not to overwhelm your visitors with a multitude of options, though: if you feel your content is difficult to find, you can actually make the situation worse by overcorrecting this.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown, it\u2019s not too difficult to let your users filter your posts and pages \u2013 you can do it with a reasonably simple and free plugin. It takes some time setting up and configuring the shortcode, but it\u2019s well worth the improvement in user experience, especially if you are hosting a lot of diverse content. Good organization in terms of categories and tags is half the work, so be careful about that. Your visitors\u2019 filtered searches will be really meaningful only if your content organization (i. e. your use of WordPress taxonomies) makes sense.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Letting your users filter your content takes no time at all and greatly improves their experience. Let us show you how to do it.<\/p>\n","protected":false},"author":16990,"featured_media":21638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,47,4,13],"class_list":["post-21305","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-plugin","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=21305"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/21305\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/21638"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=21305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=21305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=21305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}