Embed Custom CSS in Your Single Posts with Custom Fields

89

There will be times when you want to use custom CSS in your single posts. In this tutorial we will share one of the ways that you can easily embed custom CSS in your single posts in WordPress with the use of Custom Fields.

First you will need to open your header.php and insert this code somewhere in between <head></head> codes.

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

Once you have done that you can add a custom field in each post with the name customstyle and add the css codes in there.

For example if you want the a certain image to have border you can add:

#coolimageclass{border: 5px solid #ccc;}

Use the format above and you now have custom CSS for your single posts.