Add Icon to Site Link in the WordPress Admin Bar

Each button in the Admin bar has a self-defining and space-saving icon. But the link to the blog frontend (which is represented as a blog title), has no icon. If you want, you can change it quickly - here is a small solution.


Screenshot Admin Bar Icon Example

The following code belongs in the functions.php of the Theme, or better, in a Plugin. It adds the current favicon before the blog title. And to fit the image into the overall picture of the admin bar, we darkened it and and gave it a round shape.

<?php
/**
 * Plugin Name: Icon for Admin Bar Site Link
 * Plugin URI:  http://wpengineer.com/?p=2366
 * Description: Add Icon to Site Link in the WordPress Admin Bar
 * Version:	1.0.0
 * Author:      Sergej Müller
 * Author URI:  http://ebiene.de
 * License:     GPLv3
 */

// This file is not called from WordPress. We don't like that.
! defined( 'ABSPATH' ) and exit;
// If the function exists this file is called as comments template.
// We don't do anything then.
if ( ! function_exists( 'sm_add_adminbar_site_icon' ) ) {

	// add to admin area, inside head
	add_action( 'admin_head', 'sm_add_adminbar_site_icon' );
	// add to frontend, inside head
	add_action( 'wp_head', 'sm_add_adminbar_site_icon' );
	
	function sm_add_adminbar_site_icon() {
		
		if ( ! is_admin_bar_showing() ) {
			return;
		}
		
		echo '<style>
			#wp-admin-bar-site-name > a.ab-item:before {
				float: left;
				width: 16px;
				height: 16px;
				margin: 5px 5px 0 -1px;
				display: block;
				content: "";
				opacity: 0.4;
				background: #000 url("http://www.google.com/s2/u/0/favicons?domain=' . parse_url( home_url(), PHP_URL_HOST ). '");
				border-radius: 16px;
			}
			#wp-admin-bar-site-name:hover > a.ab-item:before {
				opacity: 1;
			}
		</style>';
	}

}

Guest Post

Sergej Müller AvatarThis post is written by Sergej Müller wpseo.de, who created the popular WordPress Plugin to optimize your SEO.

Thank you very much from our part to Sergej.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

Comments are closed.

3 comments

  1. Casey

    This is pretty cool, but I'd also like to see how to replace the WordPress logo with the site Favicon. That would be really useful.

  2. Lee Rickler

    @Casey - you can do that and more with this plugin:
    http://wordpress.org/extend/plugins/point-and-stare-cms-functions/

One pingback

  1. Adventskalender vom 16. Dezember « F-LOG-GE