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

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.