WordPress Bootstrap Glyphicons: How to add a glyph icon in main menu of WordPress theme with Bootstrap.

Okay, so today I’m going to teach you how to add glyphicon-home on your wordpress bootstrap.

If you are using the wordpress 3+ wp_nav_menu with your theme adding this snippet to the functions.php will add a glyphicon-home link of bootstrap to your navigation.

Notice the classes “glyphicon” and “glyphicon-home” is added to the tag in the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function addHomeMenuLink($menuItems, $args)
{
	if('header_menu' == $args->theme_location) // make sure to give the right theme location for the menu
	{
		if ( is_front_page() )
			$class = 'class="current-menu-item active"';
		else
			$class = '';
		$homeMenuItem = '<li ' . $class . '>' .
				$args->before .
				'<a class="glyphicon glyphicon-home" title="Home" href="' . home_url( '/' ) . '">' .
				$args-&gt;link_before .
                                /* "HOME" . //add home text if you want. */
				$args-&gt;link_after .
				'</a>' .
				$args-&gt;after .
				'';
		$menuItems = $homeMenuItem . $menuItems;
	}
	return $menuItems;
}
add_filter( 'wp_nav_menu_items', 'addHomeMenuLink', 10, 2 );

You may also like...