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/
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.