WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Jan 24 2012

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'.
[php highlight="22,23,24"]
/**
* 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' ) );
}
[/php]

Next you will need a method to output the necessary CSS to display your icon.
[php highlight="42,43"]
/**
* 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' ) );
}
[/php]

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

/**
* 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
}
[/php]

Written by Travis Smith · Categorized: WordPress

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Jordan says

    May 19, 2012 at 12:27 pm

    Awesome -got any code for changing the login logo in Genesis? I don’t want to rely on a plugin for this. Tried this code, but -no go for me.
    function login_logo() {
    echo ‘
    h1 a { background-image: url(‘.get_bloginfo(‘template_directory’).’/images/admin-logo.png); }
    ‘;
    }
    add_action(‘login_head’, ‘login_logo’);

    Reply
    • Travis Smith says

      May 19, 2012 at 2:42 pm

      Hello Jordan,

      That’s actually a WordPress deal. The hook login_head occurs in the header, so you will need to do inline style. So something like this:
      [php]<?php
      add_action( ‘login_head’, ‘wps_login_logo’ );
      /**
      * Echoes HTML inline style.
      */
      function wps_login_logo() {
      echo ‘<style type="text/css" media="screen">’;
      echo ‘h1 a { background-image: url("’ . CHILD_URL . ‘/images/admin-logo.png"); }’;
      echo ‘</style>’;
      }
      [/php]

      Or, if you want to use a custom stylesheet for the login area:
      [php]<?php
      add_action( ‘login_enqueue_scripts’, ‘wps_enqueue_login_style’ );
      /**
      * Enqueues login style.
      */
      function wps_enqueue_login_style() {
      wp_enqueue_style( ‘wps-login-style’, CHILD_URL . ‘/css/login.css’ );
      }
      [/php]

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in