Add Inline CSS To Custom Field & Style Each Single Post & Page Differently

The 4 code snippets in this tutorial enable you to style each post or page differently. To do this, you simply add some PHP code to your child themes functions file and create a custom field and add the CSS to the custom fields value field like you see in the following image:

This enables you to store the CSS rules in the value field of each post.page edit screen which only apply to 1 specific page or post. No need to use the post or page i.d in your stylesheet which would be very time consuming to manage.

2nd Method

You can also code it so you only need to add the value for 1 CSS property to the custom fields value field rather than add the entire CSS rule which is already added in the custom PHP code like this:

If you inspect the element, you’ll find the inline CSS has overridden the CSS from the child theme’s style.css file as you can see in the following example:

Here’s the code for logged in members:

Related Tutorials

• Inline Style Post Category Links Differently Using Color Picker
• Add Meta Box To Edit Post Screen For Inline Styles
• Code To Add Color Picker To Meta Box On Edit Post Screens
• Add Color Picker To Edit Post Screen To Style Specific Single Post Elements