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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Code To Add Color Picker To Meta Box On Edit Post Screens

This code creates a color picker meta box which loads on the Edit Post screen.

You can use the color picker to style any element on any single post like you see in the following demo video.

Demo Video

Shows how the color picker meta box can be added to the Edit post admin screen using screen options and used to style any element on any single post.

Tested using the Genesis Sample child theme by StudioPress however will work in any WordPress or Genesis child theme.

Code Installation

There’s only 1 step. Copy & paste the PHP code from the functions file in the download folder to the end of your child themes functions.php file and check the screen options to show the meta box on Edit Post screens.

Register or login to access the code in the download folder :

Register for full access

Related Code Snippets

  • Code Color Picker On Taxonomy Edit Screen To Style Post Meta On All Page Types Including Posts Page
  • Inline Style Post Category Links Using Color Picker
  • Add Color Picker To Edit Post Screen To Style Specific Single Post Elements
  • Add Color Picker To Edit Category Screen To Set Color For Posts In Each Category

Custom Fields Meta Box

Reader Interactions

Comments

  1. Steven Brettler says

    May 3, 2022 at 2:48 pm

    Could this be modified to also work on pages?

    Thanks

    Log in to Reply
    • Brad Dalton says

      May 3, 2022 at 3:15 pm

      Hello Steven. Modify the 4th parameter for the add_meta_box function $screen. See here where the code in functions from the download folder is modified between lines 34 – 45

      Log in to Reply

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.