Dynamic Filterable Portfolio Text

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

This tweak is in response to a request I received recently. As soon as I read it, I realized it was a great idea and would come in handy for myself and others. Thank you Liv for the request! Liv wanted to add text to the Filterable Portfolio modules just below the filter buttons and above the grid of images. When each filter button was clicked, the text would change accordingly. It would basically be an introduction or description of the category the user had just clicked on.

You can view the demo here.

Because of the nature of the request and the fact that it will require custom text for everyone, I decided it would be best to do this with jQuery. If you’re not familiar with jQuery, you should still be able to easily copy and paste the code I provide below and customize it for yourself.

Copy and paste the code below in your footer.php file of your child theme just below this line:

Here it is:

The PHP if statement in the first line limits this script to one page or post. You’ll need to change 499 to whatever your page or post ID is. In line 8, I am referencing .et_pb_portfolio_filters, which is the CSS class for the filter container. If you only have one filterable module on your page, you can leave this. If you have more than one, you’ll need to give one of your modules an ID and put that ID in place of the class like this:

You’ll also notice this is where we are adding our paragraph HTML and default text when the page loads. The text will change depending on the filter selected, but the HTML in line 8 will not. If you change the text color, margin, etc. it will change for each category. I added a min-height to prevent jumping from differences in category description length. Feel free to change anything here. You could even change the paragraph tag to a heading.

As for the text in line 8 “Please click on one of the buttons above to sort through the categories.”, you can either change it or you can remove the text entirely. You’ll just want to do the same on line 17. If you remove it, delete the text only. You’ll still need to keep the paragraph HTML in line 8.

Now we just need to change the categories and category text in lines 15-25:

Starting on line 19 is my first category, followed by the text I want displayed for that category, followed by a break. This will repeat for every category you have. The important thing is that the category must match the text in the button EXACTLY. It is case sensitive and you also need to include any spaces.

Now go through lines 15-25 and replace test and third with the text on your filter buttons and change the Latin text with your text. Add any new categories using the same pattern.

You should be all set! If you run into problems, please let me know in the comments below. Thanks!

 

    12 Comments

  1. This worked really well, easy and simple to integrate and tutorial was super clear. Thanks Brad!
    Liv

    Liv

    June 15, 2016

    • Awesome! Glad you were able to get everything working with it.

      Brad (admin)

      June 15, 2016

  2. I couldn’t get mine working. Tried both basic and with a custom ID.

    Craig

    June 17, 2016

    • Try removing the first and last line (the php if statement) and see if that works. If you decide to leave that if statement, you need to change the post ID (499) to the post ID you want to use.

      Brad (admin)

      June 21, 2016

  3. how to you make it so the picture comes bigger and it does not goes to the project page

    crgo

    July 19, 2016

  4. How did you get the thumbnails to show a larger image and not go to the project page?

    hindy

    October 30, 2016

  5. Hello, is it possible to show the cathegory description instead of a “fix” text written in the code?

    Van

    May 11, 2017

    • I’m sure it would be possible but you would have to edit the template and query each category and get the category description, then echo each out into a hidden container. Then use jQuery to copy that text and place it below the filters depending on the category clicked. It would be a long process. Would be much easier to just manually add the description from each category.

      Brad (admin)

      August 17, 2017

  6. Does this work with Divi 3.0.37 and wp 4.7.5 ? I followed the instructions to the letter but nothing appeards.

    Marco

    May 22, 2017

    • Just tested on latest version of Divi and WP and still works.

      Brad (admin)

      August 17, 2017

Post a Reply

Your email address will not be published. Required fields are marked *