My Site

Creating Awesome Wordpress Sites With Genesis

  • Home
  • Tutorials
  • Discounts

How to Create Your Own HelloBar For Genesis

By Josh Kotsay | Last updated Nov 23, 2013 14

Share the love:
Facebooktwittergoogle_plus

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.

QuicksproutHellobar

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.

DynamikCustomWidgetArea

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.

Filed Under: Genesis Theme Framework, Tutorials

About Josh Kotsay

Josh Kotsay is an internet marketer and wordpress theme addict. You can view his personal blog over at Joshkotsay.com where he reviews different IM products.

Comments

  1. Reginald says

    November 28, 2013 at 12:44 am

    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

    Reply
  2. Keith Davis says

    December 4, 2013 at 9:30 am

    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.

    Reply
  3. Keith Davis says

    December 4, 2013 at 10:10 am

    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.

    Reply
    • Josh Kotsay says

      December 4, 2013 at 10:22 pm

      Looks awesome Keith! Thanks for sharing!

      Reply
      • Keith Davis says

        December 5, 2013 at 11:46 am

        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 TurboMy Profile

        Reply
  4. Shalonda Gordon says

    December 5, 2013 at 9:56 am

    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?My Profile

    Reply
  5. Keith Davis says

    December 14, 2013 at 8:48 am

    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 pluginMy Profile

    Reply
    • Josh Kotsay says

      December 15, 2013 at 6:27 pm

      Looks great Keith! Really like how detailed your own tutorial is. Thanks for the link back!

      Reply
  6. Danny Brown says

    January 18, 2014 at 6:26 am

    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 LosersMy Profile

    Reply
    • Josh Kotsay says

      January 18, 2014 at 2:16 pm

      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!

      Reply
      • Danny Brown says

        January 18, 2014 at 2:21 pm

        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 LosersMy Profile

        Reply
  7. Steve Atwal says

    January 28, 2014 at 5:20 am

    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

    Reply
  8. Winterburn Phương says

    February 23, 2014 at 8:26 pm

    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 GenesisMy Profile

    Reply
  9. diamond says

    January 31, 2015 at 10:04 am

    Perfect, thanks mate, look forward to messing with this on a couple of sites
    diamond recently posted…Working Vodafone Direct Trick Host February 2015My Profile

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badgeShow more posts

Free Email Updates

Sign up and get updated whenever we publish new tutorials on the site

Write For Us

Love to dabble with Wordpress or the Genesis Theme Framework? Write an awesome tutorial for us and earn $100 per article! See this page for more details.

Popular Posts

  • The Cheapskate’s Guide To Free Genesis Child Themes
  • 4 Simple Steps To Boost Your Google Page Speed Score
  • Add Your Own StudioPress Inspired Email Opt-in Box
  • Add Eye Popping Comment Bubbles to your Genesis site
  • How to Create Your Own HelloBar For Genesis
Genesis Theme Framework Banner

Our Sponsors

Categories

  • Articles (7)
  • Chrome (1)
  • Dynamik child themes (1)
  • Elegant Themes (3)
  • Email Marketing (1)
  • Genesis Theme Framework (22)
  • Reviews (8)
  • SEMRush (1)
  • Thrive Themes (4)
  • Tutorials (18)

Recent Posts

  • Build Your Email List Faster With Thrive Leads February 14, 2015
  • Turbocharge Your Opt-Ins With Content Upgrades January 1, 2015
  • The Cheapskate’s Guide To Free Genesis Child Themes September 29, 2014
  • How To Speed Up Your Site With MaxCDN and W3 Total Cache August 25, 2014
  • Awesome New Additions To Thrive Content Builder August 21, 2014

Top Commentluvvers

    Copyright © 2018 · Dynamik Website Builder on Genesis Framework · WordPress · Log in