Support » Fixing WordPress » Where to put JS?

  • shivo

    (@shivo)


    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • mar1965

    (@mar1965)

    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.

    Moderator keesiemeijer

    (@keesiemeijer)

    moderator

    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");
        }
      );
    });
    shivo

    (@shivo)

    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' );
    ?>
    shivo

    (@shivo)

    (and also made the chnages keesiemeijer mentioned)

    Moderator keesiemeijer

    (@keesiemeijer)

    moderator

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

    shivo

    (@shivo)

    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

    Moderator keesiemeijer

    (@keesiemeijer)

    moderator

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

    shivo

    (@shivo)

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

    Moderator keesiemeijer

    (@keesiemeijer)

    moderator

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Where to put JS?’ is closed to new replies.