Add filters on the top of content

  • Hello!
    I want to build my portfolio on wordpress.
    I have a theme that show just featured images on the homepage so it looks like portfolio homepage.
    The theme name is ArtWorksResponsive.

    Everything is working great, but I want to add filters on the top of content, like ( All designs – Logo design – Flyer design – Business Cards – etc.)
    When somebody clicks on “All designs”, it shows All designs (posts), when somebody clicks on “Logo design”, it shows just Logos, etc.

    How can I add that feature on my wordpress site?
    Thank you!

Viewing 1 replies (of 1 total)

  • I don’t think there’s a plugin to do that. But if you want to try coding…

    In the past I’ve done something similar by giving each image an html data attribute, such as:

    <ul id='mywork'>
  <li><img src="logo01.jpg" data-type="logo" alt="Logo 1"></li>
  <li><img src="logo02.jpg" data-type="logo" alt="Logo 2"></li>
  <li><img src="flyer01.jpg" data-type="flyer" alt="Flyer"></li>
  <li><img src="card01.jpg" data-type="card" alt="Card"></li>
</ul>

    And created a menu listing each groups name with data terms:

    <ul id='mymenu'>
  <li class='selected' data-term='logo'>Logos</li>
  <li class='selected' data-term='flyer'>Flyers</li>
  <li class='selected' data-term='card'>Cards</li>
</ul>

    Then use jQuery to show and hide images based based on their data attribute values:

    jQuery("#mymenu li").click(function() {
  var filterTerm = jQuery(this).data('term');
  jQuery("#mywork > li").hide();
  jQuery("#mywork").find("> li[data-type*='"+filterTerm+"']").show();
});

    You would probably need to debug/customize it to work how you’d like plus add some CSS styling.

    More info if needed:
    https://www.w3schools.com/tags/att_global_data.asp
    https://api.jquery.com/attr/

Viewing 1 replies (of 1 total)
  • The topic ‘Add filters on the top of content’ is closed to new replies.