WordPress Divi blog grid layout

Code for creating grid layouts in Divi blog.

The Divi theme is a popular WordPress theme that allows you to create stunning websites with ease. One of its features is the ability to create a blog grid layout, which displays your blog posts in a grid format. This layout is great for showcasing multiple blog posts on a single page in an organized and visually appealing way.

To achieve a blog grid layout in Divi, you can use a combination of the Divi Builder and custom CSS. Here’s an example code snippet that you can use as a starting point:

function wpsnippets_divi_blog_grid_layout() {
    ob_start();
    if ( have_posts() ) {
        echo '<div class="blog-grid">';
        while ( have_posts() ) {
            the_post();
            echo '<div class="blog-post">';
            echo '<h2>' . get_the_title() . '</h2>';
            echo '<div class="blog-content">' . get_the_content() . '</div>';
            echo '</div>';
        }
        echo '</div>';
    }
    return ob_get_clean();
}
add_shortcode( 'divi_blog_grid', 'wpsnippets_divi_blog_grid_layout' );

This code snippet defines a custom shortcode [divi_blog_grid] that you can use in your Divi Builder to display the blog grid layout. It uses the ob_start() and ob_get_clean() functions to capture the output generated by the loop and return it as a string.

To use this code snippet, you need to add it to your theme’s functions.php file or a custom plugin. Once added, you can create a new page in WordPress and use the Divi Builder to add a Text module. Inside the Text module, you can use the [divi_blog_grid] shortcode to display the blog grid layout.

You can customize the appearance of the blog grid layout by adding custom CSS to your theme. For example, you can target the .blog-grid class to adjust the grid layout, and the .blog-post class to style individual blog posts.

This code snippet is useful for anyone using the Divi theme who wants to create a blog grid layout to showcase their blog posts. It provides a flexible and customizable solution that can be easily integrated into the Divi Builder.

Examples

Example 1: Creating a Custom Divi Blog Grid Layout

This use case demonstrates how to create a custom blog grid layout using the Divi theme. The code example below shows how to modify the default blog grid layout to display posts in a 3-column grid.

function wpsnippets_custom_divi_blog_grid_layout( $query ) {
    if ( $query->is_main_query() && ! is_admin() && is_home() ) {
        $query->set( 'posts_per_page', 9 );
        $query->set( 'post_type', 'post' );
        $query->set( 'orderby', 'date' );
        $query->set( 'order', 'DESC' );
    }
}
add_action( 'pre_get_posts', 'wpsnippets_custom_divi_blog_grid_layout' );

This code snippet uses the pre_get_posts action hook to modify the main query for the blog page. It sets the number of posts per page to 9, the post type to ‘post’, and orders the posts by date in descending order. This will result in a 3-column grid layout on the blog page.

Example 2: Adding Custom CSS for Divi Blog Grid Layout

This use case demonstrates how to add custom CSS to style the Divi blog grid layout. The code example below shows how to target the blog grid elements and modify their appearance.

function wpsnippets_custom_divi_blog_grid_css() {
    if ( is_home() ) {
        echo '<style>';
        echo '.et_pb_post {';
        echo '    /* Custom styles for blog grid elements */';
        echo '}';
        echo '</style>';
    }
}
add_action( 'wp_head', 'wpsnippets_custom_divi_blog_grid_css' );

This code snippet uses the wp_head action hook to output custom CSS within the <head> section of the blog page. It targets the .et_pb_post class, which represents each individual post in the blog grid, and allows you to add custom styles to modify their appearance.

Example 3: Adding Pagination to Divi Blog Grid Layout

This use case demonstrates how to add pagination to the Divi blog grid layout. The code example below shows how to use the paginate_links() function to generate pagination links for the blog page.

function wpsnippets_custom_divi_blog_grid_pagination() {
    global $wp_query;

    if ( $wp_query->max_num_pages > 1 ) {
        echo '<div class="pagination">';
        echo paginate_links( array(
            'base'      => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
            'format'    => '?paged=%#%',
            'current'   => max( 1, get_query_var( 'paged' ) ),
            'total'     => $wp_query->max_num_pages,
            'prev_text' => '&laquo;',
            'next_text' => '&raquo;',
        ) );
        echo '</div>';
    }
}
add_action( 'wp_footer', 'wpsnippets_custom_divi_blog_grid_pagination' );

This code snippet uses the paginate_links() function to generate pagination links for the blog page. It checks if there are multiple pages of posts and outputs the pagination links accordingly. The prev_text and next_text parameters specify the text for the previous and next links, respectively.