Question

stack.

we’re working on a site: http://rodneycrowell.wpengine.com

it’s a single page scroller, with quite a lot of widgets.
the first widget on the home page is set up with jQuery UI Tabs.
we’ve enqueued the styles, and jQuery ui through the functions.php file
like so:

function ahso_scripts() {

    wp_register_script( 'jquery-easing', CHILD_URL . '/library/js/jquery.easing.1.3.js', array('jquery'), '1.3', TRUE );
    wp_register_script( 'jquery-smoothness', CHILD_URL.'/library/js/jquery.smoothscroller.js', array('jquery-easing'), '1.0', TRUE );
    wp_register_style( 'jquery-ui-custom', CHILD_URL.'/library/css/jquery-ui-1.9.0.custom.css', '', '1.9.0', 'all' );

    // only on the home page
    if ( is_front_page() ) {

        wp_enqueue_script( 'jquery-easing' );
        wp_enqueue_script( 'jquery-smoothness' );

        // jquery-ui-tabs
        wp_enqueue_style( 'jquery-ui-custom' );
        wp_enqueue_script( 'jquery-ui-tabs' );
    }

}
add_action( 'wp_enqueue_scripts', 'ahso_scripts' );

and on the page-home.php template, we’re instantiating the jQuery Ui Tabs like so:

<script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready(function() {
        jQuery("#tabs").tabs();
    });
    //]]>
</script>
<!--[if lt IE 9]-->
<script type="text/javascript">
    //<![CDATA[
    jQuery(function() {
        jQuery("#tabs").tabs("option", "disabled", false);
    });
    //]]>
</script>
<!--[endif]-->

the markup is a little funny, as i’ve been trying things, not passing in ‘$’ as an alias, using (document).ready(), troubleshooting.

for some reason, the tabs won’t instantiate, or work, we’re getting no errors in the console for the tabs,
granted, there’s a lot going on in some of the widgets, but this issue appeared long before we added anything to those,

what’s really giving me grief, is we’ve already done this on another site in pretty much the same manner, and it works. http://granthammond.com

if you look down at the bottom of the sidebar, you’ll see some tabs,
the only big difference being those are output by a shortcode, vs. these, which are echoed out in a page template.

thanks again stack.

Answer 1

The javascript portion of jQuery UI Tabs IS working. If you look at source and click on the different tab titles, the correct css classes are being added. However, the tab styles that are necessary aren’t included in your jQuery UI stylesheet =]