Creating Filterable "Portfolios" of Posts and Custom Post Types

Creating Filterable "Portfolios" of Posts and Custom Post Types

Display your posts (and custom post types) in a filterable portfolio.

The Divi Theme's filterable portfolio module 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.

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.

6 Comments

  1. 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
  2. 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. Required fields are marked *

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

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

6 Comments

  1. 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
  2. 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. Required fields are marked *