• 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.