Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] How to add images to a custom toolbar?

  • @bphelp

    Participant

    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!

Viewing 16 replies - 1 through 16 (of 16 total)
  • @hnla

    Participant

    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.

     

    @bphelp

    Participant

    @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!

    @bphelp

    Participant

    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
    	) );
    

    notifications

    @chouf1

    Participant

    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/

    @bphelp

    Participant

    @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!

    @chouf1

    Participant

    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/,

    @bphelp

    Participant

    @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!

    @bphelp

    Participant

    @modemlooper @mercime @sbrajesh @chouf1
    Is there anyone who can give me a hand please? I’m stuck trying to get this working. Thanks everyone!

    @bphelp

    Participant

    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);

    @bphelp

    Participant

    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);
    

    @hnla

    Participant

    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__ ) .

     

    @bphelp

    Participant

    @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!

    @hnla

    Participant

    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’

    @bphelp

    Participant

    @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!

    @hnla

    Participant

    Has @Chouf1 not answered that question on the lst comment on this thread he linked to?:

    https://buddypress.org/support/topic/how-to-split-out-buddypress-notifications-drop-down-items-to-their-own-top-level/

    Those various references should point you to the functions you need to work with.

    @bphelp

    Participant

    @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!

Viewing 16 replies - 1 through 16 (of 16 total)
  • The topic ‘[Resolved] How to add images to a custom toolbar?’ is closed to new replies.
Skip to toolbar