Support » Plugins » Hacks » Adding a title attribute into tab shortcode

  • Hey everyone!

    I have a tab shortcode installed on a template, and it generates one of these ‘recent/popular/featured’ tabs into the template.

    The shortcode is as follows:

    function tabs_shortcode($atts, $content = null) {
        $output = '<div class="tabs">';
        $output .= '<div class="tab-menu">';
        $output .= '<ul>';
        //Build tab menu
        $numTabs = count($atts);
        for($i = 1; $i <= $numTabs; $i++){
            $output .= '<li><a href="#tab'.$i.'">'.$atts['tab'.$i].'</a></li>';
        $output .= '</ul>';
        $output .= '<div class="clear"></div>';
        $output .= '</div><!-- .tab-menu (end) -->';
        $output .= '<div class="tab-wrapper">';
        //Build content of tabs
        $tabContent = do_shortcode($content);
        $find = array();
        $replace = array();
        foreach($atts as $key => $value){
            $find[] = '['.$key.']';
            $find[] = '[/'.$key.']';
            $replace[] = '<div id="'.$key.'" class="tab">';
            $replace[] = '</div><!-- .tab (end) -->';
        $tabContent = str_replace($find, $replace, $tabContent);
        $output .= $tabContent;
        $output .= '</div><!-- .tab-wrapper (end) -->';
        $output .= '</div><!-- .tabs (end) -->';
        return $output;

    What I need to do is create an extra attribute in the shortcode, so the anchor tag also has a title field, for a short tooltip.

    Any help would be greatly appreciated!


Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz


    Try this (replacing the similar line):
    $output .= '<li><a href="#tab'.$i.'" title="'.$tooltip.'">'.$atts['tab'.$i].'</a></li>';
    You will also need to set $tooltip to whatever the actual tooltip would be like so: $tooltip = 'actual tooltip'; , placed above the previous line.

    wow, thanks! that helps a lot.

    However, I need to set title from the shortcode, because there are 3 tabs that need different tips. The shortcode now works like this:

    [tab1] [recent_posts num=”4″ type=”post” meta=”true” thumb=”true” thumb_size=”portfolio-post-thumbnail-small”]

    and what I need is to be able to add another attibute like ‘ title=”actual tooltip” ‘

    any help would be greatly appreciated. 😀

    Moderator bcworkz


    I knew you’d want different tooltips, but wasn’t sure where they were coming from. Now it’s clear 🙂

    You can add another attribute to pass a tooltip, but you’ll need to unset it once you’ve extracted the data so it doesn’t mess up the later foreach loop. Unfortunately, I don’t fully understand what’s going on in the handler due the nested shortcode nature, I’d need a vardump() of the $atts array to be sure I got the array references right.

    Perhaps the easiest thing to do is paste a full example the whole shortcode (including the added tooltip attributes) and all of the related handler code including all related add_shortcode() calls in, then post the link here. Then I can run the code myself to ensure I get the array references correct.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding a title attribute into tab shortcode’ is closed to new replies.