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!

    Felipe

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

    (@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.

    Thread Starter feliperijo

    (@feliperijo)

    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

    (@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 pastebin.com, 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.