How to Install Hello Bar Solo on WordPress

So you bought Hello Bar Solo and you’re ready to install it on your WordPress site. Well you’ve come to the right place. And we have some good news too, Hello Bar Solo requires only a few steps in order to get it set up and running on WordPress.org-powered sites. (Note: This installation guide is for WordPress.org sites only. Hello Bar Solo cannot be installed on WordPress.com sites.)

Before we get started, let’s familiarize ourselves with the files Hello Bar Solo comes with. Nested in the zip file, you’ll find a directory titled hellobar-solo. This directory houses all the files we’ll need to install Hello Bar Solo on WordPress.

Inside that directory you’ll find the following files:

hellobar.js
This is the library that houses all of the code that allows Hello Bar Solo to work properly. We’ll be telling WordPress to enqueue this file.

hellobar.css
This is the style sheet that makes your Hello Bar Solo install look pretty.

sprite-8bit.png
This is an image sprite that houses all of the visual elements referenced in the CSS file.

textures.png
This is another image sprite that contains all of the textures available for use with Hello Bar Solo.

Step One:

We’ll need to move the files listed above into the right folder in the WordPress installation directory in order to get things working.  To do this, place the “hellobar-solo” directory we referenced above into your WordPress website’s theme folder. (for example /wp-content/themes/twentyeleven/). This will get things nice and comfy within our theme.

Step Two:

Now we need to reference our files within WordPress. While we can place <script> tags and <link> tags directly into the header.php file, it’s a WordPress best practice to register and enqueue scripts to be output appropriately. If you aren’t familiar with this technique, we recommend you check out the WordPress codex documentation on wp_register_script(), wp_register_style(), wp_enqueue_script() and wp_enqueue_style() for more information. This method will output the  scripts on a page when they are needed, and also allow other scripts to detect what is being loaded so that files are loaded in the correct order and only output once.

To help you out with this, we’ve provided a simple code snippet that takes care of this for you. Just copy the code snippet below and paste it into the bottom of your functions.php file.

function hellobar_scripts() {
    wp_register_script( 'hellobar_solo_js', bloginfo('stylesheet_directory') . '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', bloginfo('stylesheet_directory') . 'hellobar-solo/hellobar.css');
    wp_enqueue_style( 'hellobar_css');
}
add_action('wp_enqueue_scripts', 'hellobar_styles');

We’ll now be able to access the functions in the hellobar.js file on every page, and the style sheet will be loaded on each page so that the Hello Bar looks awesome.

Step Three:

Now we’ll need to output a Hello Bar. We recommend doing this at the end of your footer file, which would give us a Hello Bar on every page. However, if you want to limit your Hello Bar to only specific pages you can also place the code within a template file. The following code snippet will give us the basic bar, but please check out http://www.hellobar.com/solo for a few demos and an overview of all of the customizations available.

<script type="text/javascript">// <![CDATA[
    new HelloBar( '<span>Read my pitch and then click on my</span> <a href="#" class="button">Call to Action!</a>', {
        showWait: 1000,
        positioning: 'sticky',
        fonts: 'Arial, Helvetica, sans-serif',
        forgetful: true
    }, 1.0 );
// ]]></script>

Step Four:

If you’ve placed your code snippet in the right place, The Hello Bar should now be outputting correctly. Congrats! You have you shiny new Hello Bar Solo up and running. Now plug in your key message, email subscription form, social widgets, or whatever content you want to highlight. Hello Bar will do the rest. Next? Kick back and watch your users take action! 

Related posts:

1. Introducing a Simple WordPress Plugin for Hello Bar
2. Hide Hello Bar on Specific Pages with WordPress in 3 Easy Steps
3. Introducing Solo, the Unlimited Hello Bar for Developers
4. Deliver More Functionality with Hello Bar Solo
5. Deploy Your Hello Bar Anywhere!