0

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.

1
  • @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
2

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 ?

3
  • 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 :) Jul 9 '13 at 22:35
0
  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');
0

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

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.