Filter out certain labels from my Blog Homepage

Sometimes, you want to be able to filter your posts on the homepage. Maybe you want to use the label "Home" to be the only posts that show on the homepage, or maybe you don't want to show your "Cooking" and "Dancing" posts on the home page. Here's how you can filter by label.

Notes: 

  • This does not require any javascript!
  • This does not apply to Dynamic Views templates.
  • This will look funny if you have posts grouped by date, as there will be dates with no posts.


WARNING:
This method will filter blogs of a certain label out of a list of all the posts that were loaded. So, if you only load the first 7 posts in your feed, and then filter to "Home" posts, you're going to only see the posts out of the first 7 which have the label Home. You can, of course, increase the number of posts shown in the home-page, but do so with the knowledge it could slow the homepage on your blog down!

Filtering to Posts with a specific Label

First, navigate to the HTML editor for your template, under Template => Edit HTML.

Navigate straight to the Blog Widget.

Use Jump to widget to quickly navigate to a particular section of your template.

Output the labels in hidden input elements.

First, find the post includable (if you can't spot it, hit Ctrl + F, and search for "id='post'"). We only want to conditionally add a class to the parent, then call the standard implementation (super.post). Replace the contents of the includable with the following.

<b:includable id='post' var='post'>
  <b:include name='super.post' data='post' />
  <b:class name='has-label'
           cond='data:post.labels any (l => l.name == "[The label name]")' />
</b:includable>
b:loop for outputing <input type='hidden' data-label='My Label' />

Add CSS for hiding the posts which have a certain label

Save your changes, then head to Theme => Customize => Advanced => Add CSS, and add the following line of CSS.

.has-label .post-outer { display: none; }
 CSS for hiding the siblings of hidden input elements matching a data-label "My Label"

Make the css for filtering the posts only happen on the home page

The home page can be recognized by the data field view.isHomepage. We filter the style to only hide by label on the homepage using an extra condition check.


<b:includable id='post' var='post'>
  <b:include name='super.post' data='post' />
  <b:class name='has-label'
           cond='data:view.isHomepage and
                 data:post.labels any (l => l.name == "[The label name]")' />
</b:includable>
Wrapping the style in a conditional element for the homepage will leave other pages unaffected

Happy Labeling!

Comments

  1. I agree. You have made the nice blogs with the great info in the contents.

    www.ushomefilter.com

    ReplyDelete

Post a Comment

Popular posts from this blog

Make my background image responsive

Change the landing page of my blog