In this tutorial we are going to show you how to add Excerpts to your filterable portfolio module and make the changes in your child theme so that you won’t lose the changes when you update/reinstall Divi.
You can check out the demo here.
First you will need to add the filterable portfolio module in your child theme.
Lets Get Started
1. Using FTP or your hosting cPanel File Editor, create a new folder inside your child theme, called custom-modules.
2. In this new folder you can create a new file called cfwpm.php. This is the code you should paste inside.
<?php class Custom_ET_Builder_Module_Filterable_Portfolio extends ET_Builder_Module { function init() { $this->name = __( 'Filterable Portfolio', 'et_builder' ); $this->slug = 'et_pb_filterable_portfolio'; $this->whitelisted_fields = array( 'fullwidth', 'posts_number', 'include_categories', 'show_title', 'show_categories', 'show_pagination', 'background_layout', 'admin_label', 'module_id', 'module_class', 'hover_icon', 'zoom_icon_color', 'hover_overlay_color', ); $this->fields_defaults = array( 'fullwidth' => array( 'on' ), 'posts_number' => array( 10, 'add_default_setting' ), 'show_title' => array( 'on' ), 'show_categories' => array( 'on' ), 'show_pagination' => array( 'on' ), 'background_layout' => array( 'light' ), ); $this->main_css_element = '%%order_class%%.et_pb_filterable_portfolio'; $this->advanced_options = array( 'fonts' => array( 'title' => array( 'label' => __( 'Title', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} h2", 'important' => 'all', ), ), 'caption' => array( 'label' => __( 'Meta', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} .post-meta, {$this->main_css_element} .post-meta a", ), ), 'filter' => array( 'label' => __( 'Filter', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} .et_pb_portfolio_filter", ), ), ), 'background' => array( 'settings' => array( 'color' => 'alpha', ), ), 'border' => array( 'css' => array( 'main' => "{$this->main_css_element} .et_pb_portfolio_item", ), ), ); $this->custom_css_options = array( 'portfolio_filters' => array( 'label' => __( 'Portfolio Filters', 'et_builder' ), 'selector' => '.et_pb_filterable_portfolio .et_pb_portfolio_filters', ), 'active_portfolio_filter' => array( 'label' => __( 'Active Portfolio Filter', 'et_builder' ), 'selector' => '.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active', ), 'portfolio_image' => array( 'label' => __( 'Portfolio Image', 'et_builder' ), 'selector' => '.et_portfolio_image', ), 'overlay' => array( 'label' => __( 'Overlay', 'et_builder' ), 'selector' => '.et_overlay', ), 'overlay_icon' => array( 'label' => __( 'Overlay Icon', 'et_builder' ), 'selector' => '.et_overlay:before', ), 'portfolio_title' => array( 'label' => __( 'Portfolio Title', 'et_builder' ), 'selector' => '.et_pb_portfolio_item h2', ), 'portfolio_post_meta' => array( 'label' => __( 'Portfolio Post Meta', 'et_builder' ), 'selector' => '.et_pb_portfolio_item .post-meta', ), ); } function get_fields() { $fields = array( 'fullwidth' => array( 'label' => __( 'Layout', 'et_builder' ), 'type' => 'select', 'option_category' => 'layout', 'options' => array( 'on' => __( 'Fullwidth', 'et_builder' ), 'off' => __( 'Grid', 'et_builder' ), ), 'description' => __( 'Choose your desired portfolio layout style.', 'et_builder' ), ), 'posts_number' => array( 'label' => __( 'Posts Number', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'description' => __( 'Define the number of projects that should be displayed per page.', 'et_builder' ), ), 'include_categories' => array( 'label' => __( 'Include Categories', 'et_builder' ), 'renderer' => 'et_builder_include_categories_option', 'option_category' => 'basic_option', 'description' => __( 'Select the categories that you would like to include in the feed.', 'et_builder' ), ), 'show_title' => array( 'label' => __( 'Show Title', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => __( 'Yes', 'et_builder' ), 'off' => __( 'No', 'et_builder' ), ), 'description' => __( 'Turn project titles on or off.', 'et_builder' ), ), 'show_categories' => array( 'label' => __( 'Show Categories', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => __( 'Yes', 'et_builder' ), 'off' => __( 'No', 'et_builder' ), ), 'description' => __( 'Turn the category links on or off.', 'et_builder' ), ), 'show_pagination' => array( 'label' => __( 'Show Pagination', 'et_builder' ), 'type' => 'yes_no_button', 'option_category' => 'configuration', 'options' => array( 'on' => __( 'Yes', 'et_builder' ), 'off' => __( 'No', 'et_builder' ), ), 'description' => __( 'Enable or disable pagination for this feed.', 'et_builder' ), ), 'background_layout' => array( 'label' => __( 'Text Color', 'et_builder' ), 'type' => 'select', 'option_category' => 'color_option', 'options' => array( 'light' => __( 'Dark', 'et_builder' ), 'dark' => __( 'Light', 'et_builder' ), ), 'description' => __( 'Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.', 'et_builder' ), ), 'admin_label' => array( 'label' => __( 'Admin Label', 'et_builder' ), 'type' => 'text', 'description' => __( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ), ), 'module_id' => array( 'label' => __( 'CSS ID', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'description' => __( 'Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.', 'et_builder' ), ), 'module_class' => array( 'label' => __( 'CSS Class', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'description' => __( 'Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.', 'et_builder' ), ), 'hover_icon' => array( 'label' => __( 'Hover Icon Picker', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'class' => array( 'et-pb-font-icon' ), 'renderer' => 'et_pb_get_font_icon_list', 'renderer_with_field' => true, 'tab_slug' => 'advanced', ), 'zoom_icon_color' => array( 'label' => __( 'Zoom Icon Color', 'et_builder' ), 'type' => 'color', 'custom_color' => true, 'tab_slug' => 'advanced', ), 'hover_overlay_color' => array( 'label' => __( 'Hover Overlay Color', 'et_builder' ), 'type' => 'color-alpha', 'custom_color' => true, 'tab_slug' => 'advanced', ), ); return $fields; } function shortcode_callback( $atts, $content = null, $function_name ) { $module_id = $this->shortcode_atts['module_id']; $module_class = $this->shortcode_atts['module_class']; $fullwidth = $this->shortcode_atts['fullwidth']; $posts_number = $this->shortcode_atts['posts_number']; $include_categories = $this->shortcode_atts['include_categories']; $show_title = $this->shortcode_atts['show_title']; $show_categories = $this->shortcode_atts['show_categories']; $show_pagination = $this->shortcode_atts['show_pagination']; $background_layout = $this->shortcode_atts['background_layout']; $hover_icon = $this->shortcode_atts['hover_icon']; $zoom_icon_color = $this->shortcode_atts['zoom_icon_color']; $hover_overlay_color = $this->shortcode_atts['hover_overlay_color']; $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name ); wp_enqueue_script( 'hashchange' ); $args = array(); if ( '' !== $zoom_icon_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%% .et_overlay:before', 'declaration' => sprintf( 'color: %1$s !important;', esc_html( $zoom_icon_color ) ), ) ); } if ( '' !== $hover_overlay_color ) { ET_Builder_Element::set_style( $function_name, array( 'selector' => '%%order_class%% .et_overlay', 'declaration' => sprintf( 'background-color: %1$s; border-color: %1$s;', esc_html( $hover_overlay_color ) ), ) ); } if( 'on' === $show_pagination ) { $args['nopaging'] = true; } else { $args['posts_per_page'] = (int) $posts_number; } if ( '' !== $include_categories ) { $args['tax_query'] = array( array( 'taxonomy' => 'project_category', 'field' => 'id', 'terms' => explode( ',', $include_categories ), 'operator' => 'IN', ) ); } $projects = et_divi_get_projects( $args ); $categories_included = array(); ob_start(); if( $projects->post_count > 0 ) { while ( $projects->have_posts() ) { $projects->the_post(); $category_classes = array(); $categories = get_the_terms( get_the_ID(), 'project_category' ); if ( $categories ) { foreach ( $categories as $category ) { $category_classes[] = 'project_category_' . urldecode( $category->slug ); $categories_included[] = $category->term_id; } } $category_classes = implode( ' ', $category_classes ); $main_post_class = sprintf( 'et_pb_portfolio_item%1$s %2$s', ( 'on' !== $fullwidth ? ' et_pb_grid_item' : '' ), $category_classes ); ?> <div id="post-<?php the_ID(); ?>" <?php post_class( $main_post_class ); ?>> <?php $thumb = ''; $width = 'on' === $fullwidth ? 1080 : 400; $width = (int) apply_filters( 'et_pb_portfolio_image_width', $width ); $height = 'on' === $fullwidth ? 9999 : 284; $height = (int) apply_filters( 'et_pb_portfolio_image_height', $height ); $classtext = 'on' === $fullwidth ? 'et_pb_post_main_image' : ''; $titletext = get_the_title(); $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' ); $thumb = $thumbnail["thumb"]; if ( '' !== $thumb ) : ?> <a href="<?php the_permalink(); ?>"> <?php if ( 'on' !== $fullwidth ) : ?> <span class="et_portfolio_image"> <?php endif; ?> <?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?> <?php if ( 'on' !== $fullwidth ) : $data_icon = '' !== $hover_icon ? sprintf( ' data-icon="%1$s"', esc_attr( et_pb_process_font_icon( $hover_icon ) ) ) : ''; printf( '<span class="et_overlay%1$s"%2$s></span>', ( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ), $data_icon ); ?> </span> <?php endif; ?> </a> <?php endif; ?> <?php if ( 'on' === $show_title ) : ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php if ( 'on' === $show_categories ) : ?> <p class="post-meta"><?php echo get_the_term_list( get_the_ID(), 'project_category', '', ', ' ); ?></p> <?php endif; ?> <div class="myexcerpt"><?php the_excerpt(); ?></div> </div><!-- .et_pb_portfolio_item --> <?php } } wp_reset_postdata(); $posts = ob_get_clean(); $categories_included = explode ( ',', $include_categories ); $terms_args = array( 'include' => $categories_included, 'orderby' => 'name', 'order' => 'ASC', ); $terms = get_terms( 'project_category', $terms_args ); $category_filters = '<ul class="clearfix">'; $category_filters .= sprintf( '<li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">%1$s</a></li>', esc_html__( 'All', 'et_builder' ) ); foreach ( $terms as $term ) { $category_filters .= sprintf( '<li class="et_pb_portfolio_filter"><a href="#" data-category-slug="%1$s">%2$s</a></li>', esc_attr( urldecode( $term->slug ) ), esc_html( $term->name ) ); } $category_filters .= '</ul>'; $class = " et_pb_module et_pb_bg_layout_{$background_layout}"; $output = sprintf( '<div%5$s class="et_pb_filterable_portfolio %1$s%4$s%6$s" data-posts-number="%7$d"%10$s> <div class="et_pb_portfolio_filters clearfix">%2$s</div><!-- .et_pb_portfolio_filters --> <div class="et_pb_portfolio_items_wrapper %8$s"> <div class="et_pb_portfolio_items">%3$s</div><!-- .et_pb_portfolio_items --> </div> %9$s </div> <!-- .et_pb_filterable_portfolio -->', ( 'on' === $fullwidth ? 'et_pb_filterable_portfolio_fullwidth' : 'et_pb_filterable_portfolio_grid clearfix' ), $category_filters, $posts, esc_attr( $class ), ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ), ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ), esc_attr( $posts_number), ('on' === $show_pagination ? '' : 'no_pagination' ), ('on' === $show_pagination ? '<div class="et_pb_portofolio_pagination"></div>' : '' ), is_rtl() ? ' data-rtl="true"' : '' ); return $output; } }
In the code above, I already added the modification to add excerpts. What I did was find this code…
<?php if ( 'on' === $show_categories ) : ?> <?php echo get_the_term_list( get_the_ID(), 'project_category', '', ', ' ); ?> <?php endif; ?>
And added this right below it…
<!-- Displaying excerpt code start here GQ --> <div class="myexcerpt"><?php echo the_excerpt(''); ?> <a href="<?php the_permalink(); ?>">Read More</a></div> <!-- Displaying excerpt code end here GQ -->
3. Next in the functions.php of your child theme, add this code.
//====================================================================== // CALL UP THE CUSTOM FILTERABLE PORTFOLIO WITH EXCERPT FILE CFWPM //====================================================================== function divi_child_theme_setup() { if ( ! class_exists('ET_Builder_Module') ) { return; } get_template_part( 'custom-modules/cfwpm' ); $cfwpm = new Custom_ET_Builder_Module_Filterable_Portfolio(); remove_shortcode( 'et_pb_filterable_portfolio' ); add_shortcode( 'et_pb_filterable_portfolio', array($cfwpm, '_shortcode_callback') ); } add_action( 'wp', 'divi_child_theme_setup', 9999 );
Now you just need to make sure your project pages have excerpts and you are good to go.
And that’s it! Have fun!
Credit: Elegant Themes – Github
Well that’s all for now. I hope you find this article useful.
Excellent tutorial, worked like a charm! Thanks Geno!
Thanks Amy 🙂
so when I add the code to my child functions.php – it breaks my site…
Hmmm… sorry to hear that. You might want to double-check the steps in the tutorial. When modifying php files, a little mistake will often break the site.
Thank you for this very detailed tutorial. I tried to use it on my divi site (www.cortinovis.de/vortraege) and did everything just as described, but nothing happens. Has anybody an idea? Thank you so much in advance! Best reagards, Tim
Hi Tim! I see a couple possible issues. One is, this is designed to work the Filterable Portfolio module, and it looks like you are using the standard Portfolio module. The second thing is there is not an active child theme, so if you made the changes in the child theme they are not functioning because it is not the active theme.
Hi Jerry, Thank you very much for your answer. I will check this out. Have a nice day and best regards, Tim
Thanks Jerry! Is there anyway to add a Read More link after the excerpt?
Sorry I meant that for Geno! Is there anyway to add a Read More link after the excerpt?
Great request. Sure it’s simple. In fact I just updated the tutorial to include a read more link. Here is the updated php line you need to add. Replace the one I had previously.
Great Tutorial Geno!
Is there a way to add custom fields and/or custom fields from Advanced Custom Fields plugin?
Probably. I just did something similar on a brand new plugin I created recently. But it took quite a bit of work customizing the module php. http://montereypremier.com/preview/DiviStaff/
Hi. How can i use this with simple portfolio, not filterable?
I have not tried that yet. I hope to revisit it soon 🙂
Great tutorial!
I used the tutorial to override the ‘ET_Builder_Module_Portfolio’ instead – I did this by copying the whole ‘ET_Builder_Module_Portfolio’ class from the parent theme and adding ‘Custom_’ before the class name, and then changing the functions snippet from ‘Custom_ET_Builder_Module_Filterable_Portfolio’ to ‘Custom_ET_Builder_Module_Portfolio’
Awesome. Thanks for sharing!!!!
Hi Robert,
I need to do this too. Could paste the code on pastebin again. Cheers..
Andy
Thanks, I used the tutorial to modify the Portfolio module, and I have pasted the code on pastebin:
http://pastebin.com/ikYFN6LV
Awesome. Thanks for sharing!!!!
Hi Robert, could you repost the code to pastebin. I need to make this modification too. Thanks
Thanks for this great tutorial — it worked perfectly! Is there a way to add additional space after “Read More” and the title of the next Project? I tried with custom CSS but no joy. Thanks!
Just discovered this great tutorial and wondered if it would be useful for creating a kind of product catalogue page, where no shop function is required, only a link to where the products (i.e. CDs and sheet music) can be purchased. Or would another Divi module (Blurb?) be better suited for that?
I think projects could be used for that purpose.
This is perfect! I’m using this to create a filterable post index through the filterable portfolio module. Worked like a charm, thank you for this!
Awesome. Glad it worked out for you 🙂
Thanks for this great tutorial.
Do you know if there is a way to let excerpt appear in visual builder too ?
My pleasure Nicolas. As for the question, unfortunately I do not.
Amazing tutorial! It worked great! Thanks!
Awesome. Thanks for letting us know!! 🙂
Great tut! works great..and the only one I found that does this. Question: Do you know how to sort a filtered portfolio alphabetically? I’ve tried ET support..it didnt work 🙁
Ignore the last comment: I found this other code to be helpful. https://github.com/kary4/divituts/wiki/Moving-Filterable-Portfolio-module-to-child-theme
Thanks again!
That would require some more php modification which I dont have handy at the moment.
Hi Geno!
First of all, thank you for ALL your work. AWESOME.
I’m trying and trying this tutorial but idk I just get a full white page everytime I try to open my website.
After removing everything (custom-modules folder and the functions.php modification), the page works fine.
Would really appreciate your help.
Thanks again!!!!
Are you using the Divi theme or the Divi Builder Plugin on another theme?
Hi Geno, thank you for your fast reply and my apologies for don’t check it up. I’m using a divi child theme I made to edit all I wanted, and the divi builder..
If you are using Divi, then you should deactivate the Divi Builder Plugin. Divi Builder is built into Divi and that might be causing the conflict.
Awesome work…appreciate your sharing. Is there a way to have the projects in descending or random order? This is being used on a website for an animal rescue volunteer group and we want the older projects listed first.
Again, thank you for sharing!!
Thanks Janice. At the moment I do not have a quick fix for that request. It would take some more modifications of the module.
Thx for Tuto good job.
I would like to modify the portfolio module To use the post ( not custom post project)
I can edit the file ET_Builder_Module_Filterable_Portfolio extends.
Do you have a tutorial, line of code?
Thx and good day
Unfortunately I do not. I have thought about that as well and may come up with something in the future.
Hi, This explains exactly what I’ve been looking for. But i don’t know why it doesn’t works. I’ve followed all steps but maybe y missed something in the way.
Even so, thank’s!!
It could be a caching issue. Have you tried clearing cache on your browser and server. Also make sure to clear any plugin cache if you have any.
Hi i have very basic php skills but can this same code work on project section
I am not sure I understand. You want to show excerpts on the actual project page?
After enabling this, on the front end, if not logged in, I can see the excerpt. However, if I try to edit the module in the cms, I can’t open the module settings. When I click on it, the divi visual builder interface disappears.
This is not written to be included in the visual editor. To have it included int he Visual Editor will require more code and modification. You can still edit the module like normal on the back-end and not using the Visual Editor.
Hi Geno
This is exacty what I need 🙂
Unfortunately, the code for functions.php i now shown on the top of my site? At the same time it caused problems with the Builder
The syntax in the function.php can be tricky. But a recent update may also be the culprit. I will update the version of Divi I am using on the demo to see if I come across the same issue.
hi geno thank you for this and all of your tutorials. it works fine bt i am struggling to change font size and color for the excerpt… i tried tweaking meta and pagination text on the divi builder and it does not seem to work… could you be so kind to point me on the right direction? thank you
Hi Robert!
It appears that the link to the code you posted has been removed. I am just wondering where in the regular portfolio class you added the show excerpt code.
You Rock!! Thanks man, this worked perfectly!
Awesome.
How can i add portfolio filters to menu or submenu item..??
Yes. Go to Menus and on the top right hand corner is the settings tab. Open it up and tick the box that says projects. Now you should have the options to add project pages and project categories.
Hi for some reason I can’t get the excerpt to show, I can echo text and get the read more button to show but not excerpt and yes I added excerpt in the project any ideas? Thanks.
HI Geno, this is just what I was looking for! Thanks! Where exactly am I putting those three lines in cfwpm.php to include the Read More Button?
The exact line number has probably changed since originally writing this.
Hi Geno
Awesome plugin – thank you. Only issue is that it doesn’t show more than the default ’10’ posts. I’ve changed that number both on the front end and within the code to no effect.
Am I missing something?
Cheers
James
Unfortunately I do not Not sure why is not changing for you. I just used this recently and it worked just fine for me and I am able to display more than 10. http://shusterhomes.com/floor-plans/
thanks for this great tutorial. anyone ever been able to get the title of the project within the grid to appear on the top of the image instead of underneath?
Thanks Steve. Great question. Hopefully someone shares an easy way to do that. Perhaps a little jquery?
AWESOME! I just got the bright idea that it would be super cool to be able to use excerpts with the filterable profile. Then I did a quick search and found your amazing code. I popped it in and like magic it worked on the first try. Thanks!
Awesome. Thanks for sharing the good news 🙂
You are the best!!!
Bless you ?
Wanted to add here that after following the directions and adding the code that some of the items randomly became un-clickable as the overlay disappeared. Did some digging into the Divi support forum and found someone mentioned this article and had to remove the code to restore overlay hyperlink functionality of each item. When I removed the code everything worked fine again.
Strange. I have not encountered that issue. Thanks for mentioning it.
Hello, I have another question. In Divi, portfolio module shows only worpdress projects with their relative categories. I would like to show pages, not projects, I have installed a wordpress plugin that assign categories to pages, but in portfolio module it doesn’t work. Is there a method to modify portfolio module to show other resources like pages, images, etc…, not only projects?
Hi Giovanni. You can create a custom post type and create a clone of the portfolio modules that connects to the custom post type instead of the project post type. That is what I did for the Divi Staff plugin. http://montereypremier.com/preview/DiviStaff/
Hey Geno, is there a way to change the type and color of the displayed excerpts? And to remove the underlining of the title?
I’m no pro at using or understanding code, though I managed to follow your tutorial and it works, so I hope that you can also help me with this 🙂 Thank you!
Hi Femke, Glad you were able to get it to work. I would have to see the actual page to determine how to modify the title. Try this CSS for changing the excerpt text color. Change the color code to what ever you need.
Hey Geno, thanks for the tutorial!
I can’t get this to work over at http://www.costadelsold.co.uk. I have added the custom modules folder and file in my child theme, but when I add the code to my functions.php it crashes the whole site. Is it interacting with some other code that I have perhaps?
Cheers,
Ryan
It is hard to determine why it would crash your site. Make sure you are posting the function after
Great tutorial, Geno!
But I need to add a custom taxonomy list instead excerpt module. Do you know how to achieve it?
Thanks in advance!
Thanks. Unfortunately I do not have that handy.
Hi,
When i add the the code to my php my first categorie brakes. Everything is working well, and it adds the excerpt. But the (i use it for products) arent clickable anymore. When i klik on a categorie everything works as intended.
Any suggestions?
I am not sure what could be causing that on your particular site. It might be conflicting with another plugin or modification elsewhere. Have you tried disabling other plugins to see if there is a conflict?
Thanks Geno – just what I was looking for.
When I first added the code it broke my site but the solution was to add the code to the ‘functions.php’ file before the closing ?> tag.. then it worked fine 🙂
Awesome. Thanks for sharing your tip.
Flawless – Thank you for a very quick solution that has a host of applications! Nice one Geno.
Is there a way to make this compatible again with Divi? At the moment it breaks the visual builder part. Thus when adding this, it works on the site, but does not generate a preview when enabling the visual builder. The rest of the code still works though. Thanks for this!
Hi, thanks for sharing this tutorial. This code is very old now but it works. But is very different from current Divi’s version of FilterablePortfolio. Is there chance to be outdate soon