0

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;
2
  • 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, 2015 at 18:34
  • No, I have created a plugin. Jul 15, 2015 at 20:29

1 Answer 1

1

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 ;)

7
  • 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 Jul 13, 2015 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, 2015 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. Jul 13, 2015 at 20:12
  • I have tried the z-index part, but it seems to be under the menu no matter what I do. Jul 14, 2015 at 8:28
  • @Christoffer please check again cuz i have changed everything i my answer.
    – emilushi
    Jul 14, 2015 at 8:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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