How to Sort Posts Alphabetically in Divi Blog Module

In the Divi blog module, posts are displayed in chronological order by default. Unfortunately, there isn’t a built-in option to change the order to another sorting method, such as alphabetical order.

In some cases, sorting blog posts alphabetically can enhance the user experience by making content easier to navigate and locate. By organizing posts in a clear, sequential manner, readers can quickly find articles based on their titles, allowing for a more streamlined and efficient browsing experience.

So, if you want to sort blog posts alphabetically, whether it’s on a specific page, multiple pages of your choice, or the entire website, this guide will provide you with a detailed tutorial to help you achieve just that. Let’s get started!

Sorting Posts Alphabetically in Divi Blog Module

Since we’re steering clear of plugins, another method you can use is integrating custom code into your Divi website. In this tutorial, we will provide you with two custom code options to choose from, giving you more control over where you want to apply alphabetical sorting for the blog module.

Sorting Posts Alphabetically on All Pages

The first custom code will allow you to change the default chronological order of blog posts to Alphabetical order on your entire website. This means, that every page that uses the blog posts module and uses ‘post’ as the post type will be affected and will have its order changed to alphabetical one. Below is the code for that.

add_action('pre_get_posts', 'wpp_blog_order');
function wpp_blog_order($query) {
    $wpp = get_query_var( 'post_type' );

    //change the value to match your blog module post type
    $type = "post";
    
    if ($wpp == $type){
        $query->set('orderby', 'title');
        $query->set('order', 'ASC');
    }
}

Make sure to match the post type you are using in your blog module. If you’re using a page, media, project, or custom post type for the blog module, change the value of the $type variable in the code above to match it.

    //change the value to match your blog module post type
    $type = "yourcustomposttype";

Sort Posts Alphabetically on Selected Pages

The second custom code will allow you to sort posts alphabetically on selected pages. With this code, you have more control over which pages will be affected, allowing you to apply alphabetical sorting selectively.

Get the Page ID

However, before we get to the code, we need to obtain the IDs of the pages where you want the blog module to be sorted alphabetically. To find the page ID, go to All Pages from the WordPress dashboard and search for the page you want to include. The page ID will be displayed as the value of the “post” variable when you hover over the Edit option to see the link preview.

Or, you can click it and copy the ID from the address bar in your browser.

Get the Code Ready

Once you’ve got all the page IDs you need, it’s time to add them to the custom code. Add them in the $thepage variable inside the round brackets as array values. In the following code, we are using the page IDs “330”, “331”, and “109”. Replace these with your own page IDs, and add more if needed. Or, just add a single value if you want to sort the blog post on a particular page.

//sort the blog module alphabetically on selected pages 
add_action('pre_get_posts', 'wpp_blog_order');
function wpp_blog_order($query) {
    $post = get_post();
    $pageid = $post->ID; 
    $wpb = get_query_var( 'post_type' );
    
    //add your page IDs inside the array
    $thepages= array(
        "330", "331", "109",
    );
    //change the value to match your blog module post type
    $type="yourcustomposttype";

    if (in_array($pageid, $thepages) && $wpb == $type){
        $query->set('orderby', 'title');
        $query->set('order', 'ASC');
    }
}

This code snippet enables you to effortlessly sort blog posts on designated pages according to your preference.

If you’re utilizing a page, media, project, or custom post type for the blog module, kindly adjust the value of the $type variable in the provided code to correspond with it.

    //change the value to match your blog module post type
    $type="yourcustomposttype";

Integrating the Code

Now that your code is prepared, it’s time to integrate it into your website. For optimal safety and stability, it’s recommended to employ secure methods such as utilizing a child theme or creating a custom plugin. These approaches ensure that your modifications are preserved even through theme updates, reducing the risk of potential conflicts or loss of customization.

If you opt to utilize a child theme, you can access the functions.php file by navigating to Appearance → Theme File Editor from the WordPress admin dashboard. From there, simply copy the custom code and paste it at the bottom of the file within the editor.

Once you’ve pasted the custom code into the functions.php file of your child theme, don’t forget to save the file by clicking the Update File button. After saving, reload the page containing the Divi blog module to ensure that your changes take effect.

By now, depending on the code you’ve chosen, you’ll either have all your blog posts across your website sorted alphabetically, or specifically on selected pages. This enhances the organization of your content, making it easier for visitors to navigate and find the information they’re looking for.

The Bottom Line

In conclusion, while the Divi blog module defaults to displaying posts chronologically, this guide has demonstrated how to overcome its limitations by implementing alphabetical sorting. Whether you aim to sort posts on specific pages, multiple pages, or across your entire website, the step-by-step tutorial provided here empowers you to customize your Divi blog module to suit your needs seamlessly.