Blog Filter for Elementor with No Plugin and No Code - Elementor Wordpress Tutorial

[@jack_of_all_marketing]

This is the perfect simple post filter menu! Imran, you truly are the GOAT.

[@websquadron]

Best to use the taxonomy filter they brought out last year

[@StreamlineRoofingTx]

@@websquadron can you do a video explaining why and the pro's and con's. I've watched those videos of yours, but man it sure would be nice to have more control of the widget for sub-categorys and dropdown toggle

[@earlychildhoodconnection]

Another clear, simple tutorial that changed my site for the better. Thank you!

[@theburntnacho]

I'VE BEEN LOOKING FOR THIS EXACT SOLUTION FOR WEEKS! THANK YOU!!!!

[@koncertifestivali]

I am delighted with your simple explanations!

[@art.v]

Brilliant and really valuable! If you want to maintain a nice look on your site your method works best. I found that the two templates are needed. It works with one template as well, but when you click on a category the system throws you to an ugly self-generated page as you mentioned. With your method you form your page as needed and maintain a perfect look. Million thanks for this and all your efforts! 😊

[@daviesbrandingdesign]

Thanks!

[@websquadron]

Thanks!

[@elevateyourcreativeness]

Great video tut Imran! Super easy-to-follow and put into immediate action!

[@mydreamlux]

Perfect! Just what I was looking for...and with excellent explanation! Thank you very much!!!👍

[@antonichristian5845]

really nice Imran!!! the ironic thing is though the Portfolio widget will accept posts and has a filter bar option but the actual Posts widget does not and we need to do all this lol 🤣

[@mahdizeinali-ei2eb]

tnx, Thats great. i Like Your "without plugins" or "no plugin" Tutorials

[@websquadron]

The NEW Elementor Taxonomy Filter is a better way to build now.

[@petervanrensburg687]

Damn man, I installed all kinds of elementor related add on plugins and still couldn't do it on my own. Absolutely legened mate, thank you!

[@paologera]

That's a very nice trick. This is what I needed to create "tabs" to show the post content. Thank you!

[@muhammadshafiulbashar2870]

OMG! U R MY MAN! THANKS!!! i was looking for it all day long

[@websquadron]

Try out Gridbuilder WP plugin too.

[@muhammadshafiulbashar2870]

@@websquadron will do

[@brianamacwilliam.attachment]

Helped me a lot! Thank you.

[@iamshirleyt]

This was a really good strategy to get the filters without a plug-in

[@websquadron]

It's great when you know what you want as the categories. Takes effort but works cool too :)

[@websitedesigntutorials]

This is awesome. I used the same theory to set up filters in Gutenberg. Thsnks so much!

[@garrisonmiller3352]

This video saved me sooooo much headache!!!! Thanks man! Not sure why I never thought of that!!!!

[@vdevictoria4016]

Thx, i was looking for this. Gracias otra vez

[@AnimalCareTrust]

Perfect! This is just what I've been looking for. Greatly appreciate the concise but comprehensive explanation. I can attest that it's idiot-proof, because even I could do this.

[@AlixsanderHajSaw]

Great video brother, been looking around for a decent solution, this was simple and clean, thanks for sharing

[@websquadron]

No problem 👍

[@francoisallard508]

Thank you so much Imran for this helpful video. I was wondering though if this method could also be applied to a loop grid not just the post widget, somewhat as you described in your other recent video « Loop Filter with Nested tabs », but using the menu widget instead of the nested tabs widget.

[@RichardWadeUK]

Excellent tutorial mate

[@Faith61868]

Great teacher, thank you so much!!

[@TamasKAntal]

Hey! This worked so great for me till yesterday when all of a sudden it has stopped loading in the templates in the live page so I only get header footer and blank in body section. When checking editor it works as well is in preview mode but not in live mode. I used ACF pro to create custom post types and taxonomies and used polylang to translate them. It worked just great for weeks so I'm confused what I could have done to it?

[@websquadron]

Hmmmm any optimisation plugins or snippets activated?

[@TamasKAntal]

@@websquadron Thanks for the reply! Can't say I have any of those. For these kinds of reasons I prefer optimizing at the end of the build and the template doesn't have anything but a title, the filter nav, and the loop widget that displays the posts/results. It's almost like Elementor doesn't know what to fill out the template with. I'm thinking of trying a filter plugin instead so maybe I can just build this on an actual page instead of using templates.

