Blog Filter for Elementor with No Plugin and No Code - Elementor Wordpress Tutorial
Vložit
- čas přidán 17. 09. 2022
- The Elementor PostS Widget is missing a key feature to filter by Categories.
I'll show you a simple way to do a Blog Filter for Elementor with No Plugin and No Code.
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
👕 Get our Merchandise: websquadron.co.uk/merchandise
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - Jak na to + styl
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! 😊
Great video tut Imran! Super easy-to-follow and put into immediate action!
I'VE BEEN LOOKING FOR THIS EXACT SOLUTION FOR WEEKS! THANK YOU!!!!
Another clear, simple tutorial that changed my site for the better. Thank you!
This is the perfect simple post filter menu! Imran, you truly are the GOAT.
Best to use the taxonomy filter they brought out last year
I am delighted with your simple explanations!
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 🤣
That's a very nice trick. This is what I needed to create "tabs" to show the post content. Thank you!
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.
Perfect! Just what I was looking for...and with excellent explanation! Thank you very much!!!👍
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!
This video saved me sooooo much headache!!!! Thanks man! Not sure why I never thought of that!!!!
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.
Great video brother, been looking around for a decent solution, this was simple and clean, thanks for sharing
No problem 👍
This is awesome. I used the same theory to set up filters in Gutenberg. Thsnks so much!
Thx, i was looking for this. Gracias otra vez
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.
OMG! U R MY MAN! THANKS!!! i was looking for it all day long
Try out Gridbuilder WP plugin too.
@@websquadron will do
Excellent tutorial mate
tnx, Thats great. i Like Your "without plugins" or "no plugin" Tutorials
The NEW Elementor Taxonomy Filter is a better way to build now.
Thank you! It's perfect solution!
Thank's for the video! Great job!
Very clever. Thanks for sharing.
That was awesome! Thank you!
Very clever ! Thanks !
This was a really good strategy to get the filters without a plug-in
It's great when you know what you want as the categories. Takes effort but works cool too :)
Thank you! Brilliant!
Great video!!! Thanks a lot!!!
beautiful, Thanks!
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
Thank you for this fantastic tutorial for a small business owner who is creating his own website! I am only coming across one issue when it filters and shows only the category, and the transition is slow. Do you know why this may be?
That could be due to the page load. I recommend not using this method and instead using the built in Elementor Taxonomy Filter.
Yes! Thank you very much!
You can use the New Elementor Taxonomy Filter as well.
Really, you save my life!!!!!
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 :)
Use the new Elementor Taxonomy Filter instead with Loop Grid
Top Man ! Merci beaucoup
This is what I'm looking to get done. A little intimidating the process, but i all try it out.
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 !!
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.
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.
A good point... and I'm not sure...
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 !!
I would use alternate methods now ... like this...
czcams.com/video/flHZlUdA3z0/video.html
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
Might be better to use the new Elementor Taxonomy Filter
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.
i wouldn't use this method now. Use the Elementor Taxonomy Filter instead.
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.
I would recommend waiting for a few weeks as the new taxonomy filter will be released in 3.15
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!
Thanks. For that scenario you would need a premium plugin like GridBuilder which is really good.
@@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.
@@websquadron hi there are some free alternatives?
Is there a way to assign a particular category from the many to be selected by default?
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
Do you you have Elementor Pro?
Also consider using the new EL Taxonomy Filter instead.
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?
Just create an image that links to a page with the category inside the query
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.
You could use Query to only show the categories per Archive, and set the display conditions too
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.
Yes, in the Query Setting of the Post/Loop Grid you can exclude Categories. Select Term, and then add your Cats.
not if I'm using "curent querry" like in your video@@websquadron
Excelent tutorial my friend, now it would be nice to know how to create an animation for the post to show.. jeje!
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!
I would suggest using Gridbuilder for a much better solution.
@@websquadron I ended up using Category Ajax Filter for Elementor which was lean and worked exactly how I needed for my situation. thanks!
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?
Best to use the native EL Taxonomy widget now.
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?
Hmmmm any optimisation plugins or snippets activated?
@@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.
@@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.
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?
I wouldn’t use this method anymore. Use EL’s new taxonomy filter
THank you for this explanation.
How to show all posts without filter again after clicking on a category filter?
You have a button for All. But don’t use this method anymore. Use the taxonomy filter now.
Thanks!
Thanks!
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!
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.
@@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.
@@websquadronCan you link the video you did using the plugin. Thanks
@@ryanmurray8659 I used GridBuilder for filtering now - but here’s the old video on another free plugin: czcams.com/video/o0kOHjwDEdA/video.html
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?
That would need some funky JS
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"?
I would use the new loop grid and taxonomy filter now
Thanks for the info. Have you done this using ACF?
Better to use Gridbuilder Plugin if you plan to use ACF
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.)
Don'r use the Archives. Use the Posts widget and then the Query tab to specific the categories.
Amazing video! Will this only work with the Pro version? As I can't see Archive to choose from when creating a new template
Yes, you need Pro :)
@@websquadron Thanks!
@@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!
Incredible stuff my man, thanks! Can it be done with products and woocommerce as well ?
Better to use the new EL Taxonomy filter
love it, but there is a way to do that with code and the new loop builder and without reloading the web page?
Yes with Filter Everything Plugin or WP Grid Builder, but Elementor will be bringing out their own Loop Filter soon.
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!
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.
@@websquadron Thank you!
@@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
@@jrashish Until EL roll out the Loop Filter, then no. It's a shame and there is no date of release yet.
@@websquadron Noted! Thank you soo much!
Thank you for this great tutorial! I would like to apply this to a CPT, but unfortunately it doesn't work.
You may need to use the loop grid for it to work better with CPT
"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?
Create the All cat and tick it for all items
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
You need to use the posts widget instead
@@websquadronThanks, Much Appreciated
What if you want to do this with ‘projects’ and ‘blogs’ separate?
I’d use the new taxonomy filter
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
It's probably because it sits outside in a drop down
@@websquadron and how do i fix that?
@@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.
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?
Yes as long as there are links for them
@@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?
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 :(
Best to use the upcoming Elementor filter or use tabs as I did in a recent video
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
Best to use the new Elementor Taxonomy Filter.
I create that but pages reload on every time when I change category page. I need something dynamic "like no page reload"
Then you need to use Gridbuilder.
Free methods often require page reloads.
Some have AJAX but then creativity is stifled.
In your video, when you click on the categories the page refreshes and then show the items.
I don't use this now as it's a hack way of doing it without plugins.
Use the new Taxonomy filter.
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?
Difficult to answer without seeing your site. Best to use the new EL Taxonomy widget instead
Does this work with custom post types as well?
Yes
This is so great, but I don't have the option Current query. What do I do wrong? I follow the steps exactly..
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.
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
Use the new taxonomy filter now
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.
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.
@@websquadron I see and actually I found another video where you show that. Thank you.
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?
Better to use the new EL Taxonomy filter now. This is an old video.
It works fine within the template, but when I want to publish that template as a page, it doesn't work well anymore.
I would use the new Elementor Taxonomy Filter now
I want to make a blog post filter without refreshing the page. How can I do that using Elementor Pro.
I don't use this now as it's a hack way of doing it without plugins.
Use the new Taxonomy filter.
Is it possible that this does not work with loop grids?
I wouldn’t use it.
Elementor have the new post filter coming out very soon
Great Tips! Does it work with CPT UI Posts ?
Not tried that yet.
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
Mine not filtering on the page. It's taking me to a new page with the results. How do I fix that?
Use the new EL Taxonomy filter now
the archive option and the publish conditions do not pop up for me
Are you building this in a template?
I try this but by clicking on the menu i go to a new url - /category/All . What do I do wrong?
Better to use the new Taxonomy Filter
Hello my friend! Is this Elementor basic or Pro?
I only use Elementor Pro
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!
Try the new taxonomy filter with EL.
Could you make a checklist that does this?
I would use the new Taxonomy Filter now
Nice trick 👍🏻
Well done 🙂
But I think it will not be always practical...
Agreed. There are plugins and other methods too :)
can i do this with my product lists
I would use the new taxonomy filter
you should make a video on how to create filters with elementor without paying plugins that would be a awsome content
@@websquadron
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.
I wouldn’t use this method anymore.
Use the taxonomy filter added by Elementor.
Activate it in the Features.
@@websquadron YOU ROCK!!!!! Humble and very energetic thanks from South Africa!
The Sitemap Widget can be hacked to do the same thing ainna?
Never tried it
how to add drop down filter for free on post loop grid or product loop grid ?
Would need some JS and CSS.
@@websquadron do you have any code for this ?
This is a grat video but there is a big problem when switching on mobile mode.
hi deos this work with products too ?
It would but you’re better to use the new taxonomy filter
thanks i found your video reffering to the TABS element for elementor pro version @@websquadron
do you have url for that please ?
@@websquadron
do you know how i can do a search bar only for one type of category ? @@websquadron
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😂😂😂😂😅😅😅😅
Mobile friendly?
Better to use the new EL Taxonomy filter
but still you gonna need ele;entor pro for archive section
Use the new loop grid now