3

I am new to Wordpress and I need help with integrating my own jquery into a child theme.

I have this jquery tooltip which works but I want to include it into my wordpress child theme.

Have a look at the source code for this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/jquery.balloon.js"></script>

    <script>
    $(document).ready(function() {
    $('.sample').balloon({ position: "left" })  
    });
    </script>

How do I put all these in the child theme for the tooltip to work? Thanks

2

First off, jquery is most likely already enqueued by the main theme. But if not, the proper way is to call wp_enqueue_script('jquery') in a function for the action hook wp_enqueue_scripts.

Example:

function enqueue_jquery() {
   wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'enqueue_jquery').

This code would need to be added to the functions.php file for your child theme.

You would only specify a file name in wp_enqueue_script if you wanted to load a jquery version different than the one that comes with wordpress, or the one that comes with your main theme. And you would then need to make sure that any version of jquery already loaded is unloaded first, with wp_deregister_script('jquery'). Not deregistering an already loaded jquery version before loading a new one will lead to conflicts (same jquery functions defined twice...).

Then, for your jquery.balloon.js file, same remark, use wp_enqueue_script (and action hook wp_enqueue_scripts). You should also avoid using relative url's. Assuming you put the jquery.balloon.js file under the "js" directory for your child-theme, standard in WordPress would be to use code along the lines of:

wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);

The get_stylesheet_directory_uri function will return the full path url to your child-theme directory.

EDIT (had forgotten to include the activation of the balloon effect)

For the activation part (the $(document).ready(...); code), the most standard WordPress way to do things (and the one that will have the least disruption potential in terms of main - child theme relationship) is to create a js file with it, called for instance "balloonactivate.js", and put that file in the "js" folder for your child-theme.

Let's say that your child theme is for a theme called "maintheme"; then your child-theme should be in a folder called "maintheme-child" (ie, wp-content/themes/maintheme-child). In the "js" folder below (which either already exists, or which you will have created to put the "jquey.balloon.js" file), put the "**strong text**balloonactivate.js" file. The only thing left to do is to enqueue it like the jquery and jquery.balloon.js scripts.

So, the complete code that could work for you is as follows:

function enqueue_jquery_balloon() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);
   wp_enqueue_script('activate-balloon', get_stylesheet_directory_uri().'/js/balloonactivate.js', array('jquery-balloon'), false, false);
}

add_action('wp_enqueue_scripts', 'enqueue_jquery_balloon').

This code should be added to the functions.php file in the directory for your child-theme.

For the activation of the balloon effect, the $(document).ready(...); code could also be added inline at the end of the child-theme footer.php file (if the child-theme requires a footer that is different from the main theme one). But if the main theme footer suffices, it would be a pity to create a footer.php in the child-theme just for the balloon script (hence the comment above about the "least disruptive" impact of the balloonactivate.js file).

Enqueuing jquery is probably not needed in your case, but enqueuing it again is not an issue. What would be an issue is if one version of jquery was already loaded, and that you loaded a second one.

Hope this helps.

  • Please @Phil R., what about: <script> $(document).ready(function() { $('.sample').balloon({ position: "left" }) }); </script> Where do I place it? – Finerwhite Aug 11 '15 at 22:02
  • @Finerwhite, oops, forgot about that part. Will edit the answer to include it. – Phil R. Aug 13 '15 at 7:28
  • thank you very much. It had worked! But now, my drop-down menu is not working since I deregister the theme's jquery and enqueued the an external jquery that works with the balloon effect – Finerwhite Aug 13 '15 at 21:53
  • Do you need to deregister the jquery version that your main theme enqueues? What version of jquery does balloon need and what version does your main theme need? – Phil R. Aug 15 '15 at 7:15
  • The balloon does not work when I dont deregister the wordpress version. The wordpress version is 1.11.4 and the balloon version is 4.2.4 – Finerwhite Aug 15 '15 at 9:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.