[@TamasKAntal]

@@websquadron Update: before investing time in a new plugin I thought I would delete the archive templates and try to recreate them from scratch and it did the trick. I don't what must have gone wrong but it works now so I'll try and not touch it lol.

[@jomotioncreative]

My layout has a large header graphic above the category menus - which I added on the archive template. When user select a category filter - it works correctly, and goes to the cat page - but user now has to scroll back down mid-page to see the posts. Is there a way to have it "jump down" x amount of pixels when a category menu button is clicked? OR a way to make it update with Ajax? thanks again!

[@websquadron]

I would suggest using Gridbuilder for a much better solution.

[@jomotioncreative]

@@websquadron I ended up using Category Ajax Filter for Elementor which was lean and worked exactly how I needed for my situation. thanks!

[@AlexJustHere]

I think, I am missing the last part. Step #1: I created a blog archive template with "current query" and with the condition "post archives" than Step #2: I created the second archive (being the result template), pasted in the container (with nav + post widget from the first archive template), set condition to "All archive". How do I place this somewhere on the page? I tried to essentially place the first archive as short code on my homepage, but when I click on the nav, I get the catergory page with the results instead of staying on my homepage. If I pasted in the section from the first archive template, the same happens. From 06:02 on, I cannot follow the video. Everything before that, was super clear, I double checked my conditions, as well as the "current query" thing :(

[@peterfrancis4401]

Thanks for the video. Its an awesome work around however, when I click on the categories we have created the page refreshes and the wordpress header, logo and menu appear. Is there any way to prevent that? I want it to show my elementor menu and header

[@websquadron]

Might be better to use the new Elementor Taxonomy Filter

[@baes13]

Hello, this tutorial is fantastic! I have a problem, I follow all the steps, I create the 2 templates, but how can I apply the operation on a page? In the video the test is done in the same template and it works there, but copy the file to a page and have it work? For example, I have a page called "blog", there I drag the Archive widget, and it doesn't work. I have tried to copy the shortcode from the first template, and it doesn't work either. Thank you so much !!

[@websquadron]

I would switch to using GridBuilder WP now, or wait until Elementor bring out there own filter system. I'd need to look at your pages more but that falls under 1-2-1 consultancy.

[@ellipsical]

great but question- how would i make an initial category page so when someone clicks blog it goes to a category page listing different categories like "news" or "finances" etc and then when someone clicks on a category, it goes to this page with that category highlighted?

[@websquadron]

Just create an image that links to a page with the category inside the query

[@7708Abby]

hey Imran, i'm kinda wondering if this only work on the original post archive of wordpress or wordpress elementor? I am trying to create a category filter for my event post which was created using ACF but I followed everything on your video except using my event post archive, but whenever i use the filter and click the filter menu, it just goes to a blank page and doesn't actually filter anything even my event filter has their own category. What do you think is the problem? Thanks in advance for all your helpful tutorials.

[@websquadron]

i wouldn't use this method now. Use the Elementor Taxonomy Filter instead.

[@shahj1620]

I've set my 'Layout>number of posts to 9'. But it just displays 3 posts at a time for 'Blog filter Results' ? I've noticed at 1.25seconds your settings are also the same! Is there a way around this? Would really appreciate your input and also fabulous video. Really helped me in my new job :)

[@websquadron]

Use the new Elementor Taxonomy Filter instead with Loop Grid

[@danielmihajlovski]

Is there a way to assign a particular category from the many to be selected by default?

[@thierryrussodelattre]

Yes! Thank you very much!

[@websquadron]

You can use the New Elementor Taxonomy Filter as well.

[@dots560]

Very clever. Thanks for sharing.

[@jaylambert9047]

Great video and work like a charm. Would you know how to exclude a post category ? I organise that my blog and portfolio are all post. I have an archive for the all blog then one only for portfolio. So I don't need to play within the pages.

[@websquadron]

Yes, in the Query Setting of the Post/Loop Grid you can exclude Categories. Select Term, and then add your Cats.

[@jaylambert9047]

not if I'm using "curent querry" like in your video@@websquadron

[@Neoxphuse]

