Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

Using custom CSS and Javascript in WordPress posts

Using custom CSS and Javascript in WordPress postsToday while writing The secrets to using custom web fonts I ran into a bit of a snag. I wanted to show several CSS driven examples within the post, but the WordPress editor would remove anything I added. I have dealt with this issue in the past, usually in a clunky manner or even hosted separate example pages. This time though I really wanted the font examples to show up within the actual page content and I didn’t want to add more styles to my WordPress theme. The method I used is remarkably easy and can be implemented in about two or three minutes.

For custom CSS and JavaScript within the post, the best place to put these snippets is embedded right into the HTML head of that post. This is super easy to do with WordPress custom fields and a slight modification to your WordPress theme.

What are custom fields?

Custom Field Screen OptionsIf you don’t know what custom fields are in WordPress then step aboard, they are another powerful tool to add to your arsenal and easy to understand. The first step is making sure they are displayed on your Edit Post admin page. Create a new post and look to the top right corner of you admin interface. You should see Screen Options. Click it and then make sure Custom Fields is ticked in the Show on screen check box options. Now if you look below your post you should see a panel called Custom Fields.

A quick update to your theme

Either download your header.php file or use the WordPress editor to paste the snippet of code below into it. The snippet below should go right before your closing </head> tag.

<?php
if (is_single()) {
     if ($custom_header = get_post_meta($post->ID, 'custom_header', true)) {
     echo $custom_header;
     }
}
?>

This example allows you to post any type of data into your page head and allows you to specify the type of tag such as link style or script. The code above says: is this a single page? If so get the custom field named custom_header and echo/print it out. Now you are done and can save/upload the file to your server.

Now in your custom fields panel enter a new custom field of custom_header and add the styles or JavaScript you need. In the example below you would then add .myCustomStyle to your post in the HTML tab. I find using span tags in the editor is the best way to add custom classes.

Custom Fields

You can add any kind of custom code into the header using the same method. Read more about custom fields in the WordPress codex.

My custom CSS isn’t showing up

If your CSS classes seem to be having no affect it’s probably because they are being overridden by your own theme CSS. Adding the !important declaration to any problem styles will fix this issue forcing them to override the style that is overriding your custom style, see the example below.

font-size:20px !important;
color:#1f1f1f !important;

That’s all there is to it, happy coding.

4 Comments to “Using custom CSS and Javascript in WordPress posts”

  • Warren

    Awesome stuff. That helped me a ton. I had a script that I needed to run only on posts but it was breaking every other page that didn’t have the elements it called. What made it more difficult is that it had a secondary element that needed to be called to activate the script. So I added the code above to footer.php, changing customer_header to custom_footer and adding that as a second custom field to the post and it worked perfectly.

    So if you ever have a script that also has a call which WordPress adds all sorts of CData bits to, call it from footer.php.

  • Colin

    Smart! All the custom CSS I put in WordPress editor (HTML view) will be removed by WordPress automatically when switching views. This did the trick.
    @Warren, if you use jQuery document ready function, you shouldn’t have javascript errors when putting on the header.

    Cheers,

  • Tracey

    I occasionally embed a SWF file in a post. I’ve been looking for a method of including the javascript in the of the page without cluttering my header.php file with the javascript for each SWF file.

    I thought this method was perfect for my purposes with a little tweaking. I removed the “If single” condition. However, I found that it only works when the post is the 1st post on the index page. It still works on the single page but I need it to work on the Home page while the post appears there (I show the 5 most recent posts on the Home page).

    How can I accomplish this?

    Thanks for any help you can give me!

  • Sean

    Hi i am trying to implement your example here into a wordpress post. it shows up pretty funny tho. The code is from “http://css-tricks.com/examples/SlideupBoxes/” and the post i’m putting it on is “http://www.manabreakfast.com/?p=1020” I can’t seem to figure out how to get that slideup box or any other cool css stuff into a post. I use a theme that allows me to just insert a snippet of code into the or or whatever so that makes it easy but I don’t know where to enter what code lol.

Responses:

Your comments are important, join the conversation