Changing the Portfolio Module Project Order

|

The Divi Theme includes several portfolio modules which can be used to display "projects". While Divi gives you some control over which projects are displayed, such as selecting which category is displayed, it doesn't currently provide a way to control the order in which projects are displayed. Here's how to change the order of the portfolio module projects.

To change the order of projects in Divi's Portfolio Module:

  1. Use Divi Booster to add "Project Order" option under Module Settings > Design > Layout.
  2. Choose "Default", "Random", "Reverse", "By ID" order.
  3. Input custom "Project IDs" if needed.
  4. Alternatively, use PHP action hooks to adjust order directly in code.

Method 1: Changing the Portfolio Project Order with Divi Booster

My Divi Booster plugin adds an option to change the order of projects in portfolio modules.

With Divi Booster installed and activated, you'll find the new option in the settings for any Portfolio Module, at:

Portfolio Module Settings > Design > Layout > Project Order

It includes the following options:

  • Default – The default Divi project ordering (newest first)
  • Random – Randomize the order of projects each time the portfolio module is displayed
  • Reverse – Display the projects in reverse order (oldest first)
  • By ID – Display the specified projects, in the order given. When this is selected, a new "Project IDs" field will be added after the "Project Order" option. The IDs of the projects to be displayed should be entered in this field, separated by commas.

The setting is added to the filterable and full-width Portfolio Modules, as well as the standard Portfolio Module. Note that the modified order isn't previewable in the visual builder, but will take effect when the module is viewed on the front-end. 

Important: if you are using the "Random" order you may need to add an exclusion for the page containing your Portfolio in the settings of any caching products you use to ensure that the order is refreshed each time (rather than when the cache expires). A compromise is to set a low cache expiry time (e.g. 1 hour) so that the order is refreshed periodically while retaining much of the benefit of caching.

Ordering the Portfolio by ID

To make the portfolio display a specific set of projects, in the order you want:

  1. Set "Portfolio Settings > Design > Layout > Project Order" to "By ID"
  2. A new "Project IDs" setting will appear below the "Project Order" setting
  3. Enter the IDs of the projects you wish to display, separated by commas, in the order you wish them to display. (NB: The next section explains how to locate the project ID).

Your Portfolio Settings should look something like this:

The Project IDs field now also supports Dynamic Content, so you can set the Project IDs, for example, from custom fields. Added in Divi Booster v3.7.5.

Locating the Project ID

To locate the ID for a project, go to the edit screen for the project. You should see the ID given in the address bar, like so:

If you are editing the project in the front-end visual builder, you can instead hover over the "Edit Project" link in the admin bar to see the project ID in the link URL displayed at the bottom of the browser window, like so:
In both the above examples, the project ID is "12".

Using Custom Project IDs

If you want to give your projects custom IDs, and use these in the "Project IDs" field, this post explains how to make your custom IDs work in the Project IDs field.

Method 2: Changing the Portfolio Project Order with PHP

Divi doesn't currently provide us with a direct way to specify the ordering of "project" posts when they are retrieved from the database for use by the portfolio module. This section shows how to create an "action hook" which will let us run code at just the right place to do so. With the hook in place, it will be easy to modify the project order.

Internally, Divi layouts are represented using shortcodes, with one shortcode per module. When Divi displays a portfolio module, the following things happen, in order:

  • Divi retrieves the portfolio's configuration from its shortcode
  • Any user code attached to the "et_pb_module_shortcode_attributes" filter is run, potentially modifying the configuration
  • Divi tells WP_Query, WordPress's post loader class, which posts (or "projects") it wants
  • WP_Query runs any user code attached to the "pre_get_posts" action hook
  • WP_Query retrieves the requested projects from the database and returns them to the portfolio
  • The module uses the returned projects to generate the HTML code for the portfolio
  • Any user code attached to the "et_module_shortcode_output" filter is run, potentially modifying the HTML output

The details of this aren't too important, so don't worry if the above has you confused.

All we really need to know is that we can do two things:

  1. We can run code at the beginning and end of the generation of the portfolio module (using the "et_pb_module_shortcode_attributes" and "et_module_shortcode_output" filters). This will let us target code specifically to the portfolio module, preventing other parts of the site from being affected.
  2. We can run code just before the projects are retrieved (using the "pre_get_posts" action). This will let us modify the request for the posts adding, for example, details on the order we'd like the results in. In this way, we can change the order from the default.

These two things combined give us a way to modify the order of the "project" posts retrieved by the portfolio module, without affecting other parts of the site.

To make our code easy to reuse, we'll first create a new action hook, which we'll call "pre_get_portfolio_projects". Similar to "pre_get_posts", it will let us run code just before the "project" posts are retrieved, and thus change their order. But it will do so only within the portfolio module.

Here's the PHP code for the new action hook:

/* === Run an action hook ("pre_get_portfolio_projects") when the portfolio module gets projects via WP_Query === */

add_filter('et_pb_module_shortcode_attributes', 'add_pre_get_portfolio_projects', 10, 3);
add_filter('et_pb_portfolio_shortcode_output', 'remove_pre_get_portfolio_projects');