Question, does this method reload or go to a different page? If we had content above and below but don't want that touched will that be affected?

[@websquadron]

Best to use the native EL Taxonomy widget now.

[@marcbadjou7927]

Hello and thank you for this very clear tutorial. I see in my version of elementor (3.23.4) that the post widget is part of the paid version. Perhaps this has changed between the time your video was uploaded and today? Can you confirm this? Thanks :-)

[@websquadron]

The post filter has always been for Pro

[@markp9196]

Is there also a way to display the category name above the selected category? So for example, when I have selected All products it says all product above the products, when I select Tools, the H1 above switches from All products to Tools. Is that possible? And how?

[@websquadron]

That would need some funky JS

[@evafulop5397]

Thank you! It's perfect solution!

[@kerawelt2008]

Very clever ! Thanks !

[@DanZL1]

Great tutorial but ince we have created the archive, how do we add it to a specific page because we have 2 blog pages: Employer Blog & Job Seeker Blog. So if we follow this video we will have to create 4 archives whcih is fine but I cant figure out how to add them to the 2 seperate blog sections.

[@websquadron]

I would recommend waiting for a few weeks as the new taxonomy filter will be released in 3.15

[@edoorfrontdesk]

I could not make two templates if All-Archives with the different filters, example page Appl filter menu: 1 All - iPhone - iMac - example page SAMSUNG filter menu: 2 All - Galaxy Ultra - Flib - when I create 2 All-Archives it work conflict Any Solutions?

[@gianfrancocasalinuovo3821]

Thanks for the info. Have you done this using ACF?

[@websquadron]

Better to use Gridbuilder Plugin if you plan to use ACF

[@melgreendesigns]

That was awesome! Thank you!

[@wenjingyang4333]

This is so brilliant! But I encountered a question and don't know why. I cannot find an "archive" type when I try to build a new template. Do you know what's wrong with it :( I REALLY need your help. Thx a lot

[@websquadron]

Do you you have Elementor Pro? Also consider using the new EL Taxonomy Filter instead.

[@ryanmurray8659]

I am using 'Archive Posts' instead of 'Posts'(what you used). In Archive Posts there is no option to change the query. Is there any way around that or do i have to use posts instead. Thanks

[@websquadron]

You need to use the posts widget instead

[@ryanmurray8659]

​@@websquadronThanks, Much Appreciated

[@dan_kay]

Does that trick only work with the post widget or also with other widgets like the CTA which I have turned into a "post widget"?

[@websquadron]

I would use the new loop grid and taxonomy filter now

[@desmosedici1272]

ciao hello, great video. I would like to ask you if it is possible to do something like this without elementor pro, and then with one of the plugins you can find

[@ricaspinto]

Good video! Just a heads up, idk why but i had to add a non-default "Category Base" text in "Settings -> Permalinks -> Category Base". Default was just a dot (.) and i had to change this to something else.

[@markosilander4515]

Hi Imran! Thanks for an excellent tutorial. I followed your instructions on my blog and I think I got this working correctly. However, I have a question. Should this technique work without the browser reloading when we select a category from the nav menu? Or does this allow AJAX filter for posts? Currently my browser reloads and the URL changes when I click my categories. I'm just wondering if I got this working properly. Thanks!

[@websquadron]

Hi. Yes, this is a hack-trick way of doing it, and it's not a proper Ajax method. I did do another video with a Blog Filter Plugin that would enable the Ajax facility. I'm hoping that Elementor bring out an inbuilt Blog and Product Filter system.

[@markosilander4515]

​@@websquadron Oh I see. This is a nice technique anyways and works very well. You are right. It would be great if Elementor had the filter system for blog posts and products.

[@ryanmurray8659]

​@@websquadronCan you link the video you did using the plugin. Thanks

[@websquadron]

@@ryanmurray8659 I used GridBuilder for filtering now - but here’s the old video on another free plugin: kzbin.info/www/bejne/pWHOgHugrKl4mqM

[@zackrichter]

I'm running into an issue with this. It works perfectly for one menu and post type. I have a site with two unique post types (taxonomy), and I want to allow the user to filter them as well. The problem I'm running into is even if I create a new menu for the second set and place it on a page since there is a template built and tagged with "all archives", the new page filters just point to the "all archives" template. I hope I'm explaining that correctly. Any ideas? (SUMMARY - Page 1 - Menu A for standard posts. Templates built based on Menu A and "All Archives" tagged on one. Page 2 - Menu B for special post taxonomy. When a menu item is clicked, it goes to the template tagged with "All Archives" and the results aren't shown.)

