0

I've created two short codes which are used as follows:

[foo_tabs]
    [foo_tab]{Tab 1 Content}[/foo_tab]
    [foo_tab]{Tab 2 Content}[/foo_tab]
    [foo_tab]{Tab 3 Content}[/foo_tab]
[/foo_tabs]

The short codes are registered as such:

add_shortcode( 'foo_tabs', 'foo_tabs_shortcode' );
function foo_tabs_shortcode( $atts, $content = null) {
    $args = shortcode_atts( array (
        'id' => 't' . uniqid()
    ), $atts);

    return '<article class="FOO-m-tabs" id="' . $args['id'] . '">' . do_shortcode($content) . '</article>';
}

add_shortcode( 'foo_tab', 'foo_tab_shortcode' );
function foo_tab_shortcode( $atts, $content = null){
    $args = shortcode_atts( array (
        'id' => 't' . uniqid(),
        'active' => false,
        'label' => 'Tab'
    ), $atts );

    return (
        '<article class="FOO-m-tabs-tab">' .
            '<input type="radio" id="' . $args['id'] . '" class="FOO-s-tabs" name="myTabs-state" ' . ($args['active'] == true ? 'checked' : '') .'>' .
            '<label for="' . $args['id'] . '" class="FOO-m-tabs-nav">' . $args['label'] . '</label>' .
            '<div class="FOO-m-tabs-panel">' .
                '<section class="FOO-m-tabs-content">' .
                    do_shortcode($content) .
                '</section>' .
            '</div>' .
        '</article>'
    );
}

The resulting HTML is:

<article class="FOO-m-tabs" id="t55e74b6195f71">
    <article class="FOO-m-tabs-tab">
        <input id="t55e74b6195f71" class="FOO-s-tabs" name="myTabs-state" type="radio">
        <label for="t55e74b6195f71" class="FOO-m-tabs-nav">Tab</label>
        <div class="FOO-m-tabs-panel">
            <section class="FOO-m-tabs-content">{Tab 1 Content}</section>
        </div>
    </article>
    <article class="FOO-m-tabs-tab">
        <input id="t55e74b6196342" class="FOO-s-tabs" name="myTabs-state" type="radio">
        <label for="t55e74b6196342" class="FOO-m-tabs-nav">Tab</label>
        <div class="FOO-m-tabs-panel">
            <section class="FOO-m-tabs-content">{Tab 2 Content}</section>
        </div>
    </article>
    <article class="FOO-m-tabs-tab">
        <input id="t55e74b6196342" class="FOO-s-tabs" name="myTabs-state" type="radio">
        <label for="t55e74b6196342" class="FOO-m-tabs-nav">Tab</label>
        <div class="FOO-m-tabs-panel">
            <section class="FOO-m-tabs-content">{Tab 3 Content}</section>
        </div>
    </article>
</article>

You'll notice that there are duplicate id values in the HTML.

Is the problem that I'm using uniqid()? Is it in reality NOT unique?

Is it something wrong with how I am registering the shortcode?

  • 1
    uniqid uses microtime to generate the ID, if code executes fast enough, it's possible to get the same value twice. – Milo Sep 2 '15 at 19:49
  • @Milo Looks like that did the trick. I switched to guids. – mlhaufe Sep 2 '15 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.