How To Add Hello Bar To Headway Theme

I have added the Hello Bar to this blog which can be seen on the top. Hello Bar is a JavaScript toolbar which can be loaded right on top of your blog. The Hello Bar can be used to advertise a service or to capture leads using something like AWeber. Hello Bar has a version where you can simply use their code or plugin for free (limited clicks) or you can use the paid version. There are two types of paid versions though. The first option is to pay monthly and let the makers host your code/stats etc. and the other option is the Hello Bar Solo where you pay a one time fee and get to use the code on any of our WordPress blogs.

Hello-Bar-Headway-Theme

I bought the Hello Bar solo version few days back but I wasn’t able to get it to work on this blog which uses the Headway theme. I tried playing with code a bit and got it working in few minutes. So here are the steps which will help you add the Hello Bar to your headway theme in case you are stuck.

1. Once you download and unzip the Hello Bar code, you will get a Hello Bar folder which includes some files and another Hello Bar folder.

2. You need to upload the second Hello Bar Solo folder to wp-content/themes/headway/hellobar-solo . Make sure that you upload the HelloBar-Solo directory which is inside the main directory.

3. Open the functions.php file inside the Headway theme folder and add the following code at the bottom:

function hellobar_scripts() {
wp_register_script( ‘hellobar_solo_js’,’http://www.yourblog.com/wp-content/themes/headway/hellobar-solo/hellobar.js’);
wp_enqueue_script( ‘hellobar_solo_js’ );
}
add_action(‘wp_enqueue_scripts’, ‘hellobar_scripts’);

function hellobar_styles() {
wp_register_style(‘hellobar_css’, ‘http://www.yourblog.com/wp-content/themes/headway/hellobar-solo/hellobar.css’);
wp_enqueue_style( ‘hellobar_css’);
}
add_action(‘wp_enqueue_scripts’, ‘hellobar_styles’);

4. GoTo your WordPress Dashboard > Headway > Options > Script/Analytics and post the following inside the ‘footer scripts’ box.


new HelloBar( ‘Your Message Here’, {
showWait: 1000,
positioning: ‘sticky’,
fonts: ‘Arial, Helvetica, sans-serif’,
forgetful: true,
helloBarLogo: false
}, 1.0 );
// ]]></script>

Change the message and link that you want to display and you are done.

There are various options that can be used in the script. These options can be found on the Hello Bar Solo page.

I am not sure if this will work for other WordPress frameworks like Thesis and Genesis but the method should be similar.

email

Leave a reply