So I'm working on a Wordpress site with Bootstrap.
I'm using Bootstrap's navbar for the menu integrated with WP.
I have my homepage as a link in the navbar as "home".
Instead of "Home" as a text I want a glyphicon to appear and not text.
I think I could use CSS for that... something like this:
#menu-item-55 {
/* something that removes text and adds the icon */
}
But in bootstrap I have to use the icons like this
<span class="glyphicon glyphicon-search"></span>
Anyone?
Thanks
I figured that I can do it by adding a custom link and putting the inside the navigation label.
I still would like another way to do it. :D
Cheers
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.
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" href="' . home_url( '/' ) . '" title="Home">' .
$args->link_before .
/* 'HOME' . //add home text if you want. */
$args->link_after .
'</a>' .
$args->after .
'</li>';
$menuItems = $homeMenuItem . $menuItems;
}
return $menuItems;
}
add_filter( 'wp_nav_menu_items', 'addHomeMenuLink', 10, 2 );
source
Navigate to Appearance > Menus
Find the menu item that you want to add an icon to
Expand the menu item
Inside the Navigation Item you will want to add your icon code either before or after or in place of your existing menu item label. For this example I’m going to use the home icon. Here’s what you would type:
< i class='icon-home icon-white'>< /i> Home
Note: Make sure to use single quotes!
5.Important: This is something you want to make sure to do, it could negatively impact your SEO if you ignore this step. You will want to make sure to put the plain text in the Title Attribute field.
6.Save the menu. (Also make sure you have selected one of the menus from the Theme Locations drop downs) That’s it!
http://jasonbradley.me/icons-in-the-wordpress-menu/
Related
I want a search button at the right side of the primary menu which display a searchbox under primary menu once it is clicked.I am a newbie in wordpress and only know html and php basic.Can anyone please help me out?
To add the Custom Items into your menu , Then you should use the filter hook wp_nav_menu_items.
Please see the below Code and paste it into the current active theme functions.php file :
add_filter('wp_nav_menu_items','add_search_box_into_menu', 10, 2);
function add_search_box_into_menu( $nav, $args ) {
if( $args->theme_location == 'primary' )
$nav .= '<li class="custom-header-search"><form action="'.home_url( "/" ).' id="searchform" method="get"><input type="text" name="s" id="s" placeholder="Search"></form></li>';
return $nav;
}
For more help : See here
You'll need to add not just a link, but the search form.
To do so, you need to customize your theme.
Important: if you use a theme you didn't create, then first create a child theme and modify it (it will ensure you that your changes are still applied ethen if the theme recieve updated).
Then in the HTML/PHP code where you menu is, you can use the get_search_form() method to display the search form in place.
If you want to customize the search form, juste create a searchform.php file in your theme folder and customize it.
More informations here : https://codex.wordpress.org/Styling_Theme_Forms
By default, Drupal prints the primary tabs like this:
<ul class="tabs--primary nav nav-tabs"></ul>
Now I want to remove the navclass from the <ul>
I tried to insert this code in my template.php but without any luck:
http://pastebin.com/vkxkmCwS
You can install Menu attributes module and apply patch to have an ability to edit classes of menu.
Or to override menu template, use theme_menu_tree in you template.php:
function themename_menu_tree($variables) {
return '<ul class="menu my-class">' . $variables['tree'] . '</ul>';
}
i am new to word press and trying to modify Buddy Press top bar.
my current top bar is
i want to make user area top bar like
the basic difference is to put the login user image/aviator on left side of bar.
and also if possible remove visit link from right side.
Thanks
I suggest you start by creating a custom theme (or plugin if you prefer) that is a child theme of the bp-default theme. Follow the instructions here or here.
From there you can remove the Visit menu like so:
remove_action( 'bp_adminbar_menus', 'bp_adminbar_random_menu', 100 );
When it comes to the avatar, the easiest solution is probably to unregister BuddyPress default admin bar logo bp_adminbar_logo, create a replacement function to output the avatar, and finally register that function instead.
remove_action( 'bp_adminbar_logo', 'bp_adminbar_logo' );
function my_adminbar_logo() {
echo '<a href="' . bp_core_get_userlink( bp_loggedin_user_id(), false, true ) . '">';
bp_loggedin_user_avatar( 'type=thumb&width=40&height=40' );
echo "</a>";
}
add_action( 'bp_adminbar_logo', 'my_adminbar_logo' );
There, just add some CSS and you're done :)
I would like to add pipes ("|") between menu items for one of the menus on my Drupal 7 site (theme name is "thompson"). I figured the best way to do this is to create a function in my template.php file called thompson_menu_link. I did that and it is successfully modifying the menus, but it's changing all the menus. Is there a way I can do this for just one menu on my site?
Currently, I used the admin pages to add my footer menu (url path: menu-footer-menu) to the Footer block. Should I call it a different way?
Apparently Drupal core provides the ability to theme menu links by menu name. For the Main menu the following theme function should work
THEMENAME_menu_link__main_menu()
Alternatively you could use the Menu Block module to create menu blocks. Among other things the module creates additional theme suggestions. From the module's README:
Menu block uses Drupal core's menu theme functions. However, it also
provides theme hook suggestions that can be used to override any of
the theme functions called by it. ...
theme_menu_link() can be overridden by creating one of:
[theme]_menu_link__[menu name]()
[theme]_menu_link__menu_block()
[theme]_menu_link__menu_block__[menu name]()
[theme]_menu_link__menu_block__[block id number]()
I've messed with the thompson_menu_link() function a bit. I don't like how I did it, but it got the job done. Basically, it reads in the menu name, and uses a conditional to return the <li> element with a pipe afterward. Here's the whole block:
function thompson_menu_link(array $variables) {
$element = $variables['element'];
$menuName = $variables['element']["#original_link"]["menu_name"];
$sub_menu = '';
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
}
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
if ($menuName == "menu-footer-menu" && !in_array("last",$element['#attributes']['class']) {
$finalString = '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>|\n";
}
else {
$finalString = '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
return $finalString;
}
the best way you can make it is installing the following module:
http://drupal.org/project/menu_attributes
This module lets you add special classes to some menu entries, so you just have to add a class rightpipe and define that class like:
.rightpipe { border-right: 1px solid black }
or
.rightpipe { background: url(1pixel_line_separator.png) no-repeat center right }
Is there any way to write some html (as you might in a block), and have that html appear as a menu item?
My situation is that I want some text that is not a link to say 'Follow us on:', and then I want 2 images which are both links to twitter and facebook.
Menu html cant do this as it requires any html you write to be part of a link, and to be the same link for that menu entry.
http://drupal.org/project/menu_html
I really want the html I add to be within the menu list.
Thanks
UPDATE
Code doesn't work well in the comments so im adding it here. This link seemed to be the closest to what you were suggesting:
http://api.drupal.org/api/drupal/includes--menu.inc/function/theme_menu_item/6
So I added this to my template.php:
function localhost_petitpim_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
if (!empty($extra_class)) {
$class .= ' ' . $extra_class;
}
if ($in_active_trail) {
$class .= 'active-trail myactive';
}
return '<li class="' . $class . '">' . $link . $menu . "</li>\n";
}
All ive done is add a class of 'myactive' so I can see if its working. My theme name is 'localhost_petitpim'. Ive refreshed the cache. My theme is set to 'Rebuild theme registry on every page.' I cant see the new class being applied. Have I done something wrong?
Thanks
You can simply hard-code text and linked images in your tpl.php file(s).
Just put html block with desired code in tpl.php after menu. Make new wraper around menu & block if current html structure of your theme is not supporting this solution. Block should be floated right or displayed inline depending on HTML+CSS of your theme.
Hope this helps.
Not a nice solution, but it works.
Add two dummy menu entrys to your menu.
Override the theme_menu_link method by implementing phptemplate_menu_link in your template.php file.
Inside the phptemplate_menu_link filter for your dummy entry and replace them with what ever html code you like.