Extract attribute from shortcode and assign it to id url anchor

To start off, I am a complete beginner with PHP. I am currently building a website on wordpress and using this plugin.

https://wordpress.org/plugins/fruitful-shortcodes/

Read More

This plugin allows me to easily add tabs with corresponding content boxes. In the shortcode I can specify a title that goes on the tab through an attribute called title. By default when I click on any tab, the url wilk add a hashtag for that tab. So it goes from www.mywebsite.com/services to something like www.mywebsite.com/services#ffs-tabbed-856 with the number at the end being randomly generated everytime.

What I want to do is be able to click on a tab and have the plugin extract the title of the tab and add it as the hashtag. So if the tab I click is titled Foot Care, the url should change from www.mywebsite.com/services to www.mywebsite.com/services#foot-care. I have been digging around the plugin php files and located the line responsible for generating the current hashtag.

$id = ‘ffs-tabbed-‘ . rand( 1, 100 );

Being inexperienced with PHP, I have been trying random combinations of php to try and get it to work. There is some variables like $title and $tab_title but I have no clue how to work them in. I have searched for hours and even emailed the plugin creator. Here is the function that I believe is being used by the particular shortcode I am using.

function fruitful_tabs_shortcode($atts, $content = null) {
    $output     = '';
    $tab_titles = array();
    $tabs_class = 'tab_titles';
    extract(shortcode_atts(array('id' => '', 'type' => '', 'width' => '', 'fit' => '', 'widthtab' => '', 'tabcolor' => '#71AFFF', 'closed' => 'true'), $atts, 'fruitful_tabs'));

    $id     = 'ffs-tabbed-' . rand( 1, 100 );
    $type   = 'default';
    $width  = 'auto';
    $fit    = 'false';
    $link   = '#';
    $widthtab   = '30%';

    if (isset($atts['id']))     { $id    = sanitize_html_class($atts['id']); }
    if (isset($atts['type']))   { $type  = esc_js($atts['type']); }
    if (isset($atts['width']))  { $width = esc_js($atts['width']); }
    if (isset($atts['fit']))    { $fit   = esc_js($atts['fit']); }
    if (isset($atts['widthtab']))   { $widthtab  = esc_js($atts['widthtab']); }
    if (isset($atts['tabcolor']))   { $tabcolor  = esc_html($atts['tabcolor']); }
    if (isset($atts['closed']))     { $closed    = esc_html($atts['closed']); }

    $output .= '<script type="text/javascript"> ';
        $output .= 'jQuery(document).ready(function() { ';
            $output .= 'jQuery("#'.$id.'").easyResponsiveTabs({ ';
            $output .= '    type:   "'.$type.'", ';
            $output .= '    width: "'.$width.'", ';
            $output .= '    fit:    '.$fit;
            $output .= '}); ';
            $output .= 'var cont_width = jQuery("#'.$id.'.resp-vtabs").outerWidth() - jQuery("#'.$id.'.resp-vtabs .resp-tabs-list").outerWidth() - 3;';
            $output .= 'jQuery("#'.$id.'.resp-vtabs .resp-tabs-container").css({"width":cont_width});';
        $output .= '}); ';
    $output .= '</script>';

    preg_match_all( '/tab title="([^"]+)"/i', $content, $matches, PREG_OFFSET_CAPTURE );
    if ( isset( $matches[1] ) ) { $tabs = $matches[1]; } 

    $output .= '<div id="'.$id.'" class="ffs-tabbed-nav">';
        $output .= '<ul class="resp-tabs-list"';
            if ($type == 'vertical') { $output .= ' style="width:'.$widthtab.'"'; }
            if ($type == 'accordion') { 
                if ($closed == 'true') { 
                    $output .= ' data-closed="closed"'; 
                }
            }
        $output .= '>';

    if (count($tabs)) {
        foreach ($tabs as $tab) {
            $output .= '<li>' . esc_html($tab[0]) . '</li>';
        }
    }   
    $output .= '</ul>';

    $output .= '<div class="resp-tabs-container">';
            $output .= fruitful_sh_esc_content_pbr(do_shortcode($content));
        $output .= '</div>';
    $output .= '</div>';
    $output .= '<div class="clearfix"></div>';
    return $output;
}
add_shortcode('fruitful_tabs', 'fruitful_tabs_shortcode');

Any help would be great.

Related posts

Leave a Reply