Quick Snippet Friday: Custom CSS Styles In A WordPress Post

Today, we are going to add a custom css container in our WordPress edit post screens. I honestly believe this should be incorporated into WP itself, but at least they give us the ability to write something to do it. To put custom css styles into a single WordPress post, you have a few options. However, none of the options are worth a damn but one.

Option one, put the styles into your themes stylesheet. This option bloats the sheet to hell and will increase page load times on all pages, instead of just the page that needed the style to begin with.

Option two, there is a way to use custom fields to include a custom stylesheet that can have single post styles, but this is way to much effort for what we are trying to do.

So we come to this, a box, listed on every post, but doesn’t insert any styles unless the box has data. This does exactly what we should all be wanting if we care about SEO and user interactions. Well, and there is the thing about less work to accomplish something that should be an easy task.

Ok, so here is the snippet:

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

No need to edit anything on that bad boy. It is a true, copy and paste snippet. So select it, copy it. Now, open your themes functions.php file. Go to the very bottom of the code, and paste it right before the very last line, which should be ?>.

NOTE: If you are using a child theme, and your version of the theme does not include a functions.php. You can make a functions.php file, and just paste the code between <?php [paste code here] ?> and call it good. This will still use the parents functions, and just started an extension for your own. WordPress is pretty freakin sweet, eh?

Ok, so now you can go to your WordPress admin screen and edit any post or make a new one. You will have a new Custom CSS box to write some sweet css per post if needed. WOOOOHOOOO!!!!