jQuery UI tabs not working with layerwp theme
-
I used this tutorial that implements jQuery UI tabs & it works great with the (twentytwelve) theme:
https://davecoast.com/dc_blog/how-to-jquery-ui-tabs-in-wordpress-child-theme/I used the same code with a layerswp (child) theme & it doesn’t work.
Question: How would I use & implement jQuery UI tabs with layerwp theme?
This is what I’m doing & these files are placed in layerswp-child directory:
style.css
/* Theme Name: Layers Description: A WordPress site builder so simple and intuitive, you’ll be a pro the first time you use it. Author: Obox Themes Author URI: https://www.oboxthemes.com/ Theme URI: https://demo.layerswp.com/ Version: 1.0.3 Tags: white License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: layerswp */ /* Get the parent theme style sheet */ @import url("../layerswp/style.css"); @import url("//code.jquery.com/ui/1.11.3/jquery-ui.min.js");
functions.php
<?php function demo_tabs_script_loader() { if (!is_admin()) { // only load for front end, not when I'm in the dashboard // Clear jQuery if already registered wp_deregister_script('jquery'); wp_enqueue_script( // From jquery.com copy CDN (or download) 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' ); // End of enqueue jQuery wp_enqueue_script( // From jqueryui.com copy CDN (or download) 'jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js', array('jquery') ); // End of enqueue jQuery UI wp_enqueue_script( // Load up my script 'demo-script-one', get_stylesheet_directory_uri() . '/assets/js/demoTabsScript.js', array('jquery') ); // End of enqueue Demo Script One } // End of Not-Is Admin if statement } // End of Demo Tabs Script Loader Function add_action('wp_enqueue_scripts', 'demo_tabs_script_loader'); // End of functions.php
demoTabsScript.js placed in /assets/js/demoTabsScript.js
jQuery(document).ready(function($) { $( ".demoTabsClass" ).tabs(); });
Placed in a TEXT widget in a blank layerswp page:
<h1>Demo of jQuery UI Tabs</h1><br> <div id="demoTabsId" class="demoTabsClass"> <ul> <li><a href="#Tab1">Tab 1</a></li> <li><a href="#Tab2">Tab 2</a></li> <li><a href="#Tab3">Tab 3</a></li> </ul> <div id="Tab1"> <p>Tab1 contents</p> </div> <div id="Tab2"> <p>Tab2 contents</p> </div> <div id="Tab3"> <p>Tab3 contents</p> </div> </div>
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘jQuery UI tabs not working with layerwp theme’ is closed to new replies.