Changing the Portfolio Module Project Order

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

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.

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
  • Random – Randomize the order of projects each time the portfolio module is displayed
  • Reverse – Display the projects in reverse order
  • 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.

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:

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".

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');
}

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

26 Comments

  1. Hi Dan,

    I am a proud owner of Divi Booster for a good few years now.

    In Portfolio Module Settings > Design > Layout

    I am not given the "Project Order" options?

    Any ideas what is happening?

    Thanks
    Matt

    Reply
    • Hey Matt, I've just sent a reply to your contact form message. I'm not quite sure why this is happening (it's working on my test sites), but hopefully we can track down the issue. Cheers!

      Reply
  2. Thank you for continuing to work on DiviBooster, as it CONTINUALLY makes my Divi sites better.
    Best regards. Thanks again!

    Reply
    • You're very welcome! I'm really pleased that the plugin is helping you out, Carol!

      Reply
  3. I'm sorry, I am still not understanding how to do this exactly. Do you have a video that explains this more clearly? I just want to be able to adjust the order of the portfolios. Should be simple… but it is not (at least from how I am reading it). Thank you, love your plugin other than this!

    Reply
    • Hi Brenda, I don't have a video, but I've just updated the post with sections on "Ordering the Portfolio by ID" and "Locating the Project ID" which walk through the steps to adjust the order of the projects in the portfolios. I hope it helps, but please let me know if you aren't able to get it working. Thanks!

      Reply
  4. Hi there, I have divi booster version 3.1 and I'm trying to Change the Portfolio Project Order. I've gone to Modules>Portfolio, but do not see 'Design > Layout > Project Order'. What am I missing?

    Reply
    • Hi Joanne, I've checked my test sites and the feature is still showing / working there. I've updated the post (and emailed you) with a screenshot showing the location – hopefully that clarifies things. If you still can't see it, perhaps I'd be able to login and take a look for you? If so, you can send the login details in reply to my email, or via the contact form linked in the header. Thanks!

      Reply
      • Hi dan

        Where I can find the projest Id ?

        Note: I'm afraid to be a newbie !!

        Thanks

        Reply
        • Hi Hugues, I've just added a section to the post above called "Locating the Project ID", which will hopefully help you out. Please let me know if anything isn't clear though. Thanks!

          Reply
  5. So I was in a Elegant Themes chat telling them I want to control the order that my portfolio projects are arranged and they told me to buy DiviBooster which I just did. Either they were wrong or I'm missing something. I see that Default, Random, or reversed are the only options. I can see the value in DiViBooster so I have no regrets having purchased it but I still have the dilemma arranging the projects in the order that my customer is requesting. Can anyone offer an insight?

    Thanks

    Reply
    • Hi Jim, you weren't missing anything – the three options you were seeing were the ones supported by Divi Booster. But… I've just added an additional option, which allows you to specify a list of project IDs (as a comma-separated list) and these will be the ones displayed (in the order specified in your list). The option is available from Divi Booster 2.9.8 onwards. If you go to "Portfolio Settings > Design > Layout > Project Order" and select "By Id" a "Project IDs" box will appear just below that option. Put in your IDs here, e.g. "100,120,11" to show the project with id 100 first, followed by those with ids 120 and 11. I hope that makes sense, but let me know if you have any questions about it. Thanks!

      Reply
      • Thank Dan – you are a god, just needed this today

        Reply
        • Glad it helped, Bart 🙂

          Reply
      • I was exactly looking for that comment!
        Thank you!

        Reply
        • You're very welcome, Júlia!

          Reply
  6. You are an angel for sharing knowledge and talent. It worked perfectly! Thank you!

    Reply
    • You’re welcome, Stephanie 🙂

      Reply
  7. Hello Dan,

    I have a question about the random funcion on the portfolio module. Is it possible for the random function to pick 4 projects from the whole portfolio?

    Right now I see it randomizes the last 4 projects (i'm using just 4 because I want this module to be the "related projects".)

    The thing is the module shows only the 4 recents… and i want to randomize from all the projects.

    Is this possible?

    Reply
    • Hey Jeff, odd… I'm seeing it pick from the whole portfolio on my test sites. Is there any chance you're able to send me a link to the page you're working on so that I can take a look at what's going on? Thanks!

      Reply
  8. I'm with Benjamin on this one. Reverse option would be so helpful. Looking forward to 2.8.8 release. Cheers!

    Reply
    • Hey Sterling, I've just released Divi Booster 2.8.8. Hope it helps!

      Reply
  9. Hi there,

    Just bought your awesome plugin, I used many of your tutorials allready but I came to a point in wich buying the plugin instead of coding myself was the cheaper solution, so many thanks for the good work! I was wondering why there is no option to get the post from old to new? The default setting is new to old and with your plugin, random. But I need the old to new order, could you implement that in the plugin :)? Many thanks, again ;)!

    Benjamin

    Reply
    • Hey Benjamin, I implemented the "random" option in response to a user request and released it once done. I then got caught up in other work before I could add additional options… But I've just now added a "reverse" option to the next version of Divi Booster (2.8.8), which orders the posts from old to new and I think should do what you need. I hope to have the update out at the start of next week. I hope it helps! 🙂

      Reply
      • Dan, you are absolutely amazing! It's a rare treat to have such a "hands on" support and implementation of requests. You're the bomb, many thanks again! Keep it up!

        Reply
        • Ha ha, you're very welcome, Benjamin! It's not always easy or possible to deal with all the requests I receive, but I'll keep trying my best! Obviously, give me a shout if there's anything else I might be able to help with. Thanks!

          Reply

Submit a Comment

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