[Resolved] How to add images to a custom toolbar?
-
I made a plugin for a custom toolbar and this is what I got so far but the image doesn’t show up in the toolbar:
function custom_toolbar($wp_toolbar) { $wp_toolbar->add_node(array( 'id' => 'bp-notifications', 'title' => __( '<img src="/wp-content/plugins/custom-toolbar/_inc/images/notifications.png" />' ), 'meta' => array('class' => 'menupop') )); } add_action('admin_bar_menu', 'custom_toolbar', 999);
I will appreciate any help! Thanks!
-
I wouldn’t expect what you have above to work ‘title’ is the link name the character text for the anchor ‘href’ is the actual link href and there are few other parts one can manipulate in this way however looking at admin-bar.php seems to suggest ‘title’ is a little more confusing than suggested by the WP codex.
I would look at admin-bar.php around line 140 on to see how WP add the user avatar.
@hnla Hi, I am having a hard time getting the image to show up. Also what is the node id for friend request, and private messages? I can’t seem to find it to use in my custom toolbar to add these as top level items! Thanks!
This is the code I have and the images are now visible but the links for friend-requests and messages doesn’t work. I am not sure of the id or href. Can someone please help me out on this code? Thank you everyone! 🙂
$wp_toolbar->add_node(array( 'id' => 'bp-notifications', 'title' => __('<img src="http://localhost/mydev/wp-content/plugins/custom-toolbar/_inc/images/notifications.png" /> '), 'meta' => array('class' => 'notifications') )); $wp_toolbar->add_node(array( 'id' => 'friend-requests', 'title' => __('<img src="http://localhost/mydev/wp-content/plugins/custom-toolbar/_inc/images/friends.png" /> '), 'href' => $notification->href ) ); $wp_toolbar->add_node(array( 'id' => 'messages', 'title' => __('<img src="http://localhost/mydev/wp-content/plugins/custom-toolbar/_inc/images/messages.png" /> '), 'href' => $notification->href ) );
try using this for the friend request url (not tested)
‘href’ => ( ‘bp_loggedin_user_domain() . bp_get_friends_slug() . ‘/requests/’ )
and this for the messages
‘href’ => ( ‘bp_loggedin_user_domain() . bp_get_messages_slug() . ‘/view/’ )i also answered to you here
https://buddypress.org/support/topic/how-to-split-out-buddypress-notifications-drop-down-items-to-their-own-top-level/@chouf1
That didn’t work and it fired off this error.Parse error: syntax error, unexpected ‘id’ (T_STRING), expecting ‘)’ in C:\xampp\htdocs\mydev\wp-content\plugins\custom-toolbar\custom-toolbar.php on line 48
Got any more idea’s on how to get these links working!
Did you opened bp-core-buddybar.php and wp-includes/admin-bar.php to see how menus are coded ?
it’s my code who generate the error.
that said, you may use this
'href’ => bp_loggedin_user_domain() . bp_get_messages_slug() . ‘/view/, ‘href’ => bp_loggedin_user_domain() . bp_get_friends_slug() . ‘/requests/,
@chouf1
Hey sorry to be a pain but that code gives the same error.Parse error: syntax error, unexpected ‘id’ (T_STRING), expecting ‘)’ in C:\xampp\htdocs\mydev\wp-content\plugins\custom-toolbar\custom-toolbar.php on line 48
I’m a noob so I really appreciate the help!
@modemlooper @mercime @sbrajesh @chouf1
Is there anyone who can give me a hand please? I’m stuck trying to get this working. Thanks everyone!Okay with this code I got all links to work. Thanks @chouf1 for helping. Now I just need the get the friend requests and messages to have a drop down to display when there is a message. If anyone has a better idea I am totally open to suggestions. I would like to get this working like facebooks if possible. Also I was wondering in the below code how can I get the images loaded dynamically from plugins /images folder I created? Thanks again!
function custom_toolbar($wp_toolbar) {
global $wp_admin_bar;if ( is_user_logged_in() ) {
$wp_toolbar->add_node(array(
'id' => 'bp-notifications',
'title' => __(' '),
'meta' => array('class' => 'notifications')
));$wp_toolbar->add_node(array(
'id' => 'friends-requests',
'title' =>__(' '),
'href' => bp_loggedin_user_domain() . bp_get_friends_slug() . '/requests/',
) );$wp_toolbar->add_node(array(
'id' => 'messages-inbox',
'title' => __(' '),
'href' => bp_loggedin_user_domain() . bp_get_messages_slug() . '/view/',
) );
}
}
add_action('admin_bar_menu', 'custom_toolbar', 999);I made some changes now all the icons link to the pages but I need help to show the drop down menu for each individual notification. Here is what I have so far and I really am not certain of the id of each type of notification! Thanks in advance!
function custom_toolbar($wp_toolbar) { global $wp_admin_bar; if ( is_user_logged_in() ) { $wp_toolbar->add_node(array( 'id' => 'bp-notifications', 'title' => __('<img src="http://localhost/mydev/wp-content/plugins/custom-toolbar/_inc/images/notifications.png" /> '), 'href' => bp_loggedin_user_domain() . bp_get_messages_slug() . '/notices/', /*'meta' => array('class' => 'notifications')*/ )); $wp_toolbar->add_node(array( 'id' => 'user-friends', 'title' => __('<img src="http://localhost/mydev/wp-content/plugins/custom-toolbar/_inc/images/friends.png" />'), 'href' => bp_loggedin_user_domain() . bp_get_friends_slug() . '/requests/', /*'meta' => array('class' => 'menupop')*/ ) ); $wp_toolbar->add_node(array( 'id' => 'user-messages', 'title' => __('<img src="http://localhost/mydev/wp-content/plugins/custom-toolbar/_inc/images/messages.png" />'), 'href' => bp_loggedin_user_domain() . bp_get_messages_slug() . '/view/', /*'meta' => array('class' => 'menupop')*/ ) ); } } add_action('admin_bar_menu', 'custom_toolbar', 999);
If you haven’t already you probably ought to use the plugins_url function to find those images :
. plugins_url( '_incl/images/my-image.png' , __FILE__ ) .
@hnla is there any documentation how to implement using the plugins_url function. I can’t seem to find anything and I am having trouble to get it working. Thanks!
It’s in the codex searching on ‘WP plugins_url()’ ought to find it.
It may not work if you have odd folders but yours look standard-ish oh and if you copied my example I added a typo _incl / _inc – personally much prefer ‘assets’
@hnla I finally got the images right! Thanks for your help! Here is what I added to the above code.
'title' => __('<img src="' . plugins_url( '_inc/images/messages.png' , __FILE__ ) . '"> '),
Just change the messages.png to the others like friends.png, and notifications.png.
Works like a charm! Thank you!
Now I just need to figure out how to get the individual types of notifications to display when there is notifications. I have researched this on the codex but I am kinda stuck. Any suggestions would be appreciated! Thanks again!Has @Chouf1 not answered that question on the lst comment on this thread he linked to?:
Those various references should point you to the functions you need to work with.
@hnla since the topic name is “How to add images to a custom toolbar” then if you could kindly mark this as resolved. Thanks again for your help!
- The topic ‘[Resolved] How to add images to a custom toolbar?’ is closed to new replies.