wp_head in a correct way


#1

According to the twentyten wordpress theme made by wordpress team you should

/* Always have wp_head() just before the closing
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to such
* as styles, scripts, and meta tags.
*/

Yet If I do some my scripts cant load because I set their settings before wp_head is initialized. My question is how do you use wp_head() ? Are wordpress team developers wrong ?


#2

wp_head will effect the load order of scripts.

Any script you add to your header, if it’s before wp_head, will load before any scripts that are loaded via wp_head (functions.php etc…).

If you are loading your jquery from your functions.php and using a script in your header for something like a slider, you need to put that script after wp_head because you want jquery to load first.

Or something like that, I just make this stuff up as I go. :slight_smile:


#3

Why not try loading your scripts the right way? (keeping header.php cleaner too)


function di_js_registers() {
if(!is_admin) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', false); // last false sets it to load in the header
	wp_register_script('samplescript', ("http://sitename.com/wp-content/themes/mytheme/js/samplescript.js"), false, '1.0', false);
	wp_enqueue_script('jquery');
	wp_enqueue_script('samplescript'); }	
	if(is_page(17)) { 
	wp_register_script('contactpagejs', ("http://sitename.com/wp-content/themes/mytheme/js/contact.js"), 
	    array('dependencies', 'here', 'samplescript', 'jquery'), '1.0', false); //depends on jquery and samplescript, so those get loaded first
	wp_enqueue_script('contactpagejs'); }
    }

add_action( 'wp_enqueue_scripts', 'di_js_registers' );

#4
digitalimpact said
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', false); // last false sets it to load in the header
the right way is to stick with jquery bundled with wordpress.

#5

keep your header.php clean…

head



>

		
		<?php bloginfo('name'); ?> <?php wp_title(); ?>
		

                 <?php wp_head(); ?>


functions.php

<?php
add_action('after_setup_theme', 'homegrown_setup' );

function homegrown_setup()
{
	add_theme_support('automatic-feed-links');
	add_theme_support( 'post-thumbnails' );
	add_theme_support( 'menus' );
	add_theme_support( 'post-formats', array( 'aside', 'link', 'gallery', 'status', 'quote', 'image' ) );

}

add_action('template_redirect', 'homegrown_load_scripts');

function homegrown_load_scripts()
{
	if (is_admin())
	{
		return false;
	}
	
	if (!is_admin())
	{
		wp_enqueue_script( 'jquery' );
		
		if ( is_singular() and comments_open() and (get_option('thread_comments') == 1))
		{
			wp_enqueue_script( 'comment-reply' );
		}

	}
}
//Set Priority 1 to load before plugin styles
add_action( 'init', 'homegrown_load_styles', 1 );


function homegrown_load_styles()
{
	if (is_admin())
	{
		return false;
	}
		if (!is_admin())
	{
		wp_register_style( 'screen', get_bloginfo('stylesheet_url'), 1.0);
		wp_enqueue_style( 'screen' );
	}
?>

#6

The doc type isn’t spouse to have the SYSTEM in it forum is adding it for some reason…

PS: I still can’t edit posts


#7
bitfade said
digitalimpact said
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"), false, '1.6.1', false); // last false sets it to load in the header
the right way is to stick with jquery bundled with wordpress.

True, that was just an example :slight_smile:

However, I like to take advantage of Google’s popularity and serve a jQuery that people are most likely to have cached already (by visiting Gmail, for example) :wink:

EDIT: @OrganicBeeMedia - I can edit posts. Something with your browser/dns cache maybe?


#8
digitalimpact said

EDIT: @OrganicBeeMedia - I can edit posts. Something with your browser/dns cache maybe?

its been like this for Safari since they changed the buttons

EDIT: works fine in Chrome


#9
partnuz said

Yet If I do some my scripts cant load because I set their settings before wp_head is initialized. My question is how do you use wp_head() ? Are wordpress team developers wrong ?

Loading javascript using wp_enqueue is a must in review process today… If you insert your script directly to header.php either before or after wp_head, there is possibility for your theme to be soft rejected… :wink:


#10
Loading javascript using wp_enqueue is a must in review process today… If you insert your script directly to header.php either before or after wp_head, there is possibility for your theme to be soft rejected
wp_enqueue is the correct way to call a script but where you enqueue it from doesn't make much difference.

wp_head is just a hook that grabs stuff from another location and adds it to the theme head. No reason why you can’t add that same code to the head itself, either way, it all works the same. There isn’t a right or wrong way, just whatever floats the authors boat.


#11
christopherjon said

wp_head is just a hook that grabs stuff from another location and adds it to the theme head. No reason why you can’t add that same code to the head itself, either way, it all works the same. There isn’t a right or wrong way, just whatever floats the authors boat.

And what happens if you put a jQuery - dependent script before the wp_head hook in your header file? :slight_smile: That’s what the dependencies array in the wp_register_script is for.


#12
And what happens if you put a jQuery – dependent script before the wp_head hook in your header file?
I covered that in my first reply. :)

But no, you can’t go throwing stuff where ever and expect it too work.

But it also helps to understand what wp_head and other hooks do and then use them according your needs.


#13

Don’t forget to include wp_footer(). It might not make a difference right away, but some plugins might not work since they queue scripts to be included when wp_footer is run…


#14

There is actually a thread on CodeCanyon’s forums on what the correct or best way to add jQuery (and any other scripts really) is. I actually posted my suggestion there: Adding jQuery to WordPress plugin