Is there any solution for using jQuery tabs within the native WordPress scripts? If you know of a way to get any method of jQuery tabs working on the frontend and the backend please share your solution.
I have tried implementing jQuery Tabs (example source available at link)
Dependencies:
- UI Core
- Widget Factory
- Effects Core (optional; for use with the show and hide options)
Additional Notes:
This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
I have also tried implementing Organic Tabs (demo) (source)
I tried enqueuing all native WordPress scripts for these, and couldn't get the tabs to function.
Using the first option (jQuery and Jquery UI) with native WordPress scripts didn't work. When I used the latest version of jQeury instead of native WordPress jQuery, they worked, but then the rest of the admin interface was broken.
And glancing at the Organic Tabs source, it looks as if that code was last tested to work with jQuery version: 1.7.1
.
As a side note, it seems like native WordPress jQuery version is: 1.8.3
Here are the styles being added for jQuery and jQuery UI tabs.
$to_add['jquery-ui'] = 'http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css';
$to_add['tabs'] = './css/global/tabs.css';// path to custom tab styles.
Here are the scripts being added for jQuery and jQuery UI tabs.
$to_add['jquery'] = includes_url('/js/jquery/jquery.js');
$to_add['jquery-ui-core'] = includes_url('/js/jquery/ui/jquery.ui.core.min.js');
$to_add['jquery-ui-widget'] = includes_url('/js/jquery/ui/jquery.ui.widget.min.js');
$to_add['jquery-effects-core'] = includes_url('/js/jquery/ui/jquery.ui.effect.min.js');
$to_add['jquery-ui-tabs'] = includes_url('/js/jquery/ui/jquery.ui.tabs.min.js');
Of course, fired on admin_enqueue_scripts
using wp_enqueue_style()
and wp_enqueue_script()
Using their same HTML markup from the example just changing the tabs container ID to a class instead.
<script>
$(function(){
$(".tabs_container").tabs();
});
</script>
Setting jQuery Script to:
$to_add['jquery'] = 'http://code.jquery.com/jquery-latest.js';
Makes the tabs work, but all other areas of the dashboard page break.
Dashboard page I'm referring to is: post edit screen for any post type. Trying to add jQeury tabs to a metabox.
It looks like WordPress is loading the following scripts on the post edit screen:
- jquery,
- utils,
- plupload,
- plupload-html5,
- plupload-flash,
- plupload-silverlight,
- plupload-html4,
- json2