[@websquadron]

Don'r use the Archives. Use the Posts widget and then the Query tab to specific the categories.

[@calmrose23]

Thank you! Brilliant!

[@IntegraleUmweltheilung]

THank you for this explanation. How to show all posts without filter again after clicking on a category filter?

[@websquadron]

You have a button for All. But don’t use this method anymore. Use the taxonomy filter now.

[@maddy1mymk]

This is what I'm looking to get done. A little intimidating the process, but i all try it out.

[@iannorris3396]

Hey! Great tutorial! Only issue is that when you change the Source in the Query section, it then loses the pagination which should appear under the posts! Do you have a fix for this?

[@websquadron]

I wouldn’t use this method anymore. Use EL’s new taxonomy filter

[@katieortiz8365]

Really, you save my life!!!!!

[@cecilliaaw1532]

Hi there, thank you for the informative video, it really saved my life :) Though I tried to insert the template back into my main blogs page and it became all messed up - the post contents started showing up underneath the blog widget column (Blog filters template). Do you have any suggestions on how to fix it? Thanks so much in advance !!

[@websquadron]

I would use alternate methods now ... like this... kzbin.info/www/bejne/nJ2ri5-LmaZmsJI

[@matteocennigraphicdesigner4157]

Thanks for the video, it was brilliant. What if I have two main categories with their own under categories to display in two different archives page? thx for your attention.

[@websquadron]

You could use Query to only show the categories per Archive, and set the display conditions too

[@jrashish]

Hello Imran, I have been binge-watching all your videos, I have a quick question: to make it responsive for mobile version - i don't want to have the hamburger icon rather a horizontal scroll of the categories - how can i do it? Thank you soo much!

[@websquadron]

You could hide the Nav Bat on the mobile - and then add a Testimonial carousel with your links/text - and only show that on the Mobile.

[@jrashish]

@@websquadron Thank you!

[@jrashish]

@@websquadron Hey Imran, sorry to trouble you again! Creating the filter this way is refreshing the page every time I click on the category at the top - which can be a little annoying sometimes - is there a way to not refresh it. I have plugins to do it, but wanted to know if there is a way in Elementor itrself

[@websquadron]

@@jrashish Until EL roll out the Loop Filter, then no. It's a shame and there is no date of release yet.

[@jrashish]

@@websquadron Noted! Thank you soo much!

[@hlapoint]

Great video!!! Thanks a lot!!!

[@BmxAddict08]

Can you create like this for multiple categories? ex. Blog page > all , dummy , fake , sample. And then Companies page > with different nav and different posts and filter them the same?

[@websquadron]

Yes as long as there are links for them

[@BmxAddict08]

​@@websquadron because I tried and elementor says you have already archive so I'm stuck with only one nav menu or I'm doing it wrong?

[@andrescortez5335]

"All" category does not appear, do i have to create it?? If i do will it work well? or will work only when the tag "all" is given?

[@websquadron]

Create the All cat and tick it for all items

[@cameronrodas5680]

This worked great. Thanks for the super clear explanation. I have one question. Is there an easy way to filter by two categories at once? For example, I'm currently able to filter by diet type (vegan, vegetarian, etc.) or meal type (lunch, dinner, dessert, etc.) separately. However, I'd like to be able to filter by diet type and meal type at the same time. So, Ideally I have a drop-down for each category and can select items from both and it would direct me to another page with those query results. Hope that makes sense. Thanks so much for the video!

[@websquadron]

Thanks. For that scenario you would need a premium plugin like GridBuilder which is really good.

[@cameronrodas5680]

@@websquadron Thanks so much for your reply. I'd been doing some research and that's the solution I kept landing on. Thanks so much for confirming, and for the suggestion. I appreciate your time.

[@gruppo.eden.europe]

@@websquadron hi there are some free alternatives?

[@Gosvigchr]

