Use Custom CSS For Individual WordPress Posts

24th September 2009

Use Custom CSS For Individual WordPress Posts Use Custom CSS For Individual WordPress Posts

There are likely to be time when you wish to style a post or page in a specific way that is different from the template that you are using for all other pages. The typical way that this is often achieved is simply through adding CSS code directly into your post – however, this is a bit quick and dirty and not ideal if you want to make changes later on.

A much cleaner approach is to use a custom field that contains all of your CSS code – this is better practice as it keeps your content and the styling of your content separate. It’s also very simple to do – start by opening your header.php file and insert the following code between the <head> and </head> tags:

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

Then save the page. You can now customize the styling of a page or post by creating a custom field called “custom_css” with your CSS code as the value.

And that’s it. Nice and simple!

Enjoy This Post? Please Consider Sharing :-)

  • Twitter
  • StumbleUpon
  • Facebook
  • Digg
  • del.icio.us
  • Reddit
  • Technorati