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:


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.

Hellobar Solo script addition in Design Options

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:


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


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="" class="button">20K Retweet Credits</a>', {
showWait: 5000,
positioning: 'sticky',
fonts: 'Arial, Helvetica, sans-serif',
closable: true,
helloBarLogo: false,
forgetful: true
}, 1.0 );
// ]]></script>
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.


  1. This was a brilliant tutorial thank you!!! I was wondering if you can briefly explain how to add twitter buttons or a subscription form. It must be easy but I cannot figure it out!

    Thank you yet again for a brilliant tutorial.


  2. Great tutorial Sanjeev! I am so glad that the folks at HelloBar have created an option for developers. Added monthly cost is added monthly cost .. and it become very burdening financially by months end!

    Another good thing about this scenario is that, it will allow us to deploy the Hello Bar on Customers site without them being hindered by monthly click rate and additional monthly costs, which is important for those first starting out with a new online business website. It will also allow us to add additional functionality to customers sites and put a little more cash in our pockets at the same time!

    As far as I am concerned this is a win win situation! The only trade of being No Stats or A/B testing…Oh well it’s still a very welcomed and viable solution for regardless of the trade off.

    P.S ,,,, Please do post some more info on your upcoming finding and experimentation Sajeev.

    Cam : )

    • Hellobar solo is a good way to get unlimited click, I am trying to do some customization with it, I will share that code once I am done.

  3. Thanks for the tips!
    Pasting the CSS into the custom.css didn’t work for me (I run thesis 1.8.3). I had to register the hellobar.css file using the same procedure as for the js file.

    • Pasting it into custom.css and registering a new css should have same impact. Have you try reloading it by pressing F5 or are you using your custom.css for any other purpose?

  4. I never knew that you can install the Hellobar this fast with the thesis theme. But I need to study it further so I wont be commiting errors on this.

    • Hi Amrik, this is an developer addition which has callback and some other advanced options. I am working on some customization which I will share later on. I have not tried it with Genesis till now but that should be similar to this process..

Comments are closed.