Hey Imran! I have made a filter menu based on your video and the filter itself works as it should. the problem occurs when I have made a dropdown menu and designed it. For now, I have designed the dropdown menu, but when I click on a category, the design I have made disappears. Hope you understand what I mean and can help me with the problem

[@websquadron]

It's probably because it sits outside in a drop down

[@Gosvigchr]

@@websquadron and how do i fix that?

[@websquadron]

@@Gosvigchr Depends on how you've built it, and then you'll have to not have it in a dropdown. This method may not be the best for what you are trying to achieve.

[@visualmediafx]

I'm curious as to the effect of the algorithms from the google camp though, we all know if they find (what they think) is duplicate content, then they bash the stuffing out of your (score, if you like). I can see the worth of doing it vs adding yet another plugin but.... just a curious point.

[@websquadron]

A good point... and I'm not sure...

[@66tephra]

This could be a great solution but I am missing something. When I add the template to a page and I go to that page the page is blank. I need to click on the menu to get a result set. Can anyone tell me what am I missing? It would be useful to have all items when I first go to the page. Thank you

[@websquadron]

Best to use the new Elementor Taxonomy Filter.

[@MindsetMotivationCentral]

Amazing video! Will this only work with the Pro version? As I can't see Archive to choose from when creating a new template

[@websquadron]

Yes, you need Pro :)

[@MindsetMotivationCentral]

@@websquadron Thanks!

[@MindsetMotivationCentral]

@@websquadron I have Pro now, but the NAV MENU isn't showing. Is this a common problem. ive got the blocksy theme. Is that maybe due to the blocksy theme that it isn't compatible? Thankssss!

[@kookito]

love it, but there is a way to do that with code and the new loop builder and without reloading the web page?

[@websquadron]

Yes with Filter Everything Plugin or WP Grid Builder, but Elementor will be bringing out their own Loop Filter soon.

[@marciegrahame2434]

This is exactly what I'm looking for but when I go to insert the template into my page it only loads the menu and not the posts. When I view the template it shows both the menu and the posts. What am I doing wrong?

[@websquadron]

Better to use the new EL Taxonomy filter now. This is an old video.

[@anupgurav6726]

beautiful, Thanks!

[@Pepadew]

What if you want to do this with ‘projects’ and ‘blogs’ separate?

[@websquadron]

I’d use the new taxonomy filter

[@gianmarcogiuliarig]

Excelent tutorial my friend, now it would be nice to know how to create an animation for the post to show.. jeje!

[@alvarez958]

Top Man ! Merci beaucoup

[@chillingwhilegrilling]

I followed every step of the tutorial, I watched it several times and followed its steps, but in the end, the filter did not work as expected. When clicking on the nav menu it will forward to a different page. One nav item will forward to the homepage, another one to the same page but without the navbar and another nav item will forward to a different page of my website. What am I doing wrong?

[@websquadron]

Difficult to answer without seeing your site. Best to use the new EL Taxonomy widget instead

[@aaizazz]

I create that but pages reload on every time when I change category page. I need something dynamic "like no page reload"

[@websquadron]

Then you need to use Gridbuilder. Free methods often require page reloads. Some have AJAX but then creativity is stifled.

[@marcosansalone]

That's amazing. No code no plugin. Maybe the only cons is that you load a new page and if the website is not fast enough the UX could be affected. Anyway, it is worth it.

[@websquadron]

Exactly. But I am glad that we now have the Elementor Taxonomy Filter for their Loop Grid. It's not perfect but the Taxonomy Filter would be a better solution.

[@marcosansalone]

@@websquadron I see and actually I found another video where you show that. Thank you.

[@marcknight9334]

Incredible stuff my man, thanks! Can it be done with products and woocommerce as well ?

[@websquadron]

Better to use the new EL Taxonomy filter

[@cynthiaturcotte9280]

Does this work with custom post types as well?

[@websquadron]

Yes

[@stbadhon542]

For some reason, the filtering is not working! I've checked all the steps multiple times but still, it's not working. Instead, it's showing me all the results. Can you please point me in the right direction? Thanks!

[@websquadron]

Try the new taxonomy filter with EL.

[@Someonedb43]

Why do you have to select all post first? What if you want to filter for course archives as well through tutor LMS? Shouldnt you just select all archives

[@websquadron]