function add_pre_get_portfolio_projects($props, $atts, $slug) {
	
	// Do nothing if this module isn't a portfolio
	$portfolio_module_slugs = array('et_pb_portfolio', 'et_pb_filterable_portfolio', 'et_pb_fullwidth_portfolio');
	if (!in_array($slug, $portfolio_module_slugs)) {
		return $props;
	}
	
	// Add an action to run during pre_get_posts on portfolio modules only
	add_action('pre_get_posts', 'do_portfolio_pre_get_posts');

	return $props;
}

function do_portfolio_pre_get_posts($query) {
		
	do_action('pre_get_portfolio_projects', $query);
}

function remove_pre_get_portfolio_projects($content) {
	
	remove_action('pre_get_posts', 'do_portfolio_pre_get_posts');
	
	return $content;
}

Randomizing the Projects

With our new "pre_get_portfolio_projects" hook in place, we can easily randomize the order of the retrieved "project" posts.

Like the "pre_get_posts" hook, any function we attach to our "pre_get_portfolio_projects" hook is passed a "query" object as its first argument. The query object tells WP_Query which posts to return and in which order, and by modifying the query object we can change the order of the returned posts.

Specifically, we can set the order on the portfolio "project" posts to random with the following PHP code:

/* === Randomize the portfolio module projects === */

add_action('pre_get_portfolio_projects', 'randomize_portfolio_module_projects');

function randomize_portfolio_module_projects($query) {	

	$query->set('orderby', 'rand');
}

Sorting the Projects by ID

Again, after adding the "pre_get_portfolio_projects" hook from above, we can sort the projects by ID, using the following code. Just replace the IDs in this example with those of your own projects.

/* === Sort the portfolio module projects by ID === */

add_action('pre_get_portfolio_projects', 'set_portfolio_module_projects_by_id');

function set_portfolio_module_projects_by_id($query) {	
	$ids = array(123, 211, 354, 181); // Example - replace with your own ids
	$query->set('post__in', $ids);
	$query->set('orderby', 'post__in');
}

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

44 Comments

  1. Hi Dan,
    While both options above work to get the portfolio projects to appear in a certain order in the portfolio project module on the home page, the projects themselves still appear in their original order. As I want people to be able to use previous and next buttons to move between the pages, I would like the order to match the visuals on the home page. Any idea how to make this happen?
    Thanks for your help!

    Reply
    • Hi Shari, I think you should be able to do this using a plugin such as Post Types Order which allows you to reorder posts (and custom post types, like Divi's projects) by drag-and-drop in the WordPress admin.

      After you install and activate the plugin, you can go to the "Projects > Re-Order" section in your WordPress admin, and just drag and drop to change the order of your portfolio projects.

      Note, though, that reordering the projects in this way will also potentially affect the order in which they appear in the portfolio module itself – so be sure to check that it is still ordered the way you want.

      I hope that helps!
      Dan

      Reply
      • Perfect! Thank you.

        Reply
        • You're very welcome, shari :)

          Reply
  2. I'd like to change the default category to one of my own for my projects instead of all. Is there a way to do this?

    I'd be grateful for any help.

    Reply
  3. Hi Dan,

    The list of Project IDs option does not appear to be working.

    Should it be possible to use a single project ID and a post count of 1 in the Content settings to show a single specific project?

    This should be showing the Hilton project shown above it, but it does not… It's just showing the first/ most recent project overall. If I set a category, it shows the first in that category, so it seem the Project IDs option is no longer working.

    https://capture.dropbox.com/rso10a16CExGe0ui

    Also, should the Dynamic Content option allow you to pick a project? Projects do not seem to appear in the Dynamic Content drop-down.

    https://capture.dropbox.com/JO0SB8GwfVvk3hoN

    -Michael

    Reply
    • Hey Michael, it should be possible to show a single project in this way. I've just checked on one of my test sites and it's working correctly there. However… the feature only takes effect on the front-end. In the visual builder it will just display the latest project, similar to what you're describing. Your screenshot seems to be showing the visual builder – do you see the same thing if you save the page and view it on the front-end (after clearing any caches)?

      The dynamic content support currently just enables the standard Divi dynamic content fields, which doesn't include a list of projects. The original intention in adding dynamic content support to the field was to allow the list of project IDs to be set / updated from a custom field. I haven't personally looked at adding projects to the dynamic content field, but I'll try to do so in the future. If I'm able to do so, I'll update here.

      Reply
      • Hi Dan. Ah. Okay. Thanks for clarifying. I had not checked the front end as yet at that point. Sorry. It looks like it is working in the Preview and a Public Draft. It might be worth noting that in the Help text for that feature, so that's more obvious.

        Yes, a Dynamic Content Project picker at some point would be great. I guess it would only work for single projects though—not sure how it would/could for multiples.

        Reply
        • You're welcome, Michael. Thanks for the update. I've added this to the help text for the next version (v3.9.0) and have made a note in the post above too.

          The closest thing currently in Divi that I can think of is the Theme Builder menu for assigning templates to posts, etc. It allows the selection of multiple items (projects, etc) via checkbox system. I think replicating or repurposing it would probably be a decent-sized piece of work but I can see it would be useful here (and possibly elsewhere). I'd like to tackle it at some point, and if I ever manage to, I'll update here :)

          Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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