Sometimes, you will have to use certain unique styles for specific posts in WordPress blogs. Of course, you can add it to main Stylesheet or embed the CSS styles into the posts itself. But, by doing that you’re basically littering your stylesheet with unnecessary customizations!
Here is a simple way of adding custom CSS to a specific post, by using custom fields. I’ve used this method for my two previous posts: CSS3 Box Shadow effect and How to create rounded corners with CSS3?.
Go to Dashboard > Appearance > Editor > header.php file. Then, insert the following piece of codes between the <head> and </head> tags.
<?php if (is_single()) {
$css = get_post_meta($post->ID, 'css', true);
if (!empty($css)) { ?>
<style type="text/css">
<?php echo $css; ?>
</style>
<?php }
} ?>
So, whenever you want to use custom CSS styles, create a new custom field with the name “css“, which can be found at the bottom of WordPress post editor and paste your custom CSS as the value.
Recently, I’ve found some great WordPress plugins which enables you to add single page per-post styles and scripts.
1. Art Direction – It allows you to add CSS only rather than “anything” (eg: Javascripts) which the next plugin able to do.
2. Include Custom Files – This great plugin enables you to add multiple stylesheets and javascripts files to a specific post.
One Reply to “Easiest way to embed custom CSS styles to your WordPress posts”