0

I made a tabbed widget to display recent posts, comments, and popular posts. Now I want to take out the tab function and make a shortcode of it, so I can add it to WP posts and use it there.

<div class="tabs tabs-style-topline">
    <nav>
        <ul>
            <li><a href="#section-topline-1" class="icon icon-home"><span>Home</span></a></li>
            <li><a href="#section-topline-2" class="icon icon-gift"><span>Deals</span></a></li>
            <li><a href="#section-topline-3" class="icon icon-upload"><span>Upload</span></a></li>
            <li><a href="#section-topline-4" class="icon icon-coffee"><span>Work</span></a></li>
            <li><a href="#section-topline-5" class="icon icon-config"><span>Settings</span></a></li>
        </ul>
    </nav>
    <div class="content-wrap">
        <section id="section-topline-1"><p>1</p></section>
        <section id="section-topline-2"><p>2</p></section>
        <section id="section-topline-3"><p>3</p></section>
        <section id="section-topline-4"><p>4</p></section>
        <section id="section-topline-5"><p>5</p></section>
    </div><!-- /content -->
</div><!-- /tabs -->

<script>
    new CBPFWTabs( document.getElementById( 'tabs' ) );
</script>

Built on this tutorial.

Whatever code in functions.php I tried in the last two days, it simply won't work. Ideally I want something like this to add inside posts:

[tabgroup]
[tab title="Tab 1"]Tab 1 content goes here.[/tab]
[tab title="Tab 2"]Tab 2 content goes here.[/tab]
[tab title="Tab 3"]Tab 3 content goes here.[/tab]
[/tabgroup]
2
1

I modified the code you shared a little. You can try this: http://pastebin.com/sAshJ348

Change the classes where necessary.

Thanks

1
  • Awesome, thanks! I used a modified version of what you posted and it worked great :D Minor tweak: in tab_func there's no need to return $single_tab_array and in my case caused an Array to string conversion notice. You don't have to return anything, but if you'd prefer it did than you can change the return value from $single_tab_array to $content. Again, thank you for sharing!
    – StephanieQ
    Apr 5 '18 at 16:38

Your Answer

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

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