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

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.