How can I change the dashboard appearance?

1 Views

Anyone can recognize the current WordPress backend, but I don’t want that. I want to change it using my own design and I want to have a seamless navigating experience for my users. How can I change the dashboard appearance? I googled a lot of posts and questions, and it seems like you can only change the CSS of most things and some people were using hooks to add their own code and what not.

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. I use a custom include file that I created to modify the dashboard. Some of the hooks and filters are commented out by default but most of the stuff is here to remove menus, change wp logos, remove meta boxes, remove dashboard widgets, etc…

    <?php
/*  
File: cleanup-dashboard.php
Description: Clean up and customize the dashboard
Author: Chris Olbekson
Author URI: http://c3mdigital.com
*/

//Dashboard Action Hooks
add_action( 'admin_init', 'c3m_admin_style' );
add_action( 'admin_init', 'c3m_remove_dashboard_meta' );
add_action( 'admin_init', 'c3m_remove_post_meta' );
add_action( 'admin_menu', 'c3m_remove_admin_menus' );
add_action( 'admin_menu', 'c3m_remove_admin_submenus' );
add_filter( 'admin_user_info_links', 'c3m_user_greeting' );
add_action( 'admin_head', 'c3m_custom_logo' );
add_action( 'login_head', 'c3m_custom_login_css' );
add_action( 'login_head', 'c3m_custom_login_logo' );
add_filter( 'admin_footer_text', 'c3m_remove_footer_admin' );
add_action( 'init', 'c3m_change_post_object_label' );
add_action( 'admin_menu', 'c3m_change_post_menu_label' );
add_filter( 'admin_body_class', 'c3m_admin_body_class' );


//Dashboard CSS
function c3m_admin_style() {
wp_enqueue_style( 'c3m_admin_css', get_bloginfo( 'stylesheet_directory' ) . '/_/admin/c3m-admin.css', false, '1.0', 'all');
}

//Removes the dashboard widgets
function c3m_remove_dashboard_meta() {
    remove_meta_box('dashboard_incoming_links', 'dashboard', 'normal');
    remove_meta_box('dashboard_plugins', 'dashboard', 'normal');
    remove_meta_box('dashboard_primary', 'dashboard', 'normal');
    remove_meta_box('dashboard_secondary', 'dashboard', 'normal');
    remove_meta_box('dashboard_incoming_links', 'dashboard', 'normal');
    remove_meta_box('dashboard_quick_press', 'dashboard', 'side');
//  remove_meta_box('dashboard_recent_drafts', 'dashboard', 'side');
    remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
}

function c3m_remove_post_meta() {
//  remove_meta_box( 'commentstatusdiv', 'page', 'normal' ); 
//  remove_meta_box( 'commentstatusdiv', 'post', 'normal' ); 
//  remove_meta_box( 'commentsdiv', 'page', 'normal' );
//  remove_meta_box( 'commentsdiv', 'post', 'normal' );  
//  remove_meta_box( 'authordiv', 'page', 'normal' );
//  remove_meta_box( 'authordiv', 'post', 'normal' ); 
//  remove_meta_box( 'trackbacksdiv', 'post', 'normal' );
//  remove_meta_box( 'trackbacksdiv', 'page', 'normal' );
//  remove_meta_box( 'postcustom', 'post', 'normal' );
//  remove_meta_box( 'postcustom', 'page', 'normal' );
//  remove_meta_box( 'slugdiv', 'post', 'normal' );
//  remove_meta_box( 'slugdiv', 'page', 'normal' );
  //remove_meta_box( 'excerptdiv', 'post', 'normal' );
//  remove_meta_box( 'page_choicediv', 'post', 'normal' );
//  remove_meta_box( 'page_choicediv', 'sponsor_ad', 'normal' );
}

//Remove top level admin menus
//Remove top level admin menus
function c3m_remove_admin_menus() {
    remove_menu_page( 'edit-comments.php' );
    remove_menu_page( 'link-manager.php' );
    remove_menu_page( 'tools.php' );
//  remove_menu_page( 'plugins.php' );
//  remove_menu_page( 'users.php' );
//  remove_menu_page( 'options-general.php' );
}

//Remove sub level admin menus
function c3m_remove_admin_submenus() {
    remove_submenu_page( 'themes.php', 'theme-editor.php' );
    remove_submenu_page( 'themes.php', 'themes.php' );
    remove_submenu_page( 'edit.php', 'edit-tags.php?taxonomy=post_tag' );
    remove_submenu_page( 'edit.php', 'edit-tags.php?taxonomy=category' );
//  remove_submenu_page( 'themes.php', 'nav-menus.php' );
//  remove_submenu_page( 'themes.php', 'widgets.php' );
//  remove_submenu_page( 'plugins.php', 'plugin-editor.php' );
//  remove_submenu_page( 'plugins.php', 'plugin-install.php' );
//  remove_submenu_page( 'users.php', 'users.php' );
//  remove_submenu_page( 'users.php', 'user-new.php' );
//  remove_submenu_page( 'options-general.php', 'options-writing.php' );
//  remove_submenu_page( 'options-general.php', 'options-discussion.php' );
//  remove_submenu_page( 'options-general.php', 'options-reading.php' );
//  remove_submenu_page( 'options-general.php', 'options-discussion.php' );
//  remove_submenu_page( 'options-general.php', 'options-media.php' );
//  remove_submenu_page( 'options-general.php', 'options-privacy.php' );
//  remove_submenu_page( 'options-general.php', 'options-permalinks.php' );
}


