Add a Fixed Support Tab to the Side of Every Page

Requesting support

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

Color options for the support tabFirst, 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

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.

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:

Adding a support tab to WordPressYou 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?

26 thoughts on “Add a Fixed Support Tab to the Side of Every Page”

  1. Kayle Simon says:

    Thank you! If you could explain how to create a hover state with this, that would be a nice addition.

    1. Hi Kayle,

      Certainly. You can add the ruleset #side-tabs and make whatever changes you need, so if you want to change the background image, you could make it:

      #side-tabs {
      background: url(‘’);

      Hope that helps

  2. Geoff says:

    Hey Dave

    Thanks for the code for the fixed tab, Works a treat on my site, I’ve used it for the forum I have just built and I think it looks pretty good.


    1. Sweet, nice use of the tab and you even customised it. You’re welcome.

  3. J. Best says:

    Thanks for the help Dave! Used this on a site I designed and it worked beautifully. Great tutorial!

  4. sanjay says:

    Any tips on how I can show this tab only when a user is logged in? I would like to show it only when a subscriber is logged in.


    1. Of course, you can just wrap the whole function in a is_user_logged_in conditional statement, such that when they’re logged in, the tab is shown and if they’re not, it’s omitted.

  5. d says:

    Are there any examples of this on a live site?

  6. Oscar says:

    Thanks for the great tutorial. Is there a way to make the tab refer to an image rather than a section of the website? I’d like to be able to open up a support info image while allowing the user to stay on the same page. Thanks in advance and have a great day!

    1. Well, yes, you could, for example, make the hyperlink reference an image (href=”http://……jpg”) and force it to open in a new window (target=”_blank”), thus not closing or navigating away from the current window. Another way would be to have it pop-up in the middle of the screen in a lightbox effect, but that would require some jQuery and I’m not immediately sure how to do that, but a bit of research should quickly yield an answer.

  7. Janey Lee says:

    How do you get it to be on the right?

    1. In the CSS, change left: 0px to right: 0px. That’ll do it ;)

  8. Sarah says:

    Hi Dave, Is there a way to control the tab on browser resizing? Mine is moving on browser resize….

    1. Hmmm, where is it moving to? In what browser? The CSS is quite strict and explicit and should keep the tab in a fixed position.

  9. Dylan says:

    Hi Dave

    This is great just what ive been looking for, i just have one question.

    Is there anyway to attach it to the edge of the page instead of attaching it to the edge of the browser window?

    if im not clear please see this image

    i use wordpress


  10. Geoff says:

    Hi Dave, hope you’re well. Just trying to use the tab on another site of mine which is currently using the Optimise Press theme. Any iedas about where the div tag goes? not much going on in the footer.php as far as I can see!!!


    1. Geoff,

      Frankly, you can put it wherever your want in the theme: I just suggested putting it in the footer to load it last.

  11. Casey says:

    Thanks a lot for this tip! I used it as a “Support” tag. The user would fill out a form and it (The form) would be sent to Zendesk.

    Thanks so much again ;-)

  12. Chris says:

    Great tutorial, it worked really well. I’m using it on a single, scrolling events website and was wondering if it’s possible to have it show at a certain spot, like at 2/3 of the way down the website. Thanks!

    1. Sure. Just change position: fixed to position: absolute and change the “top” value to a number of your choosing. Remember that some screens are shorter than others…

  13. Tom says:

    Is there a way to only show on home page? Maybe using a .page-id-####?

    1. Sure. When you enter the div in footer.php, wrap it in a conditional tag using is_home().

  14. Nina says:

    I would like to add a button like this to my site, however I am not sure in which footer.php to put the div in…I am using the Virtue premium theme and it has a fotter.php which is empty(??) and a /template/footer.php

    Could you tell me which one I would need to copy into my child theme and add the div in? Also, is it possible to use just css for the button and not an actual image?
    Thank you very much for your help!

  15. Dale says:


    I have come across your post and this is exactly what i am looking for, the only thing i need to do is include this if the user is logged in, i see your comment above about this, but can you provide me with the exactly code to import and tell me which file this needs to be inserted into? Sorry i am a bit of a wordpress novice!

    Your help would be greatly appreciated.

    Kind regards

    1. Hi Dale,

      Sure thing. This would take the form of something like this.

  16. Dale says:

    Many thanks for your reply, that has worked a treat. Thanks again for your assistance.

Leave a Reply