I want to add a simple piece of code:

<img src="logo.png">

to the top of the admin menu. I know how to do it if I am just replacing a logo within an already existing class but there is no adminmenulogo class, how do I do this? Am i taking the wrong approach by using the add_action hook? I am new to developing plugins. Thanks.

function my_admin_menu_logo() {
What to put here? :)

add_action('admin_menu', 'my_admin_menu_logo');

I found a solution. I just added the image as a background to the adminmenuwrap class and added some padding at the top.

#adminmenuwrap {
width: 160px;
background-color: #e7e7e7;
background-image: url("https://www.google.dk/logos/doodles/2015/new-horizons-pluto-flyby-5641113681526784-res.png");
background-repeat: no-repeat;
padding-top: 50px;
  • Did you changed the wordpress css file or have you added it on your theme, cuz if you changed wordpress file that will be override when a wordpress update is made? – emilushi Jul 15 '15 at 18:34
  • No, I have created a plugin. – Christoffer Hansen Jul 15 '15 at 20:29

So as the first option was loading wired i have come to a better solution. what we will do in this case is to create a new menu item, put it in first position, give a custom class, needed to add cutom css style for that item. For this we will:

  • create a function to add new menu item
  • create a function to load custom stylesheet to admin panel
  • and create the new css style to override default css for that item

This will be the function to add new menu:

add_action('admin_menu', 'shomtek_admin_menu');

function shomtek_admin_menu() {
    global $menu;
    $url = 'http://www.shomtek.com/';
    $menu[0] = array( __('SHOMTek'), 'read', $url, 'shomtek-logo', 'shomtek-logo');

Adding custom stylesheet to wp-admin head

add_action('admin_head', 'shomtek_admin_style');

function shomtek_admin_style() {
    echo '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css/admin_style.css" type="text/css" media="all" />';

At the end the custom style for that menu item

#adminmenu a.shomtek-logo{
    display: block;
    background: url(http://www.shomtek.com/wp-content/uploads/2014/01/logo.png) no-repeat center center;
    background-size: 140px 40px;
    width: 140px;
    opacity: 0.6;
    height: 40px;
    margin: 0 auto;
    padding: 10px 5px;

#adminmenu a.shomtek-logo div.wp-menu-name {
    display: none;

This is all, tested and it works perfect ;)

| improve this answer | |
  • Thank you very much, I was just about to write that I figured it out, however I do have a question that you may be able to answer, how do I style it? From an external stylesheet or what? Also it seems to be loading weird. :( I have made a gif to show you. link – Christoffer Hansen Jul 13 '15 at 20:00
  • You can load a new stylesheet only for admin. That is because you it need to z-index it maybe. But still is a little wired. Im checking it right now and let you know later. – emilushi Jul 13 '15 at 20:10
  • Oh yeah I realize the z-index part, it is the loading before everything else that freaks me out. Okay, thanks. I appreciate it very much. – Christoffer Hansen Jul 13 '15 at 20:12
  • I have tried the z-index part, but it seems to be under the menu no matter what I do. – Christoffer Hansen Jul 14 '15 at 8:28
  • @Christoffer please check again cuz i have changed everything i my answer. – emilushi Jul 14 '15 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.