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:
|
1 |
<?php wp_footer(); ?> |
Here it is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php if(is_page( 499 )): ?> <script type="text/javascript"> /* * Create a custom text block that changes when a user clicks on a category filter button */ jQuery(document).ready(function(){ jQuery('.et_pb_portfolio_filters').find( 'ul' ).after( '<p class="filter_text" style="margin-top: 15px;min-height: 50px;color: red;">Please click on one of the buttons above to sort through the categories.</p>' ); jQuery( '.et_pb_portfolio_filter a' ).on('click', function(e) { e.preventDefault(); var currentCategory = jQuery(this).text(); switch (currentCategory) { case "All": var categoryText = "Please click on one of the buttons above to sort through the categories."; break; case "test": var categoryText = "Aenean consectetur ipsum ante, vel egestas enim tincidunt quis. Pellentesque vitae congue neque, vel mattis ante. In vitae tempus nunc. Etiam adipiscing enim sed condimentum ultrices. Cras rutrum blandit sem, molestie consequat erat luctus vel."; break; case "third": var categoryText = "Cras nunc est, laoreet sit amet ligula et, eleifend commodo dui. Vivamus id blandit nisi, eu mattis odio. Nulla facilisi. Aenean in mi odio. Etiam adipiscing enim sed condimentum ultrices."; break; } jQuery('.filter_text').fadeOut('fast', function() { jQuery('.filter_text').text(categoryText).fadeIn('fast'); }); }); }); </script> <?php endif; ?> |
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:
|
1 |
jQuery('#your-filterable-module-ID').find( 'ul' ).after( '<p class="filter_text" style="margin-top: 15px;min-height: 50px;color: red;">Please click on one of the buttons above to sort through the categories.</p>' ); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
switch (currentCategory) { case "All": var categoryText = "Please click on one of the buttons above to sort through the categories."; break; case "test": var categoryText = "Aenean consectetur ipsum ante, vel egestas enim tincidunt quis. Pellentesque vitae congue neque, vel mattis ante. In vitae tempus nunc. Etiam adipiscing enim sed condimentum ultrices. Cras rutrum blandit sem, molestie consequat erat luctus vel."; break; case "third": var categoryText = "Cras nunc est, laoreet sit amet ligula et, eleifend commodo dui. Vivamus id blandit nisi, eu mattis odio. Nulla facilisi. Aenean in mi odio. Etiam adipiscing enim sed condimentum ultrices."; break; } |
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!
14 Comments
This worked really well, easy and simple to integrate and tutorial was super clear. Thanks Brad!
Liv
June 15, 2016
Awesome! Glad you were able to get everything working with it.
June 15, 2016
I couldn’t get mine working. Tried both basic and with a custom ID.
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.
June 21, 2016
how to you make it so the picture comes bigger and it does not goes to the project page
July 19, 2016
https://www.diviplugins.com/plugins/portfolio-posts-pro/
August 17, 2017
How did you get the thumbnails to show a larger image and not go to the project page?
October 30, 2016
https://www.diviplugins.com/plugins/portfolio-posts-pro/
August 17, 2017
Hello, is it possible to show the cathegory description instead of a “fix” text written in the code?
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.
August 17, 2017
Does this work with Divi 3.0.37 and wp 4.7.5 ? I followed the instructions to the letter but nothing appeards.
May 22, 2017
Just tested on latest version of Divi and WP and still works.
August 17, 2017
Hi! I need to chenge The URL when selecting a category, as in your demo. does portfolio-posts-pro have that function?
March 3, 2018
Hi Brad,
Is it possible to have more than one line of text and also style the text?
i understand that the text needs to be changed to possibly .html to be able to style it, not sure how to do this, any guidance?
Thank you
July 18, 2018