WordPress: How To Overwrite a Shortcode From a Parent Theme in Your Child Theme or Custom Plugin

Many of our clients have buttons implemented through parent theme shortcodes. One of our partners asked if we could do some event tracking on the buttons since they were great call-to-actions (CTA) throughout the sites. The button shortcode we use automatically outputs a nice button by adding classes to the output HTML.

Here’s the shortcode to produce a button to visit my site:

[button link="https://martech.zone/partner/dknewmedia/"]Visit DK New Media[/button]

That outputs:

<a href="https://martech.zone/partner/dknewmedia/" class="button blue medium">Visit DK New Media</a>

And here’s how it looks:

Visit DK New Media

Add GA4 Event Tracking to a Button Shortcode

We want to update the HTML output to automatically add Google Analytics 4 Event Tracking when the button is clicked:

<a href="https://martech.zone/partner/dknewmedia/" class="button blue medium" onclick="gtag('event', 'click', {'event_category': 'button', 'event_label': 'Visit DK New Media'});">Visit DK New Media</a>

The button shortcode was created in our parent theme, so we do not want to modify our original theme to accommodate the change as those changes would be lost if we updated the theme. There is a solution, though! The WordPress API enables you to remove a shortcode using the remove_shortcode function!

This can be accomplished in your child theme functions.php file or by applying the code in a custom function. I advise deploying all of your content-related shortcodes in a custom plugin rather than in a theme file. Tools like AMP do not render shortcodes in themes.

Overwrite a Shortcode In a Child Theme

In a child theme, you can remove the shortcode and replace it with our new shortcode function. You will need to search your parent theme code to find the function (called button_function_in_parent_theme below) that creates the shortcode and then you can utilize it in this snippet in functions.php:

add_action( 'after_setup_theme', 'update_button_shortcode' );

function update_button_shortcode() {
    remove_shortcode( 'button_function_in_parent_theme' );
    add_shortcode( 'button', 'new_button_shortcode' );
}

Now, you can add your new and updated shortcode function with GA4 event tracking:

function new_button_shortcode($atts, $content = null) {
    // Extract shortcode attributes
    $attributes = shortcode_atts(
        array(
            'link' => '#', // Default value if 'link' is not provided
        ), 
        $atts
    );

    $url = esc_url($attributes['link']);
    $text = esc_html($content);

    // Generate the HTML output
    $html = '<a href="' . $url . '" class="button blue medium" onclick="gtag(\'event\', \'click\', {\'event_category\': \'button\', \'event_label\': \'' . $text . '\'});">' . $text . '</a>';

    return $html;
}

// Register the shortcode
add_shortcode('button', 'new_button_shortcode');

Overwrite a Shortcode Using A Custom Plugin

I’d recommend building a custom plugin for your site that incorporates all your shortcodes, even those within your theme. To do this:

1. Create a folder that’s uniquely named. For example, ours is named mtz-shortcodes.
2. Within that file, add a shortcodes.php file. (You can name it anything you’d like)
3. Within the shortcodes.php file, you can add the code above in addition to the plugin information that will display on your plugins page:

<?php
/*
Plugin Name: Martech Zone Shortcodes
Description: Shortcodes for Martech Zone. This way they work with AMP.
Version: 1.0.0
Author: Douglas Karr
Author URI: https://dknewmedia.com
*/

function update_shortcodes() {
    remove_shortcode( 'button_function_in_parent_theme' );
    add_shortcode( 'button', 'new_button_shortcode' );
}
add_action( 'init', 'update_shortcodes' );

function new_button_shortcode($atts, $content = null) {
    // Extract shortcode attributes
    $attributes = shortcode_atts(
        array(
            'link' => '', // Default value if 'link' is not provided
        ), 
        $atts
    );

    $url = esc_url($attributes['link']);
    $text = esc_html($content);

    // Generate the HTML output
    $html = '<a href="' . $url . '" class="button blue medium" onclick="gtag(\'event\', \'click\', {\'event_category\': \'button\', \'event_label\': \'' . $text . '\'});">' . $text . '</a>';

    return $html;
}

4. You can remove and add multiple shortcodes in the function above if you have more than one shortcode you’d like to replace using your custom plugin.
5. Zip up the folder, and you can now upload and activate the plugin via your WordPress plugins menu.