How to Insert CSS Stylesheet or Javascript to WordPress Header

in Wordpress,Wordpress Themes

We have previously discussed how to insert CSS Stylesheet or Javascript into WordPress header when integrating Highslide effects to the NextGen Gallery. If you have not read or need to re-read it, you can visit this post How to Integrate Highslide Into Nextgen Gallery

Below we will point out the details of the functions used in inserting Javascript or CSS Stylesheet into the WordPress header. There are some wordpress functions which very important role in integrating/inserting script or stylesheet into WordPress header. These functions are wp_register_style(), wp_enqueue_script() and wp_enqueue_style()

The correct method of adding a script/stylesheet into WordPress header is: first register that script/CSS Stylesheet, enqueue then print on a hook. Here is the sample

function your_function() {
wp_register_script('myScript', WP_PLUGIN_URL . '/myScript/myScript.js' );

wp_register_style('myStyle', WP_PLUGIN_URL . '/myScript/myStyle.css');

add_action('wp_head', 'your_function',1);
/* The first parameter is the hook name in your template. The second  parameter is the name of the function and the third is the priority.*/

The function above will safely enqueue your Script and CSS Stylesheet, telling WordPress that these stylesheet are needed on the front-end of the WordPress website. When WordPress outputs the HEAD section of the site, it will insert script and CSS Stylesheet into the HEAD section of the front-end of the site. So the stylesheet or script will now be ready for use. By using the ‘wp_enqueue_script()’ and ‘wp_enqueue_style()’ functions we are letting WordPress know we need a script loaded as a result WordPress can track what CSS stylesheet or script files need to be inserted via the ‘wp_header()’ function.

closeThis post was published 3 years 17 days ago which may make its no longer appropriate to current circumstances, this post may even be damaged or corrupted. This site is not responsible for any misunderstanding.
Please contact us to notify the damage of this content if you find this content corrupted/missing/broken.

Related post:

No related posts.

Use the social buttons below to add it on your favorite social sites to get the latest updates. Not sure about these options? Learn more about RSS and social bookmarking

{ 2 comments… read them below or add one }

1 lotteryticketsuk February 24, 2012 at 9:21 pm

Great guide, I'm learning more and more about WordPress every day thanks for articles and writers like you.


2 blogwawan March 8, 2012 at 4:14 pm

Cool,i am being learn how to Javascript on Header WordPress,
i am newbie in blogging world,thanks for the article,your tutorial usefully


Leave a Comment

Previous post:

Next post: