Creating Filterable "Portfolios" of Posts and Custom Post Types

Divi includes a filterable portfolio module which makes it easy to display your projects, and allow your users to filter them by category. However, this requires you to use the "projects" custom post type defined by Divi. But what if you want to display some other post type? This post explains how.

Over the past few days I've received several variants on this question. Some people want to know how to display regular blog posts in the same style as a filterable portfolio, with the posts able to be sorted by category. Others want to know how to display some other custom post type.

Fortunately the answer is the same in each case.

Display Posts & CPTs in a Filterable Portfolio using Portfolio Posts Pro

The Portfolio Posts Pro plugin from Divi Plugins is designed for exactly this.

It adds three modules to Divi Builder, each of which extends the standard portfolio with the ability to handle posts and custom post types. These modules are:

  • DP Blog Portfolio – Like the built-in portfolio module, but with support for posts and custom post types
  • DP Filterable Blog – Like the filterable portfolio module, it adds support for posts and custom posts. It also includes a category filter
  • DP Fullwidth Blog – Like the built-in fullwidth portfolio module, but again with support for the other post types

Once installed, you can use these modules as you would any other Divi Builder module.

Step 1: Select the module from the module list

To use the modules, simply add a module via Divi Builder as you normally would. For example, above you can see the two modules added to standard sections (the other is added to fullwidth sections). Click on the module you want to add. In this example, I'm going to use the DP Filterable Blog so that the posts / custom post types displayed have a category filter above them.

Step 2: Configure the module's settings

The module settings should for the most part look familiar, if you've used the portfolio modules before. The main addition is the "Post Types" option, which lets you choose which post types will be included in the portfolio. The possible values include "post" for regular blog posts, "project" for the Divi-defined projects post type (i.e. the normal default for portfolio modules), as well as any other custom post types defined on your site (by plugins, etc). Here, for example, I have the "Product" custom post type. You can choose any combination of post types.

Also useful is the regular "Include Categories" option, which allows you to include only certain categories, and dictates the categories added in the portfolio's filter.

When you're happy with your choices, save the settings.

Step 3: View your portfolio

That's all there is to it. You can now go ahead and view your portfolio. I should look something like the above.

Display Posts & CPTs in a Filterable Portfolio using Divi FilterGrid

Divi FilterGrid (also from Divi Plugins) represents the next evolution of Portfolio Posts Pro. While similar to Portfolio Posts Pro, it offers more features and better control over the filters. The filters are independent from the query and you can select multiple combinations of custom post types, taxonomies and terms. It includes support for multiple custom taxonomies, something which is not available in Portfolio Posts Pro.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

9 Comments

  1. I have manually created a new custom post type through functions.php.

    I want to be able to filter according to any of the taxonomies for this custom post type. Right now I can only choose a certain category, I want to be able to choose according to a different taxonomy (in my case I have yoga classes that need to be sorted by theme, duration, etc.).

    Can you do that with this plugin?

    Reply
    • Hey Mijael, I don't have a copy to hand at the moment to test it myself, but reading through the information on the Divi Plugins site, I don't believe it's possible. In response to a similar request, the plugin's author, Brad, replied:

      "I think you’ll probably need our latest plugin to achieve what you’re trying to do:
      https://diviplugins.com/downloads/divi-filtergrid/

      This plugin is similar to Portfolio Posts Pro but with more features and better control over the filters. The filters are independent from the query and you can select multiple combinations of custom post types, taxonomies and terms."

      I don't see any newer information on the site, or in the plugin changelog, that would suggest otherwise. So I believe Divi Filtergrid would be the plugin for this job.

      I hope that helps!

      Reply
      • I've just had confirmation from Brad at Divi Plugins that what I've said above is accurate: support for multiple custom taxonomies is not available in Portfolio Posts Pro, but is available in Divi FilterGrid.

        Reply
  2. How did you get the "product" post type? I know you used custom post types but exactly HOW does that work?

    Reply
    • Hey Randy, the Product post type in this case is added by Woocommerce (the popular ecommerce plugin). Lots of plugins add their own custom post types (for example, LearnDash adds custom post types for Courses, Lessons, etc). You can also create custom post types of your own with a plugin such as Pods, or do it using PHP code (as per the example in this post). I hope that helps!

      Reply
  3. Thanks for letting us know. But, is there any free Divi module that does the same work?

    Reply
    • Hi Nirmal, I'm not aware of any at the moment, I'm afraid. I'll keep a lookout though…

      Reply
    • All Divi Modules are licensed GNU GPL – read the licenses it is a must and that means you are free to modify. to copy, to share and even to resell the same plugin or your derivate plugin for Free or for a fee as long as you keep up with all conditions of the GNU GPL v.2+ or v.3 license (depends what license the original plugin has.
      This again means check Github and other source code places as well as with your friends or agencies wh already have that plugin.

      Ethics: perhaps you will stumble here an than about people coming up with ethics etc when you simply do what GNU GPL allows you to do! Don't worry to much as most developers and agencies are reusing already tons of code and code structures and designs in their own plugins and themes. Most of them not even mention those they have taken the code from nor do they pay them back. Just remind those who come up with ethics to simply do it like i.e. DIVI and even WordPress Does – they list ALL people who have been involved in creating their code.

      Happy copy, modify, share and resell and hopefully you will make your new creations available for others to to simply pay back to them and of course list all those who contributed to the code even their license might be MIT, or any other GNU GPL compliant license.

      Reply
      • Thanks for the comment, Andi. It's much appreciated and what you're saying aligns with my (admittedly limited) understanding. One thing that's worth mentioning is that there can still be value in paying for GPL licensed code such as Divi, since you get an assurance that the code hasn't been adversely modified (e.g. no malicious code has been inserted to backdoor your site), access to updates and/or support, and help support further development of the project. Thanks again!

        Reply

Submit a Comment

Your email address will not be published.