Add Second Button to Blog Module Posts

| blog module

The Divi theme comes with a blog module, which lets you display a list of posts anywhere on your site, complete with featured image, excerpt and read more button. If you'd like to add a second button beside posts in the Divi blog module, here's a way to do it.

I've had a bit of a play around and come up with a basic implementation (in PHP). In this example I'm adding a "Buy Tickets" button with a URL taken from a custom field.

First, here's the code:

add_filter('et_pb_blog_shortcode_output', 'dbc_add_second_buttons_to_blog_module', 10);

function dbc_add_second_buttons_to_blog_module($content) {
    return preg_replace_callback('/<article.*?<\/article>/s', 'dbc_add_second_button_to_article', $content);
}

function dbc_add_second_button_to_article($match) {
    if (isset($match[0])) { 
        $html = $match[0];
        $article = false;
        preg_match('/<article id="post-(\d*)"/', $html, $article);
        if (isset($article[1])) {
            $id = intval($article[1]);
            if ($id) {  
                $url = get_post_meta($id, 'buy_tickets_url', true); // Fetch url from post's custom field
                if (!empty($url)) {
                    $button = '<a href="'.esc_attr($url).'" class="more-link">Buy Tickets</a>';
                    $html = preg_replace('/(<a[^>]+class="more-link">)/s', $button.'\\1', $html);
                }
            }
        }
    }
    return $html;
}

Related Post: Adding PHP to the Divi Theme

You could add this, for example, into the functions.php file of a child theme, or using a plugin such as code snippets.

It looks a bit complicated, but don't let that put you off – what it's doing is reasonably straightforward. it modifies the HTML generated by the by the blog module, and then finds each article element in that HTML (corresponding to each blog post shown by the module).

For each article, it grabs the post id from the article's id attribute. It then tries to retrieve the ticket URL from a custom field called 'buy_tickets_url' from the post (I'll explain this in a bit). If it finds a ticket URL, it adds a "Buy Tickets" link with that URL alongside (actually, before) the read more link. Then the updated HTML gets returned to be displayed by the blog module.

The main thing you might need to change is where the ticket URL is retrieved from. Currently, the code is set up to use standard WP post custom fields. To test this, enable custom fields on a post by going into the backend edit screen for that post, and clicking on the options menu:

Then go to Preferences and enable Custom Fields, like so:

After saving the post, you should see an extra button added to the post in the blog module. Here's an example with the blog module in grid mode and some very basic styling:

Buttons can be added to other posts by adding a 'buy_tickets_url' custom field to them in the same way.

A couple of notes:

The extra button will be added to any blog module in which the post appears.
The code adds the "more-link" class to the new button, so that it will adopt the same styles as the standard "read more" link.

Divi Booster

Add Second Button to Blog Module Posts

More Divi Tips

Divi Booster

0 Comments

Submit a Comment Cancel reply