Use the new taxonomy filter now

[@RonaldoDias-w9d]

Mine not filtering on the page. It's taking me to a new page with the results. How do I fix that?

[@websquadron]

Use the new EL Taxonomy filter now

[@brittverstappen4242]

Okay I followed everything and it works! But how do you make it look like you stay on the same page? I'm trying to get that to work but i failed so far :(

[@websquadron]

Best to use the upcoming Elementor filter or use tabs as I did in a recent video

[@overlandedd]

In your video, when you click on the categories the page refreshes and then show the items.

[@websquadron]

I don't use this now as it's a hack way of doing it without plugins. Use the new Taxonomy filter.

[@katieortiz8365]

It works fine within the template, but when I want to publish that template as a page, it doesn't work well anymore.

[@websquadron]

I would use the new Elementor Taxonomy Filter now

[@rfg-vespa]

Thank you for this great tutorial! I would like to apply this to a CPT, but unfortunately it doesn't work.

[@websquadron]

You may need to use the loop grid for it to work better with CPT

[@fulviaquaglia885]

Great Tips! Does it work with CPT UI Posts ?

[@websquadron]

Not tried that yet.

[@aquilamarketingdigital]

Estou usando o plugin PODS para além dos post de blos, utilizar para mostrar eventos. Até o momento não encontrei uma solução. Testou o filtro com CPT? Obrigado

[@overlandedd]

I want to make a blog post filter without refreshing the page. How can I do that using Elementor Pro.

[@websquadron]

I don't use this now as it's a hack way of doing it without plugins. Use the new Taxonomy filter.

[@violah9407]

This is so great, but I don't have the option Current query. What do I do wrong? I follow the steps exactly..

[@websquadron]

Did you add the Posts Widget? You may have added the Archive Widget. Add the Posts widget beneath your current widget, and then copt and paste the style.

[@syednadeemmuhammed5675]

Nice trick 👍🏻 Well done 🙂 But I think it will not be always practical...

[@websquadron]

Agreed. There are plugins and other methods too :)

[@Ihatelren]

the archive option and the publish conditions do not pop up for me

[@websquadron]

Are you building this in a template?

[@AiForEveryMind]

hi deos this work with products too ?

[@websquadron]

It would but you’re better to use the new taxonomy filter

[@AiForEveryMind]

thanks i found your video reffering to the TABS element for elementor pro version @@websquadron

[@AiForEveryMind]

do you have url for that please ? @@websquadron

[@AiForEveryMind]

do you know how i can do a search bar only for one type of category ? @@websquadron

[@johannajorg8381]

Is it possible that this does not work with loop grids?

[@websquadron]

I wouldn’t use it. Elementor have the new post filter coming out very soon

[@Attenbourghgt]

can i do this with my product lists

[@websquadron]

I would use the new taxonomy filter

[@Attenbourghgt]

you should make a video on how to create filters with elementor without paying plugins that would be a awsome content @@websquadron

[@tinamcdowell6146]

You are my hero... but... yes there's a but (ekkk human error I assure you)... How do I add this to an already created 'Blog' Page that's been styled independently on a website? I attempted to add the 'template' as a container on the page and it didn't work.

[@websquadron]

I wouldn’t use this method anymore. Use the taxonomy filter added by Elementor. Activate it in the Features.

[@tinamcdowell6146]

@@websquadron YOU ROCK!!!!! Humble and very energetic thanks from South Africa!

[@tuwebanime]

Hello my friend! Is this Elementor basic or Pro?

[@websquadron]

I only use Elementor Pro

[@ScottyMcAdam]

Could you make a checklist that does this?

[@websquadron]

I would use the new Taxonomy Filter now

[@wweuncut171]

how to add drop down filter for free on post loop grid or product loop grid ?

[@websquadron]

Would need some JS and CSS.

[@wweuncut171]

@@websquadron do you have any code for this ?

[@TubeGuyStories]

Although I have made this for my client bt still I was wondering how we can do this... then I remembered oh.. I actually have done this before😂😂😂😂😅😅😅😅

[@clintongallagher]

The Sitemap Widget can be hacked to do the same thing ainna?

[@websquadron]

Never tried it

[@CollinxMondesir-f2l]

This is a grat video but there is a big problem when switching on mobile mode.