Support » Developing with WordPress » Add icon/link to top admin bar in responsive small screen mode

  • demonboy

    (@demonboy)


    Hi,

    I’ve added a custom link to my top admin bar by adding this to my functions file:

    function wpb_custom_toolbar_link($wp_admin_bar) {
        $args = array(
            'id' => 'userlink',
            'title' => 'Users', 
            'href' => 'https://mysite.com/wp-admin/users.php', 
            'meta' => array(
                'class' => 'userlink', 
                'title' => 'Users'
                )
        );
        $wp_admin_bar->add_node($args);
    }
    add_action('admin_bar_menu', 'wpb_custom_toolbar_link', 999);

    This works fine on a desktop but when in responsive mode on a small screen, WP displays four Dashicons. How it decides which icons I’m not sure but I would like to make my custom link one of the four it displays when viewed on a phone. I’m guessing I have to add a media query in my CSS but where and how do I do this?

    TIA.

Viewing 7 replies - 1 through 7 (of 7 total)
  • corrinarusso

    (@corrinarusso)

    Hmmmm.
    You could add an icon of your own by hooking into the css that is called b the load-styles.php script.
    f007 would be user for example :

    #wpadminbar #wp-admin-bar-my-new-user-icon .ab-icon:before {
        content: "\f007";
        top: 3px;
    }

    Then just update the id in your args.

    Or, maybe without changing anything you could go :

    #wpadminbar #wp-admin-bar-userlink #userlink .ab-icon:before {
        content: "\f007";
        top: 3px;
    }

    Or, you could add your style manually in the functions file :

    add_action('admin_head', 'admin_styles');
    function admin_styles() {
        echo '<style>
            #userlink .ab-icon:before {
        content: "\f007";
        top: 3px;
            }
        </style>';
    }

    What displays there now instead of an icon ?
    I’m not sure if any of this will work – I’ve not done it.
    But I think it’s on the right track.

    demonboy

    (@demonboy)

    Hi @corrinarusso,

    Thanks for getting back to me. I tried the third one to add to the functions file and that doesn’t work, but inserting the icon isn’t the main issue. What I am trying to do is get the link to display in the first place when on a small screen. Somewhere in WP it is prioritising four links by inserting the icons, and hiding the other links. For example, BBPress icon displays when on a phone, as does the ‘add new post’ icon, but other links from other plugins are hidden.

    corrinarusso

    (@corrinarusso)

    Can I see a screenshot of what you are describing pls?

    corrinarusso

    (@corrinarusso)

    Yoast has a class called :
    class WPSEO_Admin_Bar_Menu implements WPSEO_WordPress_Integration
    in this file :
    ./wp-content/plugins/wordpress-seo/inc/class-wpseo-admin-bar-menu.php

    which calls this function :

    protected function get_title() {
     return '<div id="yoast-ab-icon" class="ab-item yoast-logo svg"><span class="screen-reader-text">' . __( 'SEO', 'wordpress-seo' ) . '</span></div>';
    }

    Here is the method that they use to add to the admin bar :
    https://developer.wordpress.org/reference/classes/wp_admin_bar/add_menu/
    which is in the same file.

    They don’t reference a dashicon, but a svg.

    demonboy

    (@demonboy)

    Hi corrinarusso,

    You can see a screenshot taken from my phone here

    You can see the four dashicons for Dashboard, Paintbrush (I don’t know what this is, I’ve never clicked it), new post and BBPress.

    corrinarusso

    (@corrinarusso)

    Yes.
    Did you follow the same process to implement a new class based on the approach taken from the Yoast plugin ? Seems to work well.

    demonboy

    (@demonboy)

    I’m not sure that will display the link when in small screen mode though. Doesn’t it still need a media query?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Add icon/link to top admin bar in responsive small screen mode’ is closed to new replies.