jQuery Tabs

This topic contains 13 replies, has 2 voices, and was last updated by  Bishal Napit 6 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #339

    polov
    Participant

    hello,
    can you add function “jQuery-Tabs” in your Theme?
    or
    can you explain how can add that (enqueue_script)?

    thanks
    http://jqueryui.com/tabs/

    #340

    Bishal Napit
    Keymaster

    @polov

    Can you follow this link: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ about how to enqueue the scripts in your site?

    Thanks.
    Bishal Napit

    #341

    polov
    Participant

    thank you
    I want to use the jQuery built into wordpress
    I added like that but it does not work:
    wp_enqueue_script(‘jquery-ui-tabs’, get_template_directory_uri() .’/js/jquery/ui/tabs.min.js’, array(‘jquery’), null, true);

    #342

    Bishal Napit
    Keymaster

    @polov

    For the built in WordPress jQuery UI Tabs, you just need to add the code: wp_enqueue_script( 'jquery-ui-tabs' ); and nothing other than that. It will load up the jQuery UI Tabs JS script for your site. Hope you are clear on this.

    Thanks.
    Bishal Napit

    #343

    polov
    Participant

    thank you
    but I have already tested this and it does not work

    – in my functions.php file I add:
    wp_enqueue_script (‘jquery-ui-tabs’);

    – and in my html page:

    <div id="tabs"><br>

    • 01</ li>
    • 02</ li>< li>03</ li></ ul><br>
      <div id="tabs-1"><p>text 1</p></div><br>
      <div id="tabs-2"><p>text 2</p></div><br>
      <div id="tabs-2"><p>text 3</p></div><br>
      </div>


    the tabs do not appear!

    • This reply was modified 6 months, 3 weeks ago by  polov.
    • This reply was modified 6 months, 3 weeks ago by  polov.
    • This reply was modified 6 months, 3 weeks ago by  polov.
    • This reply was modified 6 months, 3 weeks ago by  polov.
    #348

    polov
    Participant

    sorry for code in forum
    can you edit?

    • This reply was modified 6 months, 3 weeks ago by  polov.
    #350

    Bishal Napit
    Keymaster

    @polov

    I checked on my local install and seems to be working fine. So, have you managed those all properly, ie, in the functions.php file of the child theme, you need to have the below code:
    wp_enqueue_script( 'jquery-ui-tabs' );
    inside the PHP tag. Now, for the HTML code, it need to be like the below one:

    <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>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.</p>
    	</div>
    	<div id="tabs-2">
    		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>
    	</div>
    	<div id="tabs-3">
    		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>
    	</div>
    </div>

    And lastly in the custom js file, you need to have the code as below to make that tabs JS to work:

    jQuery( function() {
    	jQuery( "#tabs" ).tabs();
    } );

    Hope you have got it and can do that on your own now.

    Thanks.
    Bishal Napit

    #351

    polov
    Participant

    And lastly in the custom js file, you need to have the code as below to make that tabs JS to work:

    what is the “custom js file” I do not have this file
    how to create it and where to put it?

    • This reply was modified 6 months, 3 weeks ago by  polov.
    • This reply was modified 6 months, 3 weeks ago by  polov.
    #354

    Bishal Napit
    Keymaster

    @polov

    You just need to create a new JS file in the child theme directory where ever you want and then, call that file via the same hook described above ie, wp_enqueue_script. Hope you are clear on this.

    Thanks.
    Bishal Napit

    #355

    polov
    Participant

    ok
    – I created a file “tabsjquery.js” with the code in it and put it in my theme
    – then I added the line in my “functions.php” file:
    wp_enqueue_script ('tabsjquery.js');
    or
    wp_enqueue_script ('tabsjquery');

    but it does not work!

    I tried that too:
    h ttps://www.wpbasics.org/2016/01/05/how-to-add-jquery-ui-tabs-to-wordpress/

    I think I will use a plugin!

    • This reply was modified 6 months, 3 weeks ago by  polov.
    #357

    polov
    Participant

    Eureka! 🙂
    it’s explained here: h ttps://www.wpbasics.org/2016/01/05/how-to-add-jquery-ui-tabs-to-wordpress/

    1 – create a .js file with the code:
    jQuery( function() {
    jQuery( "#tabs" ).tabs();
    } );

    add this .js in your theme
    for me name of file is: “tabsjquery.js”

    2 – add in your “functions.php”:
    function my_scripts_tabs() {
    if ( !is_admin() ) {
    wp_enqueue_script('jquery-ui-tabs');
    wp_enqueue_script( 'custom-tabs', get_stylesheet_directory_uri() . '/tabsjquery.js', array('jquery'));
    }
    }
    add_action('wp_enqueue_scripts', 'my_scripts_tabs');

    3 – For add style:
    – download the ui-core here
    h ttp://jqueryui.com/download/#!version=1.12.1&components=111111111111111111111111111111111111111111111111
    clic Download

    – decompress .zip and add the folder name “jquery-ui-1.12.1.custom” in your Theme

    – add this code in your functions.php:
    wp_register_style('jquery-custom-style', get_stylesheet_directory_uri().'/jquery-ui-1.12.1.custom/jquery-ui.css', array(), '1', 'screen');
    wp_enqueue_style('jquery-custom-style');

    ok

    #358

    Bishal Napit
    Keymaster

    @polov

    That blog post should help you on the same on further explaining about what I was referring to. But, if you could not then, you can try any of the plugin available via the WordPress plugin directory for the same. The one, which you can try out is: https://wordpress.org/plugins/shortcodes-ultimate/ which is available via the WordPress plugin directory.

    Thanks.
    Bishal Napit

    #362

    polov
    Participant

    Thank you for your help
    I wish you a very happy new year 2018

    #363

    Bishal Napit
    Keymaster

    @polov

    Do let me know if you have got any further query regarding to the theme. I will try to help you on those as far as possible. And Happy New Year 2018 for you too.

    Thanks.
    Bishal Napit

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.