Add META Tags, Scripts, and Stylesheets to the WordPress Header and Footer

By  on  

There are times where you may want to conditionally inject stylesheets or scripts into your header or footer, or you'd simply prefer to inject those resources via PHP instead of place the HTML in template files directly.  WordPress' ever-powerful add_filter function provides the a method for injecting stylesheets or scripts into the header, as well as scripts into the footer.  Here's how!

// Add items to the header!
function shimify() {
	echo '<!--[if lt IE 9]><script src="/wp-content/themes/mytheme/shim.js"></script><![endif]-->';
	echo '<style>/* some styles here */</style>';
	echo '<meta http-equiv="content-type" content="text/html;" />';
}
add_filter('wp_head', 'shimify');

// Add items to the footer
function add_requirejs() {
	echo '<script src="/wp-content/themes/mytheme/requirejs.js"></script>';
}
add_filter('wp_footer', 'add_requirejs');

The add_filter function, which accepts the filter type, action function, and optional priority, provides the means to inject stylesheets and JavaScript files wherever desired.  You may want to conditionally inject a different Google Analytics account if you use a WordPress install that loads different content depending on hostname.  Do not use this technique if you're adding stylesheets or scripts for your plugin -- those should be added with the proper WordPress functions!

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement that...

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

Discussion

  1. chrismccoy

    you should really avoid doing it that way, echoing tags, you should use wp_enqueue_script and wp_enqueue_style instead

    • For plugins sure, but it’s not as important for theme scripts. Additionally, these techniques could be used for META tags too.

  2. This definitely is not a proper way of including scripts in WordPress and should be avoided. Function wp_enqueue_script has a parameter to include the scripts in the footer and should be used instead of the above methods.

    With built in WordPress function you can easily control script dependencies and make sure that nothing is included twice …

  3. If you want to add css and js to individual posts or pages you could use my plugin perpost-code: http://wordpress.org/extend/plugins/superslider-perpost-code/ it provides a meta box on the edit screen for your css or javascript, it also provides a shortcode to display that same code into your post, check it out, you’ll love it!

    I also agree with Codeforest, wp_enqueue_script and wp_enqueue_style are the way to go, especially if you are using a minify plugin, they usually only minify code and script loaded via the enqueue function

  4. SpencerW

    I agree with the others this is not the right approach. You should use the right enqueue command. Apart from duplication, it allows you to also specify dependencies such as jquery for your javascript.
    Also performance plugins that rely on finding the js/css for a page as part of the
    combination and minification process will fail.

    You can limit specific code and css to a specific page or post using templates or with a plugin as already recommended above.

  5. Joe wattson

    hi David, I know about adding javascripts at the footer and header of the page. But adding stylesheet at the bottom of the page is something new and it drives me crazy? Is it really possible to use stylesheets at the footer?

  6. ou may want to conditionally inject a different Google Analytics account if you use a WordPress install that loads different content depending on hostname, allows you to also specify dependencies such as jquery for your javascript.

  7. alin

    This method can be useful when you going to make a theme with unlimited colors. This helps me thanks.

  8. This technique is perfect. WordPress themselves use it in the Twenty Seventeen theme (which should help some of you understand when this was written since comments aren’t dated).

  9. If you really want to go nuts, this technique can be used alongside NOWDOC to asynchronously load all of your scripts in parallel. https://wordpress.stackexchange.com/a/263733/117731

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!