• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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:

Register for full access

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

Custom Fields

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.