I’m struggling to get the jQuery UI tabs to function in WordPress. I have a custom layout and need to add them into the home page directly.
I have several scripts on this page and all are working except the jQuery UI Tabs. All works well in a regular HTML document on my local machine so I know it has something to do with how WordPress is calling/reading the scripts.
I used wp_enqueue_script to load the scripts in finctions.php. I can see through source that the external scripts are loading in the footer section but the tabs still don’t function.
I know jQuery is working because I have a couple other scripts that are functioning fine on the page.
My Functions.php code:
function modify_jquery() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js', false, '1.8.1' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-core' );
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-tabs' );}
}
add_action( 'init', 'modify_jquery' );
Again, I can see that these scripts ARE loading on the page and seemingly in the correct order.
I added in the footer below the wp_footer() call this javaScript.
I’ve eliminated other functions form this that are not part of the question for ease of reading:
<script language="javascript">
$.noConflict();
jQuery( document ).ready(function( $ ) {
//jquery ui tabs
$(function() {
$(".tabs").tabs({
show: function(event, ui) {}
});
});
});
</script>
The HTML on the page is the standard tab stuff:
<div class="tabs">
<ul>
<li><a href="#tabs1-1">About</a></li>
<li><a href="#tabs1-2">Case Studies</a></li>
<li><a href="#tabs1-3">Testimonials</a></li>
</ul>
<div id="tabs1-1">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</article>
</div>
<div id="tabs1-2">
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</div>
<div id="tabs1-3">
<article>
<p>more blah</p>
</article>
</div>
</div>
Again, I have all this working locally in a standard HTML document.
You can see the work in progress website here:
http://www.lucasdeaver.com/#portfolio
JavaScript is not my strong suit so please any help would be appreciated. I’ve read several other posts about this and tried everything I read and can think of.
WordPress have already lot of UI effects.
Docs
Step 1. Add the effect in function.php file of theme
Step 2. Add the HTML
Step 3 : Add script in the footer.php