User post filter based on tag etc

Loops & Logic
1

Hi, is there a way to create a basic post filter the user can access with L&L?

These are just buttons that let the user filter posts on a page by tag. The loop code would be updated in the background and load only the filtered posts. My current use case is an ACF value, but that’s not so important right now.

An example of one I have used in the past is here:

I think the ‘pagination’ feature is already doing something similar from a functional perspective. Maybe this should be a feature request?

Thanks.

2

Hi Phil, at the moment L&L doesn’t include a native way to build faceted searching/filtering. You’re right that the pagination option uses ajax to modify what’s being displayed after the page has loaded which I believe is the same process used by most faceted search/filter plugins. While there isn’t currently native functionality for this, we’ve used L&L on some of our own site builds to create something like this using FacetWP, which we’ve roughly documented here. Basically, you’re using FacetWP for the filter controls and L&L to control what data is displayed for each post. Another user recently used FacetWP to create a faceted search page if the notes in that thread are helpful and I’m sure there are others if you search through the forum. Another user was working with Search and Filter Pro to achieve a similar thing. There’s going to be a new feature in L&L version 3.0.0 that allows working with Search and Filter Pro a bit more efficiently so subscribe to that thread if you’re interested and you’ll get notified when we launch the next version of L&L and post an update in that thread.

I’m sure there may be value in incorporating that kind of functionality natively within L&L at some point in the future but for now hopefully those two options should work for you.

2 Likes
3

Thanks for the info Ben.

My primary goal at the moment is to minimise plugins by producing content with L&L, so I created a custom menu in WordPress and called it with the ‘menu’ tag to create a category filter.

You don’t get the asynchronous loading with this approach but it’s simple to implement and has potential SEO benefits because it leverages the website content structure.

Demo here: https://cutloosecrew.com/blog/

1 Like
4

That’s a great workaround! I was thinking this would be one way of achieving the basic functionality of those facetted search plugins without the instant loading. From a UI and SEO perspective it definitely still works and is easier to implement since you don’t need another plugin like Search and Filter or FacetWP. Want to share your template here for others to use as inspiration?

I was thinking that if I were to exclusively use L&L to create a single filterable results page, the way I’d do it would be to dynamically generate a list of fields I wanted users to be able to filter for (like categories using a taxonomy term loop or something) and then I’d make the URL for each of those that includes that taxonomy name as a URL query. And then I’d use that query to inform a post loop further down on the page.

So something like this:

<h2>Click these categories to filter the posts</h2>
<Loop type=taxonomy_term taxonomy=category hide_empty=true>
  <p><a href="{Url current}?filter={Field id}"><Field title></a></p>
</Loop>

<h2>Here are some posts that match your chosen filters</h2>
<Loop type=post taxonomy=category terms="{Url query=filter}">
  <p><Field title /></p>
</Loop>

But if your archive pages already exist anyway, it might be worth it for SEO to send users to those pages instead of filtering a single page. Depends on your site’s data structure and strategy I suppose. I bet with some conditional logic on this there’d be a way to filter posts by multiple terms.

2 Likes
5

Yeah, there’s many ways to help users discover content and people should use the solution best suited to their website and desired user experience. Right now I just wanted a simple way to filter content based on the WP category structure I already had in place.

People with hundreds of posts or products will want more advanced filtering solutions that rely on tags or custom fields etc. That’s when I think people should consider investing in a filter or search plugin. But like all plugins you will spend a fair amount of time getting them working properly and looking good. If the plugin is using AJAX the results may not be visible to search engines which can have SEO impacts.

I am not sure if I have used the most elegant approach code wise but my archive template is just two simple loops as commented below.

<!--Title-->
<div class="entry">
    <h1 class="entry-title no-margin"><Term title /></h1>
</div>
<!--Filter-->
<div class="filter">
    <ul class="filter-list">
        <Loop menu="63">
            <a href="{Field url}" target="_self" rel="noopener">
                <li class="filter-item">
                    <Field title />
                </li>
            </a>
        </Loop>
    </ul>
</div>
<!--Posts-->
<div class="posts posts-grid-3">
    <Loop type="post" orderby="date" order="desc" category="current">
        <template id="7321" />
    </Loop>
</div>
2 Likes
6

Also, one feature that seems to be missing from the ‘menu’ loop is a way to identify the currently active menu item, so this can be highlighted using CSS.

I am wondering if it is possible to use an IF statement to compare the menu link to the current URL and add a CSS class E.g. ‘current-active-item’?

I am still learning how to use IF statements and I am unsure if this will work for a ‘menu’ loop.

Thanks.

7

Hello Phil,:slight_smile:

You often make an interesting thread, I like it. I am learning alot:)

On your last message/reply I think you are looking for some javascript kinda thing? Which Get JS this might help you. I think I am gonna try this out later tonight myself.

Thanks for all the stimulating tips and questions!

2 Likes
8

Haven’t tested this myself but I think you could do this by checking the route of the page either using If route or If check="{Route part=2}" if you want to compare a specific part of the route. You could probably also do this with If field=name depending on your data structure. All of those should work in your particular use case, it’d just depend on what makes the most sense or what performs best. Here’s one approach that should work

<Loop menu="63">
  <a href="{Field url}" target="_self" rel="noopener">
    <If route includes value="{Field name}">
      <li class="filter-item,current-active-item">
        <Field title />
      </li>
    <Else />
      <li class="filter-item">
        <Field title />
      </li>
    </If>
  </a>
</Loop>
2 Likes
9

Thanks, @benjamin.

I could not get the matching to work using the menu name or title. There might be an issue with the output of the menu tag or I may not understand the logic well enough.

Either way, I got it working using a match between the menu item URL and the current page URL. Seems to be working fine for my simple website.

Demo here: https://cutloosecrew.com/blog/

Template and CSS below if anyone wants to try it out. :slight_smile:

Template

<!--Title-->
<div class="entry">
    <h1 class="entry-title no-margin"><Term title /></h1>
</div>
<!--Filter-->
<div class="filter">
    <ul class="filter-list">
        <Loop menu="63">
            <a href="{Field url}" target="_self" rel="noopener">
                <If check="{Url site}/{Route}/" is value="{Field url}">
                    <li class="filter-current-item">
                        <Field title />
                    </li>
                    <Else />
                    <li class="filter-item">
                        <Field title />
                    </li>
                </If>
            </a>
        </Loop>
    </ul>
</div>
<!--Posts-->
<div class="posts posts-grid-3">
    <Loop type="post" orderby="date" order="desc" category="current">
        <Template id="7321" />
    </Loop>
</div>

CSS

/* Filter */
.filter,
.filter ul,
.filter li {
    display: block;
}
@media only screen and (min-width: 768px) {
    .filter,
    .filter ul,
    .filter li {
        display: flex;
    }
}
.filter {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 0 0 30px 0;
}
.filter ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.filter li {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px 3px 3px 3px;
    padding: 10px 15px;
    margin: 10px 6px;
    line-height: 1;
}
.filter li:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.filter li:active {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(2px);
}
.filter li.filter-current-item {
    background-color: rgba(0, 0, 0, 0.8);
}
.filter a {
    color: white;
}
2 Likes
10

Thanks Phil! I was trying to come up with a solution using JavaScript and it was taking so long and getting so long.
Your solution really shows the power of L&L :smiling_face_with_three_hearts:, it’s so efficient and clean! I tried your code and was AMAZED! I will surely show this to my friends who also do front-end.

Thank you so much and I hope to see more amazing stuff from you. :smile:

1 Like
11

Great to hear Sunskie :slight_smile:

1 Like