Add Meta Box To Edit Post Screen For Inline Styles

This tutorial provides the code which enables you to add CSS to a custom meta box to style single posts and pages.

#Demo Video

Shows the custom meta box added to the Edit Post admin screen which enables you to paste CSS rules to style posts individually without the use of a plugin.

Based on the following question from a member for the Genesis community :

I would like to add an option on theme customizer. This option is to add “Above the Fold” css of each page of my website. I would like it to be an option similar to “Header/Footer Script” and when I enter the option a text box appears for each page of my website. You can recommend me some tutorial or examples.

The inline CSS outputs immediately after your child themes style sheet loads as you can see in this screenshot :

This enables you to add CSS rules on the edit screen to style single posts and pages.

#Installation

There’s 2 steps relating to usage of files in the download folder :

Step 1 : Upload the folder named box to your child themes root directory.

Step 2 : Add the following line of PHP code to the end of your child themes functions.php file :

include_once( get_stylesheet_directory() . '/box/inline-css.php' );

Register or login to access the download folder :

Related Tutorials

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