How to Add a Custom Screen Icon for Genesis Admin Pages

In a previous post I discussed how to create a child theme admin page, and talked about a few of the new features of Genesis 1.8, . However, one thing I didn’t discuss in the creation of the new admin pages is setting a custom screen icon.

While this may or may not make Genesis core, it is a simple addition. So in your __construct() method with $page_ops, enter a screen icon of ‘custom’.

/**
 * Create an admin menu item and settings page.
 *
 * @since 1.0.0
 */
function __construct() {

	// Specify a unique page ID.
	$page_id = 'child';

	// Set it as a child to genesis, and define the menu and page titles
	$menu_ops = array(
		'submenu' => array(
			'parent_slug' => 'genesis',
			'page_title'  => 'Genesis - WPS Starter Settings',
			'menu_title'  => 'WPS Starter Settings',
			'capability' => 'manage_options',
		)
	);

	// Set up page options. These are optional, so only uncomment if you want to change the defaults
	$page_ops = array(
		'screen_icon'       => 'custom', // see $this->screen_icon() below
	);		

	// Give it a unique settings field.
	// You'll access them from genesis_get_option( 'option_name', CHILD_SETTINGS_FIELD );
	$settings_field = CHILD_SETTINGS_FIELD;

	// Set the default values
	$default_settings = array(
		'phone'   => '',
		'address' => '',
	);

	// Create the Admin Page
	$this->create( $page_id, $menu_ops, $page_ops, $settings_field, $default_settings );

	// Initialize the Sanitization Filter
	add_action( 'genesis_settings_sanitizer_init', array( $this, 'sanitization_filters' ) );
}

Next you will need a method to output the necessary CSS to display your icon.

/**
 * Create an admin menu item and settings page.
 *
 * @since 1.0.0
 */
function __construct() {

	// Specify a unique page ID.
	$page_id = 'child';

	// Set it as a child to genesis, and define the menu and page titles
	$menu_ops = array(
		'submenu' => array(
			'parent_slug' => 'genesis',
			'page_title'  => 'Genesis - WPS Starter Settings',
			'menu_title'  => 'WPS Starter Settings',
			'capability' => 'manage_options',
		)
	);

	// Set up page options. These are optional, so only uncomment if you want to change the defaults
	$page_ops = array(
		'screen_icon'       => 'custom', // see $this->screen_icon() below
	);		

	// Give it a unique settings field.
	// You'll access them from genesis_get_option( 'option_name', CHILD_SETTINGS_FIELD );
	$settings_field = CHILD_SETTINGS_FIELD;

	// Set the default values
	$default_settings = array(
		'phone'   => '',
		'address' => '',
	);

	// Create the Admin Page
	$this->create( $page_id, $menu_ops, $page_ops, $settings_field, $default_settings );

	// Initialize the Sanitization Filter
	add_action( 'genesis_settings_sanitizer_init', array( $this, 'sanitization_filters' ) );

	// Add custom screen icon
	add_action( 'admin_head' , array( $this, 'screen_icon' ) );
}

Now you will need to create the method within the class extension.

/**
 * Custom Admin screen icon
 *
 * See /lib/classes/sanitization.php for all available filters.
 *
 * @since 1.0.0
 */
public function screen_icon() { ?>
<style>
	#icon-custom { background-image: url('<?php echo WPS_ADMIN_IMAGES . '/staff_32x32.png'; ?>'); background-repeat: no-repeat; }
</style>
<?php
}