Unique ID for WordPress shortcodes when used more than once on a page?

Question

I’m currently coding a WordPress shortcode and it has some javascript involved. For javascript to work properly I need to use a div with a unique #ID. If the shortcode is used once, it works fine, but if they were to use the shortcode more than once on a page, it would break the javascript.

So, I’m wondering if there is some way to use a unique ID every time the shortcode is called? Or some way to have a different ID if the shortcode is used more than once on a page?

Answer 1

I wanted to elaborate on the answers with examples for those who need help.

How to count shortcodes in a post

Possible reasons you are here:

• Multiple instanced of same shortcodes with unique id
• You need the same shortcode outputting unique class each call
• Set a variable counter to count shortcode usage
• How to count how many times you have used a shortcode on the current page
• Set a unique incrementing number for each shortcode
• set a random number for data attribute shortcode

Use a static variable to count each shortcode call

https://www.php.net/manual/en/language.variables.scope.php#language.variables.scope.static

With a static variable with int value static $count = 1; called we can increment the value on each call of the shortcode with $count++;. I use this for adding custom ids to the output html of a SwiperJS slideshow shortcode that pulls in custom post type featured images I reuse on the same page. SwiperJS requires each element to have a unique class. With this new unique ID, the javascript can initialize each as unique objects or for use in styling purposes.

Example 1 PHP

add_shortcode('count_example', 'count_example_shortcode');
function count_example_shortcode( $atts = [], $content = null) {
    
// Options
ob_start();

/**
* Static variable
*/
static $count = 1; // if your prefer to start with zero change to 0

    $atts = shortcode_atts(
        [
            // Shortcode Attribute defaults
            'count' => 'true', 
        ],
        $atts
    );

    
        // You can check if shortcode attribute is set 
        if ($atts['count'] == true) {
           echo '<div id="example-'.$count.'">html stuff</div>';

        // or check the string value of attribute
        } elseif ($atts['count'] == "true") {
           echo '<div id="example-'.$count.'">html stuff</div>';

        // Use this below if no attributes are set
        else {
           echo '<div id="example">html stuff</div>';
        }

/**
* Increment int variable $count for each shortcode call
*/
    $count++;

    return ob_get_clean();

}

Example 1 Shortcodes

[count_example count="foo"]
[count_example count="true"]
[count_example]

Example 1 Output

<div id="example-1">html stuff</div>
<div id="example-2">html stuff</div>
<div id="example">html stuff</div>

Multilayered Example

Need a counter, and a need unique ID, class or data attribute consider using uniqueid() or random_int().

add_shortcode('count_example', 'count_example_shortcode');
function count_example_shortcode( $atts = [], $content = null) {
    
// Options
ob_start();

/**
* Static Variable Counter, UniqueID, or Random_int
*/
$count = 1;

$prefix = 'example-';
$uniqueID = $uniqid = uniqid($prefix); // https://www.php.net/manual/en/function.uniqid

$random_integer = random_int(100, 999); // https://www.php.net/manual/en/function.random-int.php

    // Attributes not used in this example, kept in example for complete structure
    $atts = shortcode_atts(
        [
            'count' => 'true', 
        ],
        $atts
    );
        
        echo '<div class="exammple-'.$count.'" id="'.$uniqueID.'" data-id="'.$random_integer.'">html stuff</div>';

    return ob_get_clean();

}

Example 2 Shortcodes

[count_example]
[count_example]

Example 2 Output

<div class="example-1" id="example-4b3403665fea6" data-id="735">html stuff</div>
<div class="example-2" id="example-4fe424wg4w33f" data-id="924">html stuff</div>