how can i Add Custom JavaScript and Stylesheet in header.php file

  • Hi,

    I have doubt in WordPress 3.1.2.. How can i add my custom .js files and Stylesheet files in header.php file.

    I placed in my .js files in my js folder, and stylesheet files in my css folder these folder are in my themes folder. Even so, it doesn’t work.

    for example:

    I used like this in my header.php file

    <!-- new css and js file for content scroll start -->
<?php if(is_page()){ ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?> /css/jquery.jscrollpane.css"> <?php } ?>
<?php if(is_page()){ ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?> /css/demo.css"> <?php } ?>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/demo.js"></script>
<script type="text/javascript" id="sourcecode">
	$(function(){
		$('.scroll-pane').jScrollPane();
	});
</script>
<!-- css & js end -->
Viewing 3 replies - 1 through 3 (of 3 total)

  • First, the best practice way to implement custom scripts and stylesheets is to register and enqueue them, rather than hard-coding them into the document head.

    See here for an explanation for enqueueing stylesheets.

    Enqueueing scripts is much the same, except that the script is first registered, and then enqueued. It would look something like this:

    function mytheme_custom_scripts() {

	if ( ! is_admin() ) {
		$scriptsrc = get_stylesheet_directory_uri() . '/js/';
		wp_register_script( 'myhandle', $scriptsrc . 'myscript.js', 'jquery', false );
		wp_enqueue_script( 'myhandle' );
	}

}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

    Finally: if you are going to use any custom version of jQuery, any version other than the core-bundled jQuery, you must first deregister the core jQuery, and then register your own. It is VERY important that this deregister/register be implemented only on the front end, and not in the admin area.

    Chip Bennett,
    Your solution is great. There is one problem with it though. You are missing the version when calling the wp_register_script function. Even though it is optional, you call calling “false” in its place, which defaults to 0 as the version, not what the boolean is meant for. The false is meant for whether you are putting the code in the <head> or at the end of the <body>. Therefore your solution modified would look like this:

    function mytheme_custom_scripts() {

	if ( ! is_admin() ) {
		$scriptsrc = get_stylesheet_directory_uri() . '/js/';
		wp_register_script( 'myhandle', $scriptsrc . 'myscript.js', 'jquery', '1.0',  false );
		wp_enqueue_script( 'myhandle' );
	}

}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how can i Add Custom JavaScript and Stylesheet in header.php file’ is closed to new replies.