I am trying to create a jQuery tabs shortcode for WordPress this is my code in my functions.php for some reason the tabs show etc but they don't change?
add_shortcode('tabs', 'tabs_group');
add_shortcode('tab', 'tab');
// this variable will hold your divs
$tabs_divs = '';
function tabs_group( $atts, $content = null ) {
global $tabs_divs;
// reset divs
$tabs_divs = '';
extract(shortcode_atts(array(
'id' => '',
'class' => ''
), $atts));
$output = '<ul class="nav nav-tabs '.$class.'" ';
if(!empty($id))
$output .= 'id="'.$id.'"';
$output.='>'.do_shortcode($content).'</ul>';
$output.= '<div class="tab-content">'.$tabs_divs.'</div>';
return $output;
}
function tab($atts, $content = null) {
global $tabs_divs;
extract(shortcode_atts(array(
'id' => '',
'title' => '',
'active'=>'n'
), $atts));
if(empty($id))
$id = 'tab_item_'.rand(100,999);
$activeClass = $active == 'y' ? 'active' :'';
$output = '
<li class="'.$activeClass.'">
<a href="#'.$id.'">'.$title.'</a>
</li>
';
$tabs_divs.= '<div class="tab-pane '.$activeClass.'" id="'.$id.'">'.$content.'</div>';
return $output;
}
Here is whats in my header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
And on my page I have:
[tabs]
[tab title="tab" active="y" id="home"]home[/tab]
[tab title="tab2" active="n" id="about"]about[/tab]
[tab title="tab3" active="n" id="help"]help[/tab]
[/tabs]
EDIT!!
function tabs_header() {
//wp_enqueue_script('jquery');
wp_register_script( 'add-jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('jquery'),'',true );
wp_register_script( 'add-jqueryui-js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('jquery'),'',true );
wp_enqueue_style( 'add-jquery-js' );
wp_enqueue_style( 'add-jqueryui-js' );
}
add_action( 'wp_enqueue_scripts', 'tabs_header' );
Unless you really know what you're doing, don't enqueue external jQuery sources. Most of WordPress/jQuery bugs are because of this. Let WP use its bundled jQuery version and you're good to go.
You're not showing your Tabs script, but I suppose you have one. This is how I would enqueue a jQuery Tabs script (I have this working plugin at GitHub for an Audio Player):
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_so_17856211' );
function enqueue_scripts_so_17856211()
{
wp_enqueue_style(
'tabs-css',
get_stylesheet_directory_uri() . '/css/tabs.css'
);
wp_enqueue_script(
'tabs-js',
get_stylesheet_directory_uri() . '/js/tabs.js',
array( 'jquery', 'jquery-ui' ),
false,
false
);
}
Note that your-script.js
is being enqueued with jquery
and jquery-ui
dependencies.