In a previous tutorial you would of learnt how to attach extra data to your single posts by creating custom post meta boxes. One way you can use this tutorial is to create a custom post meta box to style individual single posts differently to the others. We can use the custom meta box to add CSS we want to style the posts. All you need to do is create your custom meta box, then copy then following inside your header.php inside the head tag.
<?php
if (is_single()) {
$single_css_styling = get_post_meta($post->ID, 'single_css_styling', true);
if (!empty($single_css_styling)) { ?>
<style type="text/css">
<?php echo $single_css_styling; ?>
<style>
<?php }
} ?>
With this code in the header.php it will check if the single post has meta data of single_css_styling attached to it. If it is found then we can add a new style tag to the head tag with the new styling inside. When Wordpress displays the single posts on the page it will automatically add CSS classes to the post tag by using the Wordpress function post_class().
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
</article>
This function will output the following CSS classes. - .post-id
- .post
- .attachment
- .sticky
- .hentry (hAtom microformat pages)
- .category-ID
- .category-name
- .tag-name
- .format-name
You can then use any of the above CSS classes to style your page, one of the classes that will always be there will be the .post class. Now inside the custom meta box just add any styling you want.
.post{
background:red;
}
On another post put
.post{
background:blue;
}
This is how you can style individual post differently in Wordpress using custom post meta boxes.