I’m sure you’ve seen the Hellobar before. It’s a slick looking web toolbar that sits at the top of a website window even as the user scrolls down the screen. It’s a great way to draw your visitors eyeballs to a link of your choice and it’s being used today on many of my favorite sites including Quicksprout and Kikolani.
The Hellobar is great, but it’s a paid service that limits the number of clicks you get depending on what plan you’re subscribed to. So that makes doesn’t make it accessible for everyone.
In this tutorial, I’m going to show you how to create Genesis Bar, a Hellobar style web toolbar on your site. You can use it to promote your own products or services. Or you can even sell advertising space using it.
In the steps below, I’m going to show you how to do this using both Dynamik website builder (my current Genesis child theme) and with any other Genesis child theme as well. The only real difference is that with Dynamik we will be implementing the Genesis Bar as a widget instead of as a direct hook with any other child theme.
Step 1 – Create a Widget Area (Dynamik)
With Dynamik, you can easily create widget areas in any area of your site. So to start, go to Dynamik Custom > Widget Areas and create a widget called genesisbar using the genesis_before hook. This lets us place our widget at the very top of the page.
Step 2 – Add markup via Widget (Dynamik)
Go to Appearance > Widgets and you will see your newly created genesisbar widget area. Drag in a Text widget into this area, and then insert the following HTML markup into it.
1 2 3 4 5 6 | <div id="genesisbar-pusher"></div> <div id="genesisbar-wrapper"> <div id="genesisbar-container"> This is my cool product. <a href="http://yourlinkhere.com">Check it out</a> </div> </div> |
Inside the genesisbar-container div is where you will insert the message and link you want to display.
Step 2a – Add markup via Hook (Genesis)
Adding the required HTML via a custom function is pretty straightforward as well. Go to your child theme’s function.php and add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 | add_action( 'genesis_before', 'add_genesis_bar' ); function add_genesis_bar() { ?> <div id="genesisbar-pusher"></div> <div id="genesisbar-wrapper"> <div id="genesisbar-container"> This is my cool product. <a href="http://yourlinkhere.com">Check it out</a> </div> </div> <?php } |
Step 3 – Style your Genesis Bar
Lastly, you will need to add some CSS to make your toolbar look and feel like the real HelloBar.
Here’s the CSS you will need to add:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | #genesisbar-pusher { height: 33px; } #genesisbar-wrapper { position:fixed; width: 100%; top: 0px; left: 0px; background-color: #eb593c; color: white; text-align: center; height: 30px; line-height: 30px; font-size: 14px; font-family: Georgia; border-bottom: 3px solid #fff; -webkit-box-shadow: 0 8px 6px -6px #999; -moz-box-shadow: 0 8px 6px -6px #999; box-shadow: 0 8px 6px -6px #999; } #genesisbar-container a { background-color: #4a4844; color: #fff; text-decoration: none; line-height: 30px; padding: 2px 8px; border-radius: 3px; margin-left: 7px; font-size: 12px; } #genesisbar-container a:hover { background-color: #61645c; } |
For Dynamik users, you can add this CSS code by pasting it into the Custom CSS Editor (Dynamik Custom > CSS). For other Genesis child themes, paste this code into the Genesis > Custom Code > Custom CSS text box.
Final Thoughts
Adding the Genesis Bar to your site will easily add some extra eyeballs to whatever link you are trying to promote. Let me know what you think about this tutorial in the comments and how it worked on your own site.
Hey Josh,
Oh wow! Great method you have mate. Didn’t know that you can create your own and thanks for sharing!
Definitely something to consider soon when I start revamp my site.
Haha!
~Reginald
Fabulous idea Josh
I don’t use Dynamik but I do use the Genesis Extender plugin, which allows me to create a widget area with a hook location and a conditional.
I’ll give this one a runout on a local site.
Fabulous Josh
Just added it to a local site in less than 5 mins using the Extender.
Used your CSS so it even looks like the Foobar.
Many thanks, I’m going to use it to add a Christmas message to my homepage.
That’s me doing the happy dance.
Looks awesome Keith! Thanks for sharing!
I should be thanking you Josh
It’s now on my live site – front page only.
I added mine using the Genesis Extender.
Your CSS makes it look almost identical to default Hellobar.
Great stuff Josh
Keith Davis recently posted…5quidhost WordPress Hosting: from Starter to Turbo
Great inf Josh! I actually just set up my Hellobar yesterday yet was having difficulty adding.. not anymore!! Thanks to this info. Greatly appreciated.. Make it great and keep smiling
Shalonda Gordon recently posted…Which Gift Is Yours In The Dream Team Giveaway?
Hi Josh. Adapted your post for the Genesis Extender plugin.Gave you a credit and a link at the bottom of the page – let me know what you think.
Keith Davis recently posted…Add an Hello Bar with the Genesis Extender plugin
Looks great Keith! Really like how detailed your own tutorial is. Thanks for the link back!
Hi Josh,
Great tutorial, cheers! Quick question – where you say “Custom Code” (for non-Dynamik themes), is this the functions.php area?
Cheers!
Danny Brown recently posted…The Battle for Social Ad Revenue – The Potential Winners and Losers
Hi Danny,
Yes, I was a bit unclear in my original post. You need to add that code snippet to your child theme’s function.php file. Thanks for bringing that up!
Perfect, thanks mate, look forward to messing with this on a couple of sites.
Danny Brown recently posted…The Battle for Social Ad Revenue – The Potential Winners and Losers
Hi Josh. Thanks for an awesome walk-through. This really helped me and loving the Genesis/Dynamik combo! BTW, your site design here rocks – I’m really digging the minimalistic design. Maybe you can do a walk-through of how you designed your site 🙂 LOL
Great tuts and ideas, Josh!
Totally, I will make one for myself via functions.php only, bcos the price for Genesis Extender plugin is higher 😉
Winterburn Phương recently posted…Hiển thị Google Adsense trước và sau mỗi bài viết trong Genesis
Perfect, thanks mate, look forward to messing with this on a couple of sites
diamond recently posted…Working Vodafone Direct Trick Host February 2015