WordPress.org

Forums

Where to put JS? (10 posts)

  1. shivo
    Member
    Posted 2 years ago #

    I'm looking to add a js mouseover/hover thing to my site - example: http://jsbin.com/oxohuf/1/edit

    Can someone confirm why I should put the javascript on my wordpress?
    I want it on every page/post, so I'm thinking it should be on the theme, but I can't figure out where it should go.

    Also, should the following just go in the header.php file?

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

    Thanks

  2. mar1965
    Member
    Posted 2 years ago #

    Hi Shivo,

    You can create your Javascript file and add the call to it by adding it to the "head" through editing of the header.php template (highly recommended using a child theme). This post should be helpful: Using Javascript.

  3. keesiemeijer
    moderator
    Posted 2 years ago #

    Put the script inside a js folder in your theme. And enqueue the script from your theme's functions.php:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Link_a_Theme_Script_Which_Depends_on_jQuery

    This way you load the jQuery library that's included with WordPress.

    You have to alter your script because The jQuery library included with WordPress is set to the noConflict() mode:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    jQuery(document).ready(function($) {
      $('.hover-me').hover(
        function(){
          $('#target-frame').html(
            $(this).attr('data-hover-text')
          );
        },
        function(){
          $('#target-frame').html("Default text");
        }
      );
    });
  4. shivo
    Member
    Posted 2 years ago #

    I created a new folder (js) and put the script in a file named custom_script.js

    I put the below in the header, and now the images are even showing at all....??

    <?php
    function my_scripts_method() {
    	wp_enqueue_script(
    		'custom-script',
    		get_template_directory_uri() . '/js/custom_script.js',
    		array( 'jquery' )
    	);
    }
    
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
    ?>
  5. shivo
    Member
    Posted 2 years ago #

    (and also made the chnages keesiemeijer mentioned)

  6. keesiemeijer
    moderator
    Posted 2 years ago #

    I put the below in the header, and now the images are even showing at all

    Put that code in your theme's functions.php file (without the php tags).

  7. shivo
    Member
    Posted 2 years ago #

    Images reappear if I put them in the sidebar as opposed to a body of a page, but there is still no reaction when I hover over them. Even with creating a functions.php file

  8. keesiemeijer
    moderator
    Posted 2 years ago #

    Can we have a link to your site?
    Can you see in the source code if your script and jquery are loaded?

  9. shivo
    Member
    Posted 2 years ago #

    Link
    You'll see that the images don't appear here.

  10. keesiemeijer
    moderator
    Posted 2 years ago #

    JQuery and your script "custom_script.js" are not loaded when I look at the source code. Are you sure the script "custom_script.js" is in a folder called /js in your theme and you enqueued the script correctly in your themes functions.php?

    Does your theme's header.php have "wp_head();" before the </head> tag in your theme's header.php?
    http://codex.wordpress.org/Function_Reference/wp_head
    http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.