//This Adds an extra body class to a custom post type editor screen to target with css
function c3m_admin_body_class( $classes ) {
    global $wpdb, $post;
    $post_type = get_post_type( $post->ID );
    if ( is_admin() && ( $post_type == 'sponsor_ad' ) ) {
        $classes .= 'post_type-' . $post_type;
    }
    return $classes;
}


//Replaces Howdy with Welcome pretty self explanitory
function c3m_user_greeting( $greet_msg ) {
    $greet_msg = str_replace( 'Howdy,','Welcome', $greet_msg);
    return $greet_msg;
}


//Admin Header Logo  this replaces the WordPress logo with your own
function c3m_custom_logo() {
   echo '
      <style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/logo_wnd_small.png) !important; width:98px; }
      </style>  
   ';
}
//Admin Footer Logo Same as above but for the footer
function c3m_remove_footer_admin() {
    echo '<div id="wlcms-footer-container">';
    echo '<a target="_blank" href="http://c3mdigital.com"><img style="width:80px;" src="'.get_bloginfo('template_directory').'/images/developer-logo.png" id="wlcms-footer-logo">Custom WordPress Development</a>';
    echo '</div><p id="safari-fix"';
}

//Login Screen CSS Custon css to replace the WP logo on the login screen
function c3m_custom_login_css() { 
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/_/admin/c3m-login.css" />'; 
}

//Login Screen Logo this incjects your logo css into the login css page
function c3m_custom_login_logo() {
    echo '<style type="text/css">
    h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo_wnd_new.png) !important; margin-bottom: 20px; height:100px; }
    </style>
    <script type="text/javascript">
        function loginalt() {
            var changeLink = document.getElementById('login').innerHTML;
            changeLink = changeLink.replace("http://wordpress.org/", "' . site_url() . '");
            changeLink = changeLink.replace("Powered by WordPress", "' . get_bloginfo('name') . '");            
            document.getElementById('login').innerHTML = changeLink;
        }
        window.onload=loginalt;
    </script>
    ';
}

//This changes the name of Posts to something different
function c3m_change_post_menu_label() {
    global $menu;
    global $submenu;
    $menu[5][0] = 'Post Boxes';
    //$menu[10][0] = 'Files';
    $submenu['edit.php'][5][0] = 'Post Boxes';
    $submenu['edit.php'][10][0] = 'Add Post Box';
    //$submenu['edit.php'][15][0] = 'Status';
    echo '';
}

//Changes the label for the posts we changed above
function c3m_change_post_object_label() {
    global $wp_post_types;
    $labels = &$wp_post_types['post']->labels;
    $labels->name = 'Post Boxes';
    $labels->singular_name = 'Add New Post Box';
    $labels->add_new = 'Add Post Box';
    $labels->add_new_item = 'Add Post Box';
    $labels->edit_item = 'Edit Post Box';
    $labels->new_item = 'Post Box';
    $labels->view_item = 'View Post Box';
    $labels->search_items = 'Search Post Boxes';
    $labels->not_found = 'No Post Boxes found';
    $labels->not_found_in_trash = 'No Post Boxes found in Trash';
}

//Post Edit Columns Customizes the post edit columns by adding the featured image as a thumbnail and shows the excert 
// Add to admin_init function
add_filter( 'manage_edit-post_columns', 'add_new_post_columns');
add_filter( 'manage_edit-post_columns', 'unset_the_defaults');
add_action( 'manage_posts_custom_column', 'testimonial_custom_column', 10, 2);
add_action( 'manage_posts_custom_column', 'testimonial_source_column', 10, 2);

function unset_the_defaults($defaults) {
    unset($defaults['author']);
   //unset($defaults['title']);
    return $defaults;

}

function add_new_post_columns($dfaults) {
    $dfaults['page_choice'] = 'Displayed On';
    $dfaults['article_source'] = 'Source';
    $dfaults['post_box_excerpt'] = 'Post Box Excerpt';
    $dfaults['post_box_image'] = 'Post Box Image';
    return $dfaults;
}

function testimonial_custom_column($column_name, $post_id){
    $taxonomy = $column_name;
    $post_type = get_post_type($post_id);
    $terms = get_the_terms($post_id, $taxonomy);

    if (!empty($terms) ) {
        foreach ( $terms as $term )
            $post_terms[] ="<a href='edit.php?post_type={$post_type}&{$taxonomy}={$term->slug}'> " .esc_html(sanitize_term_field('name', $term->name, $term->term_id, $taxonomy, 'edit')) . "</a>";
            echo join('', $post_terms );
    }
    else echo '<i>No Display Page Set. </i>';
}


function testimonial_source_column($column_name, $post_id) {
    global $post; global $prefix;
    if ($column_name == 'article_source') {
        echo get_post_meta($post_id, $prefix.'article-source', TRUE);
    }
    elseif ($column_name == 'post_box_image') {
       if ( get_post_meta($post_id, $prefix.'post_box_image', TRUE) ) { 
        echo '<img src="' .get_post_meta($post_id, $prefix.'post_box_image', TRUE). '" style="max-width:40%; max-height:40%;" />'; 
        }
        else echo 'No Post Box Image Set';
    }
    elseif ($column_name == 'post_box_excerpt') echo substr($post->post_excerpt, 0, 150) . '...';

    }

  2. There is indeed little information available on how to customize the Dashboard. Lately I have been looking around too and have bookmarked a few of what seem to have good tips.

    Have you had a look at these threads?

  3. You can modify the look and feel of the administration area either via CSS or creating a plugin to do more. There are some really nice admin themes out there that make it less generic.

    Fluency is an admin theme that I have found is a nice replacement.

    Details on how to create the admin themes can be found in the codex here