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'm developing a theme for wordpress and I'm using this function to enqueue scripts and styles

function Joy_scripts() {

wp_enqueue_style( 'Joy-style');

wp_enqueue_script( 'Joy-scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0', true );

if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'Joy-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
}

if ( in_category('12') ) {
wp_enqueue_script( 'Joy-jquizzy-engine', get_template_directory_uri(). '/js/jquery.jquizzy.js', array( 'jquery'), '1.7' );
wp_enqueue_script( 'Joy-jquizzy-init', get_template_directory_uri(). '/js/init.js', array( 'jquery'), '1.7' );
wp_enqueue_script( 'Joy-jquizzy-script', get_template_directory_uri(). '/js/jquizzy-script.js', array( 'jquery'), '1.7' );
 }
}
add_action( 'wp_enqueue_scripts', 'Joy_scripts');

This is the html output:

</footer>
</div><!-- #page -->

<script type='text/javascript' src='http://localhost:8888/theme/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://localhost:8888/theme/wp-content/plugins/mailchimp-widget/js/mailchimp-widget-min.js?ver=3.5.2'></script>
<script type='text/javascript' src='http://localhost:8888/theme/wp-content/plugins/media-element-html5-video-and-audio-player/mediaelement/mediaelement-and-player.min.js?ver=2.1.3'>    </script>

<!-- some other scripts loaded here they're not important for this question purposes-->

<link rel='stylesheet' id='Joy-style-css'  href='http://localhost:8888/theme/wp-content/themes/Joy/style.css?ver=1.0' type='text/css' media='all' />

As you can see the theme stylesheet is loaded AFTER the scripts, and at the BOTTOM of the document. This is causing FOUC (I have added the stylesheet at the top using <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> and the FOUC dissappeared)

Also in the Chrome console I'm getting: Uncaught ReferenceError: jQuery is not defined localhost/:111 Uncaught TypeError: Property '$' of object [object Object] is not a function

jQuery is loading properly and before the other scripts, so, I really did not understand what is happening here, am I doing something wrong?

My theme is based in on Underscores

Thanks for your help.

share|improve this question
    
@thomascharbit's answer is most likely correct as to the Javascript error. I can only make the stylesheet print to the footer by incorrectly registering and enqueueing it as a script. At least half of that equation is missing in your code. The theme or a plugin has got to be interfering somehow. –  s_ha_dum Jul 8 '13 at 23:28
add comment

3 Answers

up vote 2 down vote accepted

For jQuery, Wordpress uses the jQuery.noConflict() so "$" is not a reference to jQuery. - You can use jQuery() insteand of $() - or define $, for example you can wrap your code like this :

 jQuery(function($) {
    // your jQ code
 });

For your CSS at the bottom of the document : do you call wp_head() in your header.php ?

share|improve this answer
    
I have wp_head in header.php: <?php } ?> <!-- End FB Sharing for WP --> <?php wp_head(); ?> </head> I have changed the ´$´ for ´jQuery´ and the script works but the undefined error persists :( –  roymckrank Jul 9 '13 at 19:05
    
A plugin was the responsible of loading the CSS at the end of the document (JavaScript to Footer) I changed $ for jQuery and my script worked just fine. Thank you all! –  roymckrank Jul 9 '13 at 22:24
    
glad to help :) –  thomascharbit Jul 9 '13 at 22:35
add comment
  1. As thomascharbit states: use jQuery(), not $ due to no conflict.
  2. WP loads jQuery by default, but not jQuery UI - WP has a handle for jQUI, but it's not active
  3. You gotta load your own css for it first.

I recently struggled with this and documented my stumblings here: http://learningwordpress.com.au/steps/step-04-script-handling/

The code I wound up with below does it all in one hit - enqueue my custom JS, specify the ui-widget & ui-dialog parts, make them dependent on jQuery core and load the css directly from google.

function load_jquery_ui() {
    global $wp_scripts; 
    // tell WordPress to load jQuery widgets & dialogs
    wp_enqueue_script(
        'dynamics',
        get_template_directory_uri() . '/scripts/dynamics.js',
        array( 'jquery-ui-widget', 'jquery-ui-dialog' )
    ); 
    // get registered script object for jquery-ui
    $ui = $wp_scripts->query('jquery-ui-core'); 
    // tell WordPress to load the Smoothness theme from Google CDN
    #$protocol = is_ssl() ? 'https' : 'http';
    #$url = "$protocol://ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.css";
    $url = "//ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.css";
    wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
}
add_action('init', 'load_jquery_ui');
share|improve this answer
add comment

Best to break things down insto managable steps.

Enque your style

add_action( 'wp_enqueue_scripts', 'Joy_styles' );
function Joy_style(){
wp_enqueue_style( 'Joy-style');
}

makesure your including jquery.

if (!is_admin()) add_action('wp_enqueue_scripts', 'kv_jquery_enqueue', 11);
function kv_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}

Enque your scripts

function Joy_scripts() {
wp_enqueue_script( 'Joy-scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0', true );

if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'Joy-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20120202' );
}

if ( in_category('12') ) {
wp_enqueue_script( 'Joy-jquizzy-engine', get_template_directory_uri(). '/js/jquery.jquizzy.js', array( 'jquery'), '1.7' );
wp_enqueue_script( 'Joy-jquizzy-init', get_template_directory_uri(). '/js/init.js', array( 'jquery'), '1.7' );
wp_enqueue_script( 'Joy-jquizzy-script', get_template_directory_uri(). '/js/jquizzy-script.js', array( 'jquery'), '1.7' );
 }
}
add_action( 'wp_enqueue_scripts', 'Joy_scripts');
share|improve this answer
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.