Alphabetical Or Random Sorting Options
By default, the Divi Portfolio module shows projects in chronological order based on the date the project was published, with the most recent project first. But this is not useful in most cases, and it would be better to have other sorting options. So in this tutorial, I am going to show you how to change the order of projects in the Divi Portfolio and Filter Portfolio modules by using a PHP code snippet. With this guide you will be able to sort the items in alphabetical order, reverse-alphabetical order, and random order.
▶️ Please watch the video above to get all the exciting details! 👆
Add A PHP Code Snippet
The tutorial only requires one simple step, which involves pasting the PHP code snippet below into your website. There are a number of locations to add this, and it will totally depend on your website and experience.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
PHP Snippet - Order Alphabetically By Title - Code For Divi 4
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) {
$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_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;
}
//order projects by title
add_action('pre_get_portfolio_projects', 'pa_change_portfolio_module_order');
function pa_change_portfolio_module_order($query) {
$query->set('orderby', 'title');
$query->set('order', 'ASC');
}Code For Divi 5
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) {
$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_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;
}
//order projects by title
add_action('pre_get_posts', 'pa_divi_5_portfolio_order');
function pa_divi_5_portfolio_order($query) {
if (!is_admin() && $query->is_main_query() === false && $query->get('post_type') === 'project') {
$query->set('orderby', 'title');
$query->set('order', 'ASC');
}
}
Reverse The Order Z-A
If for some reason you want to show the items in the opposite order, you can edit the “ASC” in the code snippet. Simply replace the ASC with DESC the the items will show from Z to A.
Change Order To Random
You can also show the projects in Portfolio module in random order. For that, we will use the main part of the first snippet and only change the last part following the comment //order projects by title. So to make the order random, paste the above snippet, then remove the part after the // comment. In its place, paste the snippet below. Please watch the video above to see this in action, as it is important to get it correct.
Replacement PHP Snippet - Order Randomly
//order projects randomly
add_action('pre_get_portfolio_projects','pa_random_portfolio_module_order');
function pa_random_portfolio_module_order($query) {
$query->set('orderby', 'rand');
}
Hi! I’m searching to fix an issue with this module. I want to have a chronological order in the “menu” of the module.
All my projects are well-named, the publication dates are ok (june 26 after the others) and the result is however june 26 at the end.
Can you help me ?
Hi there!
It seems you’re referring to the title tabs in filterable portfolio module. I’m afraid that Divi sorts the portfolio filter categories alphabetically by default, which is why your ‘June’ projects are appearing at the end of the list.
Is there anyway to just apply this custom ordering to a specific portfolio module with a certain css class and not across the entire site?
Hi John!
Please try adding the following code:
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) {
$portfolio_module_slugs = array(‘et_pb_portfolio’, ‘et_pb_filterable_portfolio’, ‘et_pb_fullwidth_portfolio’);
if (!in_array($slug, $portfolio_module_slugs)) {
return $props;
}
if (isset($atts[‘module_class’]) && strpos($atts[‘module_class’], ‘custom-portfolio-order’) !== false) {
add_action(‘pre_get_posts’, ‘do_portfolio_pre_get_posts’);
add_filter(‘pre_get_portfolio_projects_run’, ‘__return_true’);
}
return $props;
}
function do_portfolio_pre_get_posts($query) {
if (apply_filters(‘pre_get_portfolio_projects_run’, false)) {
do_action(‘pre_get_portfolio_projects’, $query);
}
}
function remove_pre_get_portfolio_projects($content) {
remove_action(‘pre_get_posts’, ‘do_portfolio_pre_get_posts’);
remove_filter(‘pre_get_portfolio_projects_run’, ‘__return_true’);
return $content;
}
add_action(‘pre_get_portfolio_projects’, ‘pa_change_portfolio_module_order’);
function pa_change_portfolio_module_order($query) {
$query->set(‘orderby’, ‘title’);
$query->set(‘order’, ‘ASC’);
}
In your Divi Portfolio Module, go to the Advanced > CSS ID & Classes section and add this to the CSS Class field: custom-portfolio-order
Hope it helps!
vbnet
Copy
Edit
Thank you that worked! Note to anyone copying and pasting the code: the singe quotes came trough as “curly” quotes and gave me php error – I used AI tool to convert all the curly quotes to standard quotes and it worked. I’d love to see this code with an additional CSS class for random as well. 🙂
This code worked great for the portfolio module, however, it broke the default ordering in my image gallery module. Any way to have this code only target the portfolio module? Thanks!
Hi Adam!
Can you please try adding the code as well:
add_action(‘pre_get_portfolio_projects’, ‘pa_change_portfolio_module_order’);
function pa_change_portfolio_module_order($query) {
if (!is_admin() && $query->is_main_query() && $query->get(‘post_type’) === ‘project’) {
$query->set(‘orderby’, ‘rand’);
}
}
Hope it helps!
Hi Thanks for the code;
Does this work with Divi 5?
Hi Paul,
Divi 5 is not available yet, so we wouldn’t have that answer, but since this is using PHP in the backend, I don’t see why it would not.
Hi Paul!
The code should work fine in Divi 5. However, can you share more details about the concern?
Thanks, Nelson
I saw: add_filter(‘et_pb_module_shortcode_attributes’, in the code which refers to shortcodes which I think Divi 5 is all about removing.
Hi Nelson,
Thanks for all your help! Unfortunately, this is not working for me. I am pasting your php code in a child theme directly under this code for the no-image crop from this tutorial. https://www.peeayecreative.com/how-to-stop-divi-image-crop/ Do I need to create a new child theme to host this code? Does it matter that it’s a filterable portfolio? Otherwise, I’ll try code snippets. Thanks!
Hi Elma,
It’s difficult to know why it is not working. You can feel free to use a snippets plugin. You can only have one child theme active at a time, so it’s not about that.
Nelson – You are the most helpful guy!!
is there a way to make sure numbered lists display from 1 to 9 not 1, 10, 11 etc..?
Thanks heaps
Phil
Hi Phil,
I don’t know what you mean. Is this related to our tutorial somehow?
I was able to address this issue if you are interested. Thanks for getting me on the right track and getting back to me. I tried copying all the code in here but the system didn’t allow it.
Cheers
Phil
If it is something to improve the code in the tutorial, sure I would be happy to hear about that. You can send us a message with the code: https://peeayecreative.com/contact/
Yup, I implemented the code, each portfolio post has a number before the Text.. I need the numbers to be sequential. currently it is showing 1 then 10 then 11 then 12 etc. see link for page I have implemented it on. https://pataka.ac.nz/52-weeks/
I really don’t know, sorry.
Hi, I am so very grateful for all your advice – I watch your videos all the time!
I did all the above (with Code Snippets plug-in); however, it doesn’t appear to be working for me. Is it possible, that the code must be worded in German in our case (based in Germany) or what could be the issue?
Thanks a million!
Hi Simone!
The language should not cause any issue. Remote access to the website is needed to check whether there is some conflict happening with the PHP code. Please contact the Elegant themes support and ask them to check the function.php file remotely.
Hi, I used this – and it worked for the projects, but then we realized it was reordering the entire website and causing all sorts of problems. Has anyone else experienced this?
Hi Caroline!
Please note that the code will re order the projects and will reflect on all the portfolio modules. Please share some more details if you’re getting any other issue.
This is great! I really value all your trips. I’m looking to make use this, but I’m looking to make something Alpha order by Last name but the titles of the projects are First then Last name. So want is ordered Barney, but the title is Roger Barney.
I could make a custom field with the last name (say the field name is “1lastn” )- but I’m trying to figure out how to change this:
$query->set(‘orderby’, ‘title’);
$query->set(‘order’, ‘ASC’);
Could you help me?
Hi Caroline!
I’m afraid changing the order of the projects by last name is out of scope of this guide. However, we will look further into it.
For now, please contact the Elegant themes support for an alternative.
Hi Nelson,
once again you just read my mind (or my to do list) 😉
Is there also a way to order projects by category (even if there are different categories like year (numbers) and text)?
I want to order it by year (which is party of my categories) in a descending order.
Any ideas?
Thanks a lot, I’m loving your plugins and your blog articles – your newsletter is the one I really read amongst all the others I just skip 🙂
Hey Heike,
We understood your query and will definitely look into the matter and see what’s best we can do.
Thanks for this!
You’re welcome, glad you like it!