If you’re a WordPress user you’ve probably heard of the Hello Bar. It’s a slim elegant bar that appears at the top of your site and allows you to display a message and a link to your special features and promotions.
It’s a powerful advertising tool… but it’s not free.
Fortunately if you’re running the Genesis theme framework and you use the Genesis Extender plugin, you can create your own genesisbar in the style of the Hello Bar in about five minutes!
The procedure for creating your Hello Bar style genesisbar
To create the genesisbar we’re going to use the Genesis Extender plugin to create a widget area, add a Genesis hook to position the genesisbar and add a WordPress conditional to display it on the pages and post we want it to appear on.
Once we have a genesisbar widget area we can add content using a text widget and style that content using CSS.
This is the full procedure:
- From your WordPress dashboard go to the Genesis Extender – Custom Options
- Create a conditional to use later with the widget area
- Create a Custom Widget Area called genesisbar
- Use the Genesis hooks to hook this widget area to the top of the page using the “genesis_before” hook
- Use a conditional to display the genesisbar on selected pages. For this site I used “is_front_page”
- Add a text widget to the newly created genesisbar widget area and paste in your content
- Style the content with a little CSS
If you want to see the finished product take a look at my homepage..
The genesisbar only appears on my homepage because I’ve used the conditional “is_front_page”.
Creating the widget area and adding the hook and conditional
To complete this tutorial you have to be running on the Genesis theme framework and have the Genesis Extender plugin installed.
#1 From your WordPress dashboard go to Genesis > Extender Custom
#2 From the “Genesis Extender – Custom Options” select “Conditionals” and use the drop down menu on the LHS to selct the conditional you want and save the changes. I’ve used “is_front_page” for this site but you can choose what you want.
#3 Select “Widget Area” and give your widget area a name, call it “genesisbar” and save the changes.
#4 Hook the Widget Area to the top of your page by choosing the “genesis_before” hook from the drop down menu and saving the changes.
#5 Select the Conditional you created in step 2 to display your genesisbar only on the pages you want it to show on and save the changes.
Add the widget area content and style it with CSS
The Genesis Extender plugin has done all the heavy lifting all you have to do now is add the content to the genesisbar widget area, which we’ve just created and pretty up the content with a little CSS.
#6 From your dashboard go to Appearance > Widgets and you’ll see the newly created “genesisbar” widget area.
Drag a text widget into the widget area and paste in the code below:
#7 And finally, style the content of the text widget with CSS.
You can download your stylesheet using FTP, copy the CSS below and add it to the bottom of your stylesheet and upload, or you can do it the easy way… use the Front-end Custom CSS Builder of the Genesis Extender and avoid all that FTP’ing.
To activate the Front-end CSS Builder from your WordPress dashboard go to Genesis > Extender Custom and click the CSS tab.
Check “Activate Front-end CSS Builder” and click “Click To View Front-end”.
Once you click “Click To View Front-end” you’ll be taken to the front-end of your site.
Click “Show/Hide CSS Builder” at the top right of the page and the CSS Builder Box will appear on the LHS.
Copy and paste the CSS below into the CSS Builder Box and if you’re happy with the styling… hit the “Click to insert into Custom CSS Editor” at the bottom of the Builder Box and then click “Save Changes”.
Note: there’s a short piece of CSS below the main section, which you can add if you’d like to hide the genesisbar on smaller devices:
Add this short piece of CSS if you’d like to hide the genesisbar on smaller devices:
A great example of using the Genesis Extender plugin
Adding a genesis bar is a great example of why I use the Genesis Extender plugin on all my sites and all my client sites. It allows me to add code without messing around with my core files and add CSS whilst working on-page and without FTP’ing.
For a full overview of the Genesis Extender plugin check out Cobalt Apps: awesome Genesis resources.
You get the Genesis Extender plugin for a one-off payment, which includes all future updates, you can use it on as many sites as you like and it comes with a rock solid 30 day money back guarantee.
Hope you enjoyed the tutorial and found it helpful and if you have any thoughts on using an “Hello” type bar or the Genesis Extender, I’d love to hear from you in the comments below.
Special thanks to Josh Kotsay of Slick WP for his post How to Create Your Own HelloBar For Genesis, which shows you how to add an Hello Bar style genesisbar using the Dynamik Website builder theme or any other Genesis child theme.
The html and CSS used in this post were also supplied by Josh.