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.
I've followed this process to the letter on two sites (one being a brand new installation of WP with 2010 theme) and absolutely cannot get this to work. Pasted php code into header.php file just before </head> tag as described. Gave sample post text the folowing id: <p id="example">Text text text</p> Created new custom field: customstyle and gave it the value p#example {font-size: 20px;} Unfortunately nothing happened. Am I missing something?
- spam
- offensive
- disagree
- off topic
Like