Including CSS & JavaScript in wordpress posts using Custom Fields

custom_code

If you have ever tried to include code in a wordpress post you may have gone through hell trying to get it to output correctly; WordPress’ built in functions for formatting text (autop and texturize) mangle your code making it non-functional.

I’ve tried many solutions in the past, such as disabling wordpress’ formatting functions, however, this is not ideal -especially if you rely on them to clean up your text and properly encode characters. On top of that its not even valid to include certain things such as CSS in the body of a xHTML document.

The solution? Custom fields. This post will show you how.

First we need to prepare your template. Open your templates header.php file and insert the following php code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
if (is_single()) {
  if ($css = get_post_meta($post->ID, 'custom_css', true)) {
    echo '<style type="text/css">'.$css.'</style>';
  }
  if ($js = get_post_meta($post->ID, 'custom_js', true)) {
    echo '<script type="text/javascript">
    jQuery.noConflict();
    (function($) {
      '.$js.'
    })(jQuery);
    </script>';
  }
}
?>

When a post is being viewed (single page) this code will check if it contains the custom fields and display them. Notice in this case I’m using jQuery noConflict; this part is optional (you may not be using jQuery at all) so if you don’t want jQuery just use:

1
2
3
4
5
6
7
8
9
10

<?php
if (is_single()) {
  if ($css = get_post_meta($post->ID, 'custom_css', true)) {
    echo '<style type="text/css">'.$css.'</style>';
  }
  if ($js = get_post_meta($post->ID, 'custom_js', true)) {
    echo '<script type="text/javascript">'.$js.'</script>';
  }
}
?>

Whist writing a post, add two custom fields: custom_js and custom_css. Fill these with any example code you need to include in the post.

Adding custom css

Adding custom css

That’s it! The code will now show in the page head, perfect for CSS and JS example code.

And as you can see we can include additional styles in our posts.

I hope this technique comes in handy.

Found this post useful? Why not buy me a coffee!

Related Entries

8 Responses to “Including CSS & JavaScript in wordpress posts using Custom Fields”

RSS feed for comments on this post.

  1. Asif Shabbir says:

    Thanks for posting it i can searching for it from couple of days.

    ReplyReply

    Comment made on May 7, 2009 at 11:53 am

  2. blogger says:

    would be more usefull for different scripts if you check for custom_js_postid oder postid-custom_js.

    so you can insert different scripts in different post. not alwaays only one script in all posts.

    right?

    ReplyReply

    Comment made on June 25, 2009 at 10:01 am

  3. blogger says:

    check this approach similar to yours,

    http://www.speedbreeze.com/2008/03/19/how-to-individually-add-javascript-to-wordpress-posts/

    and a wp-plugin to allow js in wp-posts:
    http://www.automateyourbusiness.com/updates/2007/07/18/javascript-in-wordpress-posts/

    regards.

    ReplyReply

    Comment made on June 25, 2009 at 10:05 am

  4. Pritush says:

    I am trying to use this in my blog’s page but i am not able to to do it , i did as you said but java and css doesnot seems to get loaded, i am trying to use tabber js in ony of my page

    ReplyReply

    Comment made on January 16, 2010 at 4:47 am

  5. Omry says:

    Thanks! it’s working great for me!
    just what i was looking for!

    ReplyReply

    Comment made on April 14, 2010 at 8:53 pm

  6. lilach says:

    tank’s for the grate code
    is it possible to do it for pages? it could be very useful for me.

    ReplyReply

    Comment made on April 23, 2010 at 1:39 am

  7. Mike Jolley says:

    @lilach: Should work in posts and pages.

    ReplyReply

    Comment made on April 23, 2010 at 1:11 pm

  8. Jon Wright says:

    Thanks! In conjunction with this resource:
    http://www.somacon.com/p141.php
    … I managed to do exactly what my rather demanding customer needed with minimum fuss.

    ReplyReply

    Comment made on August 19, 2010 at 11:18 am

Leave a Reply

About this site

Blue Anvil is the online web design journal & portfolio of , a web designer from Norfolk, England. Read More »
MiniCard Theme for WordPress

  • Featured work - More

    • Beefjack
    • Integrity
    • theotaku.com

  • Latest Tweet - More

    • RT @jameskoster: Free MacBook Pro vector; http://www.potatoestomatoes.co.uk/technical/free-macbook-pro-vector/ #vector #resource

  • Out of the blue - More

    • Closing the Forums

      Just posting to let current users know that I’m closing the forum on Blue-Anvil. This is mainly due to spam-registrations getting out of hand and being a general nuisance. I will be posting good topics as FAQ items within posts if applicable.

      Please note that you can still post and get help for my plugins/themes by posting on the wordpress.org website.

    • Show off your MiniCard!

      Are you a user of the WordPress MiniCard theme? Its been downloaded over 14,000 times so far!

      If you have used it as-is, made your own child-theme or done something creative with it, please show off your MiniCard’s in the comments, I’d love to see how the theme is being used!

    • Spam Stopper updated for WordPress 3.0

      My Spam Stopper plugin has been updated for WordPress 3.0 (version 3.1.3) – you can grab it here. Sorry this update took longer than my other plugins but this one gets less lovin’ – if you want to change that feel free to donate, spread the word, or rate it on the WordPress.org plugin page.

    • SexyBookmarks & Tr.im

      Just a notice to users of the brilliant http://www.sexybookmarks.net/ plugin by shareaholic – If you use tr.im (as I have on a few client sites) be aware tr.im has ceased operation so you may see errors on your blog or in your source code; it screwed up the background and headings on one of my blogs.

      To fix, go to sexybookmarks options, switch services in the “Which URL Shortener?” box, and tick the box to reset all short urls. Once done, your blog should return to normal.