Add a Fixed Support Tab to the Side of Every Page

I recently was working with a client who wanted to provide a site-wide link to a support page, where he provided answers to common questions and a contact form to submit a support request.

I proposed adding a fixed tab at the side of the page, which would scroll with the page, so that it’s always visible, no matter page you’re on, or what part of the page you’re looking at.

This of course should be reserved for a single function that is most important to your site. That could be a link to a Donations page, a Support page, a Contact page, or your Store.

Build the graphic

First, we’re going to build the graphic for the button that will be the actual link.

Since I already built one for my client, I figured I’d just offer you the .psd Photoshop file to get you started.

The button is set up to appear on the left-hand side of the screen (can be rotated 180 degrees for right hand side of screen), has 9 different colors to choose from (can set custom color if needed) and uses the word Support (can be changed to Store, Donate, Contact etc.).

Download the template.PSD format - 180KB

Once you’ve downloaded the template and set it up for your needs, save it as a PNG and upload it to an appropriate place on your server, possibly your theme’s images folder.

Display it on your site

Now that you’ve created the button, you just need to display it on your site.

Start off by opening up your theme’s stylesheet. If you haven’t yet created a child theme, you should do that before editing an original theme.

Paste the following CSS code to the bottom of your stylesheet. Note that you need to edit the background URL to reflect where you uploaded your own image.

#side-tabs a.support {
	background: url('http://www.yourdomain.com/wp-content/themes/yourtheme/images/support-tab.png');
	left: 0px;
	top: 250px;
	height: 108px;
	width: 45px;
	margin: 0;
	padding: 0;
	position: fixed;
	z-index: 9999;
	display:block;
}

You can also change other variables to suit your needs:

• To move the tab to the right, change the word left, to right.
• To move the tab up or down the page, change the top value.
• To use a different size image, edit the width and height values.

Now that everything’s in place, you just need to call upon it, to actually display it. Copy the following code into footer.php, just above the closing body tag:

<div id="side-tabs">
<a class="support" href="http://www.yourdomain.com/support-request/"></a>
</div>

You need to keep the CSS IDs and classes in line with your CSS, but you should change the href to wherever you want people to be redirected to after clicking on the tab.

Now, with any luck, you’ll have something that looks like this. Of course, you can make it look however you want by creating your own image in Photoshop, instead of using the template.

So, what application did you use this for?