Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a simple jQuery script to enable an image mouseover hover effect that I want to use on my WP custom page template but it isn't yet working for me and I assume it is not linking to jQuery. The hover image does not display.

Here is part of the page template code (theme=Twenty_Eleven)

<?php
/**
 * Template Name: rpdcustompagetemplateportfolio
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>
<div id="primary">
<div id="content" role="main">
<div id="portfoliop">

<script type='text/javascript'> $(document).ready(function(){ $(".logobutton").hover(function() { $(this).attr("src","<?php bloginfo('template_directory'); ?>images/logobutton_hover50pc.png"); }, function() { $(this).attr("src","<?php bloginfo('template_directory'); ?>images/logobutton50pc.png"); }); }); </script> 

<img src="<?php bloginfo('template_directory'); ?>/images/logobutton50pc.png" alt="My button" class="logobutton" /> 
<h1>Portfolio</h1>

I always get some problem using jQuery & WordPress unfortunately! I assume this is the problem that jQuery not linked/working here.

I am most grateful for help & advice, and look forward to replies, many thanks

(NB for some reason I cannot cut/paste the code in properly here either..apologies)

share|improve this question
    
did you check console if its showing any script errors ? –  pr1nc3 Aug 29 '13 at 11:20
    
Firebug says no JavaScript on the page... –  rpd Aug 29 '13 at 11:22
    
replace $ with jQuery ? –  pr1nc3 Aug 29 '13 at 11:23
    
Well-I don't know... I have this bad problem in my head with WP & jQuery...I have added this link to jQuery on the custom page template & it works fine now but I'm not sure at all if this is the best way to do this in WP! <script src="ajax.googleapis.com/ajax/libs/jquery/1.4.2/…; –  rpd Aug 29 '13 at 11:25
1  
Please do basic troubleshooting first: ensure you have jQuery enqueued, that you're using the core-bundled version of jQuery, and that your jQuery script accounts for no-conflict mode and has valid syntax. –  Chip Bennett Aug 29 '13 at 12:28
add comment

4 Answers 4

Probably there are a lot of questions/answers here in wpse that explain this kind of issues and the use of jquery and other js in wordpress.

However,

  1. In wordpress never put javascripts in template files. Javascript should be in separate .js files.
  2. The javascript should be putted in the templates using wp_register_script / wp_enqueue_script functions using the hook wp_enqueue_scripts
  3. If one have to pass php variables to js (that being in js files cannot contain <?php echo $something ?> the function wp_localize_script should be used

This is valid for all javascript files / libraries.

Regarding jQuery

  1. Always use the jQuery version embedded in Wordpress using wp_enqueue_script('jquery'), everytime you deregister jQuery and register a cdn-version of it a cat die. And a dog feels bad.
  2. Once we use jQuery embedded in Wordpress, it works in noConflict mode, so the $ alias doesn't works until we use one of the noConflict wrappers

Docs

I'll use your case as example to better explain these arguments.

First you have to create a javascript file, call it "templateportfolio.js" and save it in 'js' folder of your theme, and put your js code there, remember to use noConflict wrappers:

jQuery(document).ready( function($){
  $(".logobutton").hover(
    function() { $(this).attr("src", my_script_data.logobutton_hover); },
    function() { $(this).attr("src", my_script_data.logobutton); }
  );
});

Here there are here 2 variables: my_script_data.logobutton_hover and my_script_data.logobutton that you need to pass to the script with wp_localize_script.

In fact, in function.php, you have to enqueue the script only for the page template and use wp_localize_script to pass the url of images:

function enqueue_templateportfolio_js() {
  // change the template file name according to your file
  if ( ! is_page_template('templateportfolio.php') ) return;
  wp_enqueue_script('enqueue_templateportfolio_js', get_template_directory_uri() . '/js/templateportfolio.js', array('jquery'), null, true );
  $imagesurl = get_template_directori_uri() . '/images/';
  $images = array(
    'logobutton_hover' => $imagesurl . 'logobutton_hover50pc.png',
    'logobutton' => $imagesurl . 'logobutton50pc.png',
  );
  wp_localize_script('enqueue_templateportfolio_js', 'my_script_data', $images );
}
add_action('wp_enqueue_scripts','enqueue_templateportfolio_js');
share|improve this answer
    
Don't kill cats! :) Really complete answer, which I had had something like this when I was starting out and trying to run jQuery scripts in WordPress. +1 for sure! –  helgatheviking Aug 29 '13 at 13:40
    
Thank you @helgatheviking! –  G. M. Aug 29 '13 at 14:03
add comment

replace $ sign with jQuery example - $(document).ready(function()

should be

jQuery(document).ready(function() 

and so on ... replace all $ sign in your script with jQuery, thich is correct way to use jquery in wordpress.

share|improve this answer
add comment

The TwentyEleven theme only appears to load jQuery on its showcase.php template file. You’ll need to load it yourself in your custom template file, which is easy enough to do. Put the following line of code before the get_header(); call.

wp_enqueue_script( 'jquery' );
share|improve this answer
add comment
jQuery(document).ready(function($){
  $(".logobutton").hover(function() {
    $(this).attr("src","<?php bloginfo( 'template_directory' ); ?>/images/logobutton_hover50pc.png");
  },
  function() {
    $(this).attr("src","<?php bloginfo( 'template_directory' ); ?>/images/logobutton50pc.png");
});
  1. You have an unnecessary }); in your second callback
  2. WordPress uses jQuery in noConflict mode, you should use noConflict Wrappers.
  3. You need a / after the <?php bloginfo( 'template_directory' ); ?>
  4. Always enqueue your js using wp_enqueue_script()
share|improve this answer
    
After all of us say the same thing probably OP will not forget it. –  G. M. Aug 29 '13 at 11:47
    
I fixed his code too. –  RRikesh Aug 29 '13 at 11:51
    
Yes, I know, but - my opinion - this is not a javascriopt answer / question so fix OP javascript (that, I admin, I not read at all) is not the preminent scope. After that, if you want fix it to better help OP - in my opinion again - is better edit an existing question, instead add 2 lines of js and just write same thing are written in a previous question. You have 2000+ rep so you can freely edit answers... –  G. M. Aug 29 '13 at 11:56
    
The question itself has multiple problems that I enumerated in my answer. The question has both JS and WP issues. Each point I stated directly relates to an error or bad practice so that OP can see WHY his code is not working and what should be done. I appreciate the fact that you wrote a good answer that other people will use and adapt in the future, but here, I guess OP needs to fix his code first and then learn how to optimise it. All those functions/hooks can be overwhelming for a beginner. –  RRikesh Aug 29 '13 at 12:09
    
Maybe, however, your js code is wrong, OP one is right. –  G. M. Aug 29 '13 at 13:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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