0

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?

2
  • Generate and use said ID in your shortcode callback? Just use a static var or something and increment every call.
    – Rarst
    Nov 6, 2014 at 15:24
  • Or you could use uniqid (for generating that ID) in combination with wp_localize_script or just use a class...
    – realloc
    Nov 6, 2014 at 15:40

2 Answers 2

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>

0

Just start a global variable and increase it everytime the shortcode is called.

$shortcode_count = 0;

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

        global $shortcode_count;
        $shortcode_count++;

        echo $shortcode_count;

    return ob_get_clean();

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.