Add custom link to WP mobile admin bar

Because in mobile with they are hidden by CSS by default

You would need to show by adding some admin css

@media screen and (max-width: 782px) {
#wpadminbar li#pagina-circolari-liceo{
    display: block;
}
}

also to hide the text you should wrap in ab-label

function add_circolari_to_adminbar( $wp_admin_bar ) {
    $args = array(
        'id'    => 'pagina-circolari-liceo',
        'title' => '<span class="ab-icon dashicons dashicons-welcome-write-blog"></span><span class="ab-label">'.__( 'Circolari', 'some-textdomain' ) . '</span>',
        'href'  => esc_url( admin_url( 'edit.php?post_type=circolare_liceo' ) ),
		'meta'  => false
    );
    $wp_admin_bar->add_node( $args );
}
add_action( 'admin_bar_menu', 'add_circolari_to_adminbar', 999 );

Hello @alanfuller,
thanks for the response. Unfortunately this is not working. I tried adding the CSS and adding the ab label but the button is not showing in mobile view.

How did you add the admin css?

(share your code)

• This reply was modified 2 years, 11 months ago by Alan Fuller.

I used three ways:

First one with this function:

add_action('admin_head', 'custom_CSS_admin_circolari');
function custom_CSS_admin_circolari() {
  echo '<style> @media screen and (max-width: 782px) {#wpadminbar li#pagina-circolari-liceo{display: block !important;}}</style>';
}

Second one with this other function (and of course by adding the “admin-style” file in the directory, with the CSS in it):

function custom_CSS_admin_circolari() {
  wp_enqueue_style( 'admin-style', get_stylesheet_directory_uri() . '/admin-style.css' );
}
add_action( 'admin_enqueue_scripts', 'custom_CSS_admin_circolari');

Third one with the “Admin CSS MU” plugin, thinking I was doing something wrong with the methods before

I also tried adding important tag in the CSS code, thinking it was getting rewrited by something else, and also tried to leave only the ID of the menu element (#pagina-circolari-liceo) as selector. But none of these worked

• This reply was modified 2 years, 11 months ago by Giovanni Castellotti.

OK I missed some thing off the CSS

#wpadminbar li#pagina-circolari-liceo should be
#wpadminbar li#wp-admin-bar-pagina-circolari-liceo

This code definitely works

( and also yet another way of adding style using wp_add_inline_style – which is probably the best way IMHO in 2022 )

function add_circolari_to_adminbar( $wp_admin_bar ) {
	$args = array(
		'id'    => 'pagina-circolari-liceo',
		'title' => '<span class="ab-icon dashicons dashicons-welcome-write-blog"></span><span class="ab-label">' . __( 'Circolari', 'some-textdomain' ) . '</span>',
		'href'  => esc_url( admin_url( 'edit.php?post_type=circolare_liceo' ) ),
		'meta'  => false
	);
	$wp_admin_bar->add_node( $args );
}

add_action( 'admin_bar_menu', 'add_circolari_to_adminbar', 999 );

add_action( 'wp_enqueue_scripts',
	function () {
		$admin_css = <<<EOT
@media screen and (max-width: 782px) {
  #wpadminbar li#wp-admin-bar-pagina-circolari-liceo {
    display: block;
  }
}
EOT;
		wp_add_inline_style( 'admin-bar', $admin_css );
	}
);

• This reply was modified 2 years, 11 months ago by Alan Fuller.

Alright @alanfuller,
I’ll try this out as soon as I’ll be home. I’ll let you know the result. Thank you so much for your help, I really appreciate it.
I’ll also try adding the css the way you suggested!

@alanfuller as you said, this is definitely working! Thank you so much.
Stay safe, and happy new year!

Hi – I added your code below to a snippet and it works great (icon shows) when I squeeze browser width on PC. But icon still does not show on mobile phone browser. Can you help me solve this? Wanting to solve this a year but nothing on the Internet for beginners like me. Thank you.

function add_circolari_to_adminbar( $wp_admin_bar ) {
$args = array(
‘id’ => ‘pagina-circolari-liceo’,
‘title’ => ‘<span class=”ab-icon dashicons dashicons-welcome-write-blog”></span><span class=”ab-label”>’ . __( ‘Circolari’, ‘some-textdomain’ ) . ‘</span>’,
‘href’ => esc_url( admin_url( ‘edit.php?post_type=circolare_liceo’ ) ),
‘meta’ => false
);
$wp_admin_bar->add_node( $args );
}

add_action( ‘admin_bar_menu’, ‘add_circolari_to_adminbar’, 999 );

add_action( ‘wp_enqueue_scripts’,
function () {
$admin_css = <<<EOT
@media screen and (max-width: 782px) {
#wpadminbar li#wp-admin-bar-pagina-circolari-liceo {
display: block;
}
}
EOT;
wp_add_inline_style( ‘admin-bar’, $admin_css );
}
);`

ps the WP toolbar, and Login and Register links show fine on the mobile browser – but not the new icon I added with your code. It only shows on PC browser when I squeeze with to mobile-like size.