I offer the following approach:
https://codex.wordpress.org/Toolbar
https://generatewp.com/toolbar/
Step One: Enable the built in toolbar for visitors
show_admin_bar: enable the showing of the toolbar on the front site for guests to see.
Step Two: add your menu items to it
wp_before_admin_bar_render: action to modify menu items
Step Three: tweak your style
wp_head: action hook to add style/css
David,
This is amazing help. You taught me a lot and this is a fantastic idea.
I have a dumb follow up question. Where should the code you generated be pasted into? I can’t find the right place. Every where I put it– it breaks something.
I see editing the admin-bar.php is not advised because a wordpress update will blow that out.
Thanks again for your help!
Do not edit core files. But it looks like you have figured that out, hopefully.
Create plugins. The hook and filters you are writing in the code snippet are for WordPress “plugin” API. Plugin.
Read “how to make a wordpress plugin“. But it looks like that is a lot for your first plugin. There are gazillion tutorials out there for simple, minimalist WordPress plugins. (Look at the source code of the “Hello Dolly” plugin).
But an even more minimalist method I prefer for such customized bits of plugin code is to create an “mu-plugins” folder and then create a *.php file in there to add your own custom php snippets.
So, the snippet I started in the pastebin above could be pasted into a php file you create in your own mu-plugins folder. That is where mine is and it looks pretty much like the snippet I shared above.
David,
Thank you again so so much! I was able to do exactly what you suggested. You taught me so much. Now I know how to make a plugin! Thanks a lot.
One last question. Is there any way to make the menu we custom created responsive? When the screen gets small, the links we added disappear entirely. Ideally, if it could be one of the 3 line menu button that pops up a mobile friendly menu, that would be best. But anything that displays on all screen sizes would be best.
http://harunmedia.com/dev/network/
This is filled with demo content for now.
Thanks!
I do not have all the answers for toolbar responsiveness. And I have not created a “hamburger” icon in the toolbar.
Not really certain what would work for your site/theme, but here is a bit o’ style that might work when the admin bar links disappear:
#wp-toolbar > ul > li {display:block;}
So,
function mytoolbar_style() {
echo '<style type="text/css" media="all">
body {
padding-top: 30px !important;
}
#wp-toolbar > ul > li {
display:block;
}
</style>';
}
You will need to open other threads or discussion topics for more help on making the default toolbar more responsive on smaller devices. You are not alone in your attempts to make the default toolbar more responsive. I wager however, most prefer to disable it altogether on small screens. Those menu links start getting pretty tiny, if you try to fit them into a 2 inch wide display.
Anyway, test the toolbar by itself without any customizations for responsiveness, first. Notice what cruft WP is chucking out as the screen reduces first. Pretty tough to do more with less.
Look at the built-in admin-bar.php and its admin-bar.css to see if you can figure out what is happening when WP detects the various screen sizes in the first place.
Lots of voodoo in the code there. If WP hides the hooks you are plugging into, then there is not much you can do.
Add the meta and class when adding menu nodes one at a time. Trial and error.
Oh, and have a close look at your original post example, bbcamerica.com for its responsiveness. The toolbar we were trying to replicate goes bye-bye there.
