How To Add Extra CSS In WordPress Posts With Custom Fields

Sometimes, you need to add some extra CSS to a specific WordPress post to style some elements of the page or post. You can add the CSS code directly from post editor, but it’s not a neat way to add custom styles to your post.

In this tutorial, I’ll show you how to add extra CSS in WordPress posts with the help of custom fields. Plus, the CSS will appear on your site’s header.

First, add following code to your WordPress theme’s header.php file:

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

Now, whenever you want to add some extra CSS to a post, you’ll just have to put your custom CSS styles in a custom field named css. Neat, uh?