Customize (further) your WordPress Toolbar with

WP Symposium Toolbar

This page presents how you can go further when customizing your WP Toolbar, using the hooks and CSS classes available with the plugin.

1. Hooks

Prerequisites: you need to understand how WordPress hooks work, know how to add code to your theme's functions.php, and have some PHP knowledge.

1.1. WP User Menu

Several hooks are available around the WP User Menu ("My Account"), used to change or add bits of information displayed for the current user. You will need to use one of the globals $current_user or $user_ID to get the user ID, and from then on, any other information you would need for that particular user.

'symposium_toolbar_custom_display_name'

Sends the small HTML bit containing the display name in the User Menu, that you may replace with the information you want.

Example: put the first name instead of the whole display name, or any information you'd like

function symposium_toolbar_custom_display_name_hook ( $user_info ) {
   global $current_user;

   get_currentuserinfo();
   return str_replace($current_user->display_name, $current_user->user_firstname, $user_info);
}
add_filter ( 'symposium_toolbar_custom_display_name', 'symposium_toolbar_custom_display_name_hook', 10, 1 );

'symposium_toolbar_custom_user_info'

Add anything to the user info section of the User Menu.

Example: add the role under certain conditions only, like for given accounts, given roles, etc. Note that I'm lazy here and use the username class to style it by default, eventually refined by the class wpst-role. You may of course put your own class directly.

function symposium_toolbar_custom_user_info_hook ( $user_info_collected ) {
   global $current_user, $wp_roles;

   get_currentuserinfo();
   $role = array_shift($current_user->roles);
    if ( $role == 'administrator')
        return $user_info_collected . "<span class='username wpst-role'>".$wp_roles->role_names[$role]."</span>";
    else
        return $user_info_collected;
}
add_filter ( 'symposium_toolbar_custom_user_info', 'symposium_toolbar_custom_user_info_hook', 10, 1 );

'symposium_toolbar_add_user_action'

Add anything else to the User Info, that requires a dedicated link and/or a specific styling, like a membership level, or a rank, with a link that points to a page where details will be given.

Example: add a title along with a URL linking to the site main page, users of rating / ranking / membership plugins will transpose the following to their favorite plugin, and display the appropriate title and link.

function symposium_toolbar_add_user_action_hook ( $user_id ) {

    $added_info['title'] = "A Title for User ID #".$user_id;
    $added_info['url'] = site_url();

    return array( $added_info );
}
add_filter ( 'symposium_toolbar_add_user_action', 'symposium_toolbar_add_user_action_hook', 10, 1 );

'symposium_toolbar_my_account_url_update'

Modify the URL over the Howdy message and the small avatar

'symposium_toolbar_user_info_url_update'

Modify the URL over the user info in the User Menu.

Use Cases: These two links point to the profile URL given by WordPress, and the site URL for visitors. Note that the WP Profile has a hook as well 'edit_profile_url' to modify the link from anywhere in your site. These two hooks allow you to have different links in the WP User Menu only, in the Toolbar and the User Menu, respectively.

1.2. Styles

'symposium_toolbar_style_search_field'

I personally consider that the Search icon should not have borders when it's moved to the inner part of the Toolbar, but that's purely a matter of taste. So if you'd like to remove the border-xxx: none that the plugin adds to li.admin-bar-search, you could use this hook.

function symposium_toolbar_remove_search_borders ( $wpst_all_fonts ) {

    return "";
}
add_filter ( 'symposium_toolbar_add_fonts', 'symposium_toolbar_remove_search_borders', 10, 1 );

'symposium_toolbar_style_toolbar_hover'

By default the plugin adds the same borders to the Toolbar items, whether they are hovered or not. Use this hook to add custom borders to those items when they are hovered.

Since hover doesn't affect monochrom dividers, it should be stressed that this hook is triggered only when two colours are defined for borders.

'symposium_toolbar_style_to_header'

Styles collected at the tab of the same name are gathered in a string that is then stored as an option. Upon page load, this string is read from its option and sent for display. This hook is triggered right before the string is formatted and stored. Use this hook to add your own style.

1.3. Administration

'symposium_toolbar_add_fonts'

This hook can be used to add your custom font to the array of fonts that is displayed at the plugin options page. You may then select it from there, and use it for the Toolbar and / or its dropdown menus. You should always add a fallback to your font, in case the browser wouldn't be able to display it. Do not add brackets around multiword names, the plugin will deal with them automagically.

Example: being a little short on this one, I'll show how to add a font which is already proposed by default...

function symposium_toolbar_add_font_hook ( $wpst_all_fonts ) {

    $wpst_all_fonts[] = "Arial Black, sans-serif";
    return $wpst_all_fonts;
}
add_filter ( 'symposium_toolbar_add_fonts', 'symposium_toolbar_add_font_hook', 10, 1 );

'symposium_toolbar_init_globals_done'

This hook is triggered at the end of the init of plugin globals, so Network Admins can interact with those before they are actually used by Site Admins, like dropping an array element or adding one element to one of those arrays. There are two kinds of arrays, all of them being made of items in the format slug => title:

• Roles
  $wpst_roles_all_incl_visitor, lists all roles of the site including the pseudo-role 'visitor'
  $wpst_roles_all, all roles gathered on the site
  $wpst_roles_author, all roles that are allowed to 'edit_posts'
  $wpst_roles_new_content, all roles that are allowed to add content to the site, this includes either of the following capabilities: 'upload_files', 'manage_links', 'create_users', 'promote_users'
  $wpst_roles_comment, all roles that can manage comments through the capability 'edit_posts'
  $wpst_roles_updates, all roles that have either of the following capabilities: 'update_plugins', 'update_themes', 'update_core'
  $wpst_roles_administrator, pretty self-explanatory, the tested capability is 'manage_options'
• Menu Locations
  $wpst_locations, lists the available locations for custom menus as per the eponymous tab at the plugin options page

For menu locations, it should be stressed that the slug in this array corresponds to the parent item ID to which the menu will be connected. So if you create a Toolbar menu or item and add its ID here as a slug (along with an explanatory title), it will be listed amongst the menu locations, ready to use by Site Admins.

2. CSS styling

Prerequisites: you need to know how to add custom CSS on your site, and obviously have some CSS knowledge.

Several classes are defined for you to interact with items added by the plugin. They are all defined the plugin CSS file, in the plugin folder.

2.1. WP User Menu

In the WP User Menu ("My Account"), the role added by the plugin option belongs to the classes wpst-role and wpst-role-<role> where <role> stands for a given role. For instance, by default the plugin defines a red border for admins through the class wpst-role-administrator.

2.2. Notification Icons

The mail icons belong to the classes ab-icon-new-mail and ab-icon-mail, while the friend icons belong to ab-icon-new-friendship and ab-icon-friendship.

G.Assire
alphagolf@rocketmail.com