How to install Hellobar Solo with Thesis Theme

If you are using Hellobar on your blog, then you might be aware of the launch of Hellobar Solo. An in-house hosted solution which can give you unlimited clicks on unlimited blogs.

If you are going over 25 clicks per month that you have an option of upgrading to pro, which will give you 100 click in almost $5 a month, with Hellobar Solo you have an option of getting unlimited clicks with a one time fee of $29.

It’s a developer edition but can serve the purpose of your own Hellobar with full access and some advance callback actions. You can customize it to do different actions based on the user actions on your blog.

Customization tutorial is for later on, this post is all about the installation of Hellobar Solo to your blog and makes it work same as the Hellobar you have.

I am using Thesis Theme as an example for the installation but the steps will be same in any other theme.

How to install Hellobar Solo

Hellobar Solo has three parts which you need to install – JavaScript file, CSS and Images, before activating it.

1. JavaScript File

It comes with a JS file “hellobar.js” which you need to upload to your hosting. You can install it at any location, to be consistent with Thesis structure I suggest to install it in custom folder so it will be easy for you to migrate.

For example I am taking the below path for JS file:

[box]/wp-content/themes/thesis_184/custom/hellobar-solo/hellobar.js[/box]

Once your file is uploaded you need to include it in page loading. You can use wp_register_script and wp_enqueue_script functions to load it.

Take the below code and put it in your custom_function.php file. (You need to update the corresponding path, if you are uploading it in different path)

// Hello Bar Code
function hellobar_scripts() {
wp_register_script( 'hellobar_solo_js', get_template_directory_uri() . '/custom/hellobar-solo/hellobar.js');
wp_enqueue_script( 'hellobar_solo_js');
}
add_action('wp_enqueue_scripts', 'hellobar_scripts');
//Hello Bar Ends Here

Once you added the code this script will start loading with the page and you can use it at any place you want. This way you will not have any negative impact on your page loading speed.

There is one other way to include the script in Thesis, you can add it under embedded scripts in design option. You just need to enter script code as you enter for regular hellobar.

2. Image files

There are two image files (sprite-8bit.png and textures.png), which come with the install package. You need to upload them to your hosting.

You can upload it to any place on you hosting, I use custom folder for Thesis to upload these. For example you can upload it to:

[box]/wp-content/themes/thesis_184/custom/images/hellobar/[/box]

You need to keep in mind that these images will be referred from the CSS file, so if you are not putting these files in the same directory as CSS file than you need to update the CSS file.

3. CSS

Its time to update the CSS for Hellobar Solo. You will get a file with the name hellobar.css.

You can take the content of the hellobar.css and append it to your custom.css file. This way you do not need to register it and it will automatically be loaded with the thesis css.

The images are referred in the CSS, so you need to update the relative path in the css file. If you have used the same structure as mentioned above then you need to replace it like below:

[box]sprite-8bit.png —> images/hellobar/sprite-8bit.png

and

textures.png -–> images/hellobar/textures.png[/box]

Remember, this is the corresponding path from the custom.css file.

You need to update sprite-8bit.png at 4 places and textures.png at 1 place. Your Hellobar Solo is installed after these changes and you can use it at any place you want.

4. Activate Hellobar Solo for your Blog

Now you can add it to your blog. You just need to update the message and link for your options and add this code to custom_function.php file.

function hello_bar() {
?>
<script type="text/javascript">// <![CDATA[
new HelloBar( '<span>Giveaway: Get 20K Free Credits for Easyretweet</span> <a href="http://makewebworld.com/2012/03/giveaway/giveaway-free-credits-easyretweet/" class="button">20K Retweet Credits</a>', {
showWait: 5000,
positioning: 'sticky',
fonts: 'Arial, Helvetica, sans-serif',
closable: true,
helloBarLogo: false,
forgetful: true
}, 1.0 );
// ]]></script>
<?php
}
add_action('thesis_hook_after_html', 'hello_bar');

This code will add the Hellobar Solo to your pages. You can update the options to suit according to your need.

You need to change the text in Hellobar to add your text, link and button text. Once done you will have the Hellobar Solo on your blog.