Change The Order Of Any Post Type In The Divi Blog Module
By default, the Divi Blog modules shows blog posts in chronological order based on the date the post was published, with the most recent post first. But sometimes there is a need to use the Divi Blog module to display posts, pages, projects, products, events, or any other custom post type. Most of those are not dependent on the publish date like blog posts, and because of that there may be a need to change the order to something else. In this tutorial, I am going to provide a code snippet which will sort posts, pages, or custom posts types in alphabetical order in the Divi Blog module. I hope you enjoy!
Be sure watch the video to see this in action! As a reminder, we have hundreds of other Divi tutorials, including an entire Divi Blog module series. You’ll find everything you need and didn’t know you needed there, and if you have any suggestions for new blog related tutorials let me know!
▶️ Please watch the video above to get all the exciting details! 👆
To change the default order of the Divi Blog module items, we need to override the existing code. We can do this by adding some PHP code to your Divi website.
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.
//change the order of posts/pages/cpt in the Divi Blog module
add_action('pre_get_posts', 'pa_change_all_pages_order');
function pa_change_all_pages_order($query) {
// Apply to all main queries on the front-end, except the admin panel
if (!is_admin() && $query->is_main_query()) {
// Set the post order by title in ascending order
$query->set('orderby', 'title');
$query->set('order', 'ASC');
}
$pac = get_query_var( 'post_type' );
if ( 'post' == $pac )
{
$query->set('orderby', 'title');
$query->set('order', 'ASC');
}
}
Once you paste the code into your functions.php file, make sure to save the file and then go look at the results. Your Divi Blog module will show the items in alphabetical order from A to Z.
NOTE: After adding the code, please be sure to clear your Divi Static CSS cache so that the code can take effect properly.
Other Post Types
The Divi Blog module has the option to show any post type. This means you can display a grid of pages, posts, projects, products, events, or any other custom post type that you have on your site.
In order to use anything other than the default blog posts, you will need to make a small edit to the snippet. All you have to do is change the “post” to match the post type that you are using. For example, for pages it would simply be “page” or for projects it would simply be “projects.”
Reverse The Order
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.
Thank you. I can’t get it to work in the theme builder, do you have an idea about that?
Hi Tonny!
I would suggest you to contact the Elegant themes support to check the issue remotely. The conflict could be with the theme builder.
Hi, I asked them, They will not help with this. They just asked me to contact Codeable or WP Buffs…
Hello, and thank you for this helpful code. I’m wondering why it only seems to work when the module is placed on an individual page, but not in the theme builder. I really need this feature on archive pages. Is there anything I can do to make this work?
Hey Marsha,
We haven’t tried this on our end but will do and get back on this.