Buddypress - Display notifications and profile in header (instead of WP-admin panel)
Is there a way to move the Buddypress "buddybar" from the admin panel to the navigation header of my theme. I want to use the "buddybar" menu and reset it just like they do without having to use the admin panel.
I was unable to find any documentation or discussion on the forum. Is there a trigger function that can be called that will load the "buddy" elsewhere in my theme.
+3
source to share
2 answers
All you need is one piece of code to output most of what you need.
<?php bp_nav_menu(); ?>
Below is the html and css for creating the dropdown.
Html
<ul class="dropdown-menu">
<li>
<ul id="drop-down-user-actions" class="ab-submenu hover">
<li id="drop-down-user-info"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo get_avatar( $current_user->ID, '65' );?></a></li>
<li id="drop-down-user-profile"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo $current_user->display_name ?></a></li>
<li id="drop-down-edit-profile"><a class="ab-item" href="<?php echo $link; ?>"><?php _e('Edit Profile','cactusthemes') ?></a></li>
<li id="drop-down-logout"><a class="ab-item" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e('Logout','cactusthemes') ?></a></li>
</ul>
</li>
<?php bp_nav_menu(); ?>
</ul>
CSS
#drop-down-user-info img {
position: relative;
width: 64px;
height: 64px;
float:left;
padding:0;
margin:0;
}
#drop-down-user-profile, #drop-down-edit-profile, #drop-down-logout {
margin-left: 80px;
}
#drop-down-user-profile {
color:#FFF;
}
#drop-down-user-profile > a {
text-transform: capitalize;
}
#menu-bp, #drop-down-user-actions {
padding: 6px 0;
background:#4c4c4d;
min-width: 264px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color:#C5C5C5
}
#drop-down-user-actions {
background:#26292c;
padding: 20px;
}
#menu-bp > li {
background:#4c4c4d;
}
#menu-bp > li > a, #menu-bp > li > ul > li > a {
padding-right: 1em;
padding-left: 1em;
line-height: 26px;
height: 26px;
white-space: nowrap;
min-width: 140px;
display: block;
}
#menu-bp > li.menu-parent:hover, #menu-bp > li.menu-parent > a:hover, #menu-bp .sub-menu li a:hover {
color: #e14d43;
}
#menu-bp .sub-menu li a {
color: #C5C5C5!important;
}
#menu-bp .sub-menu li a:hover {
color: #e14d43!important;
}
#menu-bp .menu-parent>a:before {
color: inherit!important;
position: relative!important;
font-size: 14px!important;
font-family: FontAwesome!important;
-webkit-font-smoothing: antialiased!important;
right: 5px!important;
top:0px!important;
content: "\f0d9"!important;
}
#menu-bp .menu-parent .sub-menu li > a:before, .dropdown-menu #drop-down-user-actions li > a:before {
content:none!important;
}
#menu-bp > li > ul {
display: none;
margin-left: 0;
left: inherit;
right: 100%;
padding:6px 10px;
margin-top:-32px;
position: absolute;
background:#4c4c4d;
}
#menu-bp .menu-parent:hover > .sub-menu {
display: block;
transition: all .1s ease;
}
#menu-bp > li > ul > li a {
padding:0;
}
#menu-bp li > a > span {
display:none;
}
#menu-bp > li > a {
pointer-events: none;
cursor: default;
}
This should give you an exact copy of the buddy, but without the admin panel itself
+2
source to share
Thanks to inspiration from the previous answer, I came up with this which also contains the notification bit.
<?php
if (is_user_logged_in()) {
?>
<nav class="bp-nav" role="navigation">
<ul id="bp-nav-menu">
<li id="bp-nav-menu-notifications" class="menupop">
<a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo $menu_link; ?>">
<?php echo $menu_title; ?>
</a>
<div class="bp-nav-menu-sub-wrapper">
<ul id="bp-nav-menu-notifications-default" class="bp-nav-menu-submenu">
<?php
$notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id(), 'object' );
$count = ! empty( $notifications ) ? count( $notifications ) : 0;
$alert_class = (int) $count > 0 ? 'pending-count alert' : 'count no-alert';
$menu_title = '<span id="ab-pending-notifications" class="' . $alert_class . '">' . number_format_i18n( $count ) . '</span>';
$menu_link = trailingslashit( bp_loggedin_user_domain() . bp_get_notifications_slug() );
if ( ! empty( $notifications ) ) {
foreach ( (array) $notifications as $notification ) {
?>
<li id="bp-nav-menu-notification-<?php echo $notification->id; ?>">
<a class="bp-nav-menu-item" href="<?php echo $notification->href; ?>">
<?php echo $notification->content; ?>
</a>
</li>
<?php
}
} else {
?>
<li id="bp-nav-menu-no-notifications">
<a class="bp-nav-menu-item" href="<?php echo $menu_link; ?>">
<?php echo __( 'No new notifications', 'buddypress' ); ?>
</a>
</li>
<?php
}
?>
</ul>
</div>
</li>
<li id="bp-nav-menu-my-account" class="menupop with-avatar">
<a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit/">
<?php bp_loggedin_user_fullname(); ?><?php bp_loggedin_user_avatar( 'type=thumb&width=28&height=28' );?>
</a>
<div class="bp-nav-menu-sub-wrapper">
<ul id="bp-nav-menu-user-actions" class="bp-nav-menu-submenu hover">
<li id="bp-nav-menu-user-info">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>">
<?php bp_loggedin_user_avatar( 'type=thumb&width=64&height=64' );?>
</a>
</li>
<li id="bp-nav-menu-user-profile">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
<?php bp_loggedin_user_fullname(); ?>
</a>
</li>
<li id="bp-nav-menu-edit-profile">
<a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
<?php _e('Edit My Profile', 'buddypress') ?>
</a>
</li>
<li id="logout">
<a class="bp-nav-menu-item" href="<?php echo wp_logout_url( get_permalink() ); ?>">
<?php _e('Log Out', 'buddypress') ?>
</a>
</li>
</ul>
<?php bp_nav_menu(); ?>
</div>
</li>
</ul>
</nav>
<?php
}
?>
The only thing I am moving the first one <li>
into the functions.php function is because then I can check it for updates via ajax.
Here are some basic CSS to get you started. You probably don't want it to look like an admin panel, so no need to try to duplicate this:
#bp-nav-menu > li {
display: inline-block;
}
#bp-nav-menu > li.menupop {
position: relative;
}
#bp-nav-menu > li.menupop .bp-nav-menu-sub-wrapper {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 3;
background: #ccc;
min-width: 200px;
}
#bp-nav-menu > li.menupop:hover .bp-nav-menu-sub-wrapper {
display: block;
}
#bp-nav-menu #bp-nav-menu-notifications > a {
padding: 0 0.5em;
}
#bp-nav-menu #bp-nav-menu-notifications > a span {
background: #ddd;
color: #333;
padding: 2px 5px;
border-radius: 4px;
}
#bp-nav-menu #bp-nav-menu-user-actions {
list-style: none;
overflow: hidden;
width: 250px;
}
#bp-nav-menu #bp-nav-menu-user-actions > li {
float: left;
clear: right;
}
#bp-nav-menu #bp-nav-menu-user-actions > li#bp-nav-menu-user-info {
clear: none;
}
#bp-nav-menu #menu-bp {
background: #aaa;
list-style: none;
padding: 0;
}
#bp-nav-menu #menu-bp .no-count {
display: none;
}
#bp-nav-menu #menu-bp .menu-parent {
position: relative;
}
#bp-nav-menu #menu-bp .menu-parent:before {
content: "\f141";
font-family: Dashicons;
}
#bp-nav-menu #menu-bp .menu-parent .sub-menu {
display: none;
position: absolute;
left: -200px;
top: 0;
width: 200px;
background: #999;
list-style: none;
}
#bp-nav-menu #menu-bp .menu-parent:hover .sub-menu {
display: block;
}
If you prefer LESS like me:
#bp-nav-menu {
> li {
display: inline-block;
&.menupop {
position: relative;
.bp-nav-menu-sub-wrapper {
display: none;
position: absolute;
top: 100%;
right: 0;
z-index: 3;
background: #ccc;
min-width: 200px;
}
&:hover {
.bp-nav-menu-sub-wrapper {
display: block;
}
}
}
}
#bp-nav-menu-notifications {
> a {
padding: 0 0.5em;
span {
background: #ddd;
color: #333;
padding: 2px 5px;
border-radius: 4px;
}
}
}
#bp-nav-menu-user-actions {
list-style: none;
overflow: hidden;
width: 250px;
> li {
float: left;
clear: right;
&#bp-nav-menu-user-info {
clear: none;
}
}
}
#menu-bp {
background: #aaa;
list-style: none;
padding: 0;
.no-count {
display: none;
}
.menu-parent {
position: relative;
&:before {
content: "\f141";
font-family: Dashicons;
}
.sub-menu {
display: none;
position: absolute;
left: -200px;
top: 0;
width: 200px;
background: #999;
list-style: none;
> li {
}
}
&:hover .sub-menu {
display: block;
}
}
}
}
+1
source to share