Loading Jquery UI tabs in Wordpress

Question

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.

Answer 1

Wordpress have already lot of UI effects. Docs

Step 1. Add the effect in function.php file of theme

function add_theme_scripts() {
    wp_enqueue_script("jquery-ui-tabs");
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Step 2. Add the HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3</p>
  </div>
</div>

Step 3 : Add script in the footer.php

<script>
jQuery(document).ready(function($) {
    $('#tabs').tabs();
})    
</script>