Advertisement

Side Tab WordPress Plugin | Free SLR Lounge Download

Please report all problems and solutions on our forums.

IMPORTANT UPDATE 7/10/2012:  WE’VE UPDATED THE PLUGIN TO BE COMPATIBLE WITH WORDPRESS 3.4 .  

WE’VE ALSO ADDED ADDITIONAL FUNCTIONALITY, INCLUDING THE ABILITY TO CONTROL THE WIDTHS OF THE SLIDING TABS, THE FONT INSIDE OF THE SLIDING TABS AND MORE!  

TO UPDATE, SIMPLY DOWNLOAD THE LATEST VERSION AND REPLACE THE OLD VERSION VIA FTP OR SIMPLY DOWNLOAD THE LATEST VERSION, DELETE THE PREVIOUS VERSION AND UPLOAD THE UPDATED VERSION.

For an example of the working plugin, visit this website of this Los Angeles Wedding Photographer or check out their Los Angeles Wedding Photography Blog

DOWNLOAD FREE PLUGIN: CLICK HERE

If you’re looking to modify the width of your side tabs, please read this article.

We all know how important the real estate on your screen is. If you add a “Facebook Badge,” a user profile, a contact form, or any other item or section to your site, you run the risk of cluttering your page or introducing inconsistent design elements to your page.

The “Side Tab” WordPress plugin is designed to solve this very problem by inserting up to 3 tabs that are affixed to the left side of your website. These tabs use jQuery to slide open when your user hovers his or her mouse over the tab. You have full control over the content of each tab, as it utilizes WordPress widgets. You also have full control over the color of the tabs as well as the labels (the text) of the tabs.

The best way to illustrate this is by showing an example. This very page (yes, the one you are currently reading) uses this plugin; and so does our photography blog. Notice how the items inside of the tabs contain information that would either not fit on the page or would not look good on the page as a static item. Having a sliding tab gives you the freedom to insert items that would otherwise not fit on the page either because of their size or because of their inconsistent look.

So you want to use the pluggin? Here are the steps to downloading and installing the Side Tab WordPress Plugin

Overview of Installation

1) Download Plugin
2) Upload Plugin
3) Activate Plugin
4) Edit Plugin Settings (of tabs, text on tabs, color of text)
5) Add Widgets (in Appearance Menu)
6) Enjoy and Share!

Detailed Instructions for Installation

1) Download – the pluggin by clicking here(If clicking does not prompt you to save the zip file, please right click on the link and choose “save link as”

2) Upload – now that we have the plugin saved on your computer, the next step is to get the plugin into your /wp-content/plugins directory. There are two methods for doing this:

Method a) Dashboard – This is the easier method of the two.

i. In the WordPress Dashboard (www.yoursite.com/wp-admin) of your site, click on “Plugins” -> “Add New”

Please click the “Add New”

ii. Click the “Upload” button at the top of the page (see image below). Then press the “Choose File” button, find the zipped file on your computer, select the file, and click “Install Now”

IMPORTANT NOTE FOR MAC USERS. YOUR COMPUTER MAY HAVE AUTOMATICALLY UNZIPPED THE FILES. HOWEVER, YOU NEED TO UPLOAD A ZIPPED FILE IN ORDER FOR THIS METHOD TO WORK. PLEASE ZIP UP THE FILES BEFORE UPLOADING OR YOU CAN USE THE SECOND METHOD MENTIONED BELOW.

upload_choose_install_tagged

Method b) FTP program – If you download Filezilla or any other 3rd party FTP software, you can log into your site and navigate to the /wp-content/plugins directory and drag and drop the unzipped plugin folder into the directory.

3) Activate The Plugin – Press “Activate Plugin”

4) Edit the Footer.php document – Go to the Footer.php file in the Editor (Appearance -> Editor -> Footer.php) and enter the following line of code: <?php if(function_exists('get_side_tab'))get_side_tab();?> (code with unnecessary spacing may lead to an error).

select_footer_tagged

insert the code and press “update file”

Using the plugin

5) Edit Side Tab Settings – After activating the Plugin and adding in the footer code, go to your dashboard and look under the “Settings” section where you’ll find “Side Tabs.” Click “Side Tab” and select your desired color for the tab, the labels (the text on the tabs), and the color of the labels. Add and remove the tabs from this screen as well. You can add up to three tabs.

6) Add Content to the Tabs – Next click on ‘Widgets’ under ‘Appearance’ and see the “Side Tab1,” “Side Tab2,” and “Side Tab3″ (NOTE: There will only be Side Tab2 and Side Tab3 on this screen if you chose to use 3 tabs in the previous step). In these tabs, drag in your Recent Posts Widgets, Archives Widgets, and other widgets. If you’re trying to add third party information, like Facebook Fan Page information, etc, insert a “text” widget and input the necessary code. Make sure you click Save after you’ve entered in your desired information.

Example: If you would like to add a “Facebook Badge,” Go to http://www.facebook.com/badges/, navigate to the following screen, copy the code, and paste it into a text widget like you see above.


Advertisement
  • http://www.joeysphotography.co.za Joey’s Photography

    Great plugin!!! How do I change the label wording? from MORE INFO to for instance FACEBOOK?

    • Photog

      Thank you so so much for posting this.  Designing my own blog with no developer/coder background and I pulled this off thanks to you.  Also you saved me the main reason why I was going to pay that other company – just for the tabs.

  • http://www.joeysphotography.co.za Joey’s Photography

    Got it, sorry blonde moment there

  • http://www.xtence.be Xtence

    Great plugin indeed, iw onder if there’s a possibility to ease the action a little bit, but still it’s fantastic !

  • steph

    thanks for this plugin, it’s fantastic! how did you add the twitter widget? cant find any instructions on it :(

  • http://www.elisabethjoyphotography.com Elisabeth

    Im also wondering about the twitter option?

  • http://www.linandjirsa.com admin

    For the twitter option, just add a text widget and put in the code.

    Get the code from here: http://twitter.com/goodies/widgets

    Enjoy!!!!

  • http://www.linandjirsa.com admin

    Joey:

    To change the “more info” to “facebook” go to the settings under (settings -> side tab)

    There you can manage the text and colors.

  • http://www.bryanmorrisphotography.com/blog Bryan Morris

    I’ve been searching the internet over trying to find this plugin. I had a suspicion it was a plugin but still was not sure as I saw it coming up mainly in the prophotoblog templates. You are a real God sent. Thanks for all you’re doing.

  • http://www.e-presse.com/surfnews Jean Michel

    Hi
    There is no way I can activate the plugin for a test on my local network .
    Everytime I get this error message
    Parse error: parse error in E:\wamp\www\magazine\wp-content\plugins\side-tab\side-tab.php on line 140

  • http://www.linandjirsa.com Pye

    Jean,

    No need to test locally, most likely isn’t working because you don’t have the server side scripting installed that is needed for the plugin (which we can’t provide support for). Follow the instructions to install onto your actual server, and do your testing on your site live. If you don’t like the plugin, it can always be disabled/uninstalled. Hope this helps.

    – Pye

  • http://www.e-presse.com/surfnews Jean Michel

    Thanks for your reply. I will install it on the site server

  • http://www.blog.nogarol.com.br Paulo Nogarol

    Thank you for sharing this great plugin!

  • http://www.linandjirsa.com admin

    Motti:

    I’m sorry about your troubles with the plugin.

    This plugin does not alter anything in the php files, so it is not able to corrupt any files on your server. It has been tested on over 20 different themes and has worked fine on each of them.

  • http://www.photosbymotti.com Motti

    Hi there,

    I am positive it did in order to make it better I think it would be important to look into it.

    It changed my default-widgets.php file (line 537) from this:
    $title = apply_filters(‘widget_title’, empty($instance['title']) ? __(‘Recent Posts’) : $instance['title']);
    if ( !$number = (int) $instance['number'] )
    $number = 10;
    else if ( $number 15 )
    $number = 15;

    to this:
    $title = apply_filters(‘widget_title’, empty($instance['title']) ? __(‘Recent Posts’) : $instance['title'], $instance, $this->id_base);
    if ( !$number = (int) $instance['number'] )
    $number = 10;
    else if ( $number 15 )
    $number = 15;

    The part “$instance, $this->id_base” was added and corrupted the sidebar.

    I have a backup of my files so I was able to replace it but I had to redo all my sidebar with all my custom settings.

    Hope that helps
    Motti

  • http://www.delontshutter.com Delont

    thank you for sharing….i like your themes

  • Gwen

    I uploaded the file and it won’t let me activate. When I press activate it says The website cannot display the page.

  • Gwen

    Forgot to post the error:

    This error (HTTP 500 Internal Server Error) means that the website you are visiting had a server problem which prevented the webpage from displaying.

    • http://www.linandjirsa.com admin

      make sure you are running the latest version of WordPress. Also, make sure that you are not leaving any unnecessary spaces in the code you put into the footer.

  • http://www.nwa.ie Paul Gallagher

    Hi,

    Love this plugin,thank you !! it’s should get me the design i’m after without compromise.

    However after installing and set up – i can view it on my page but no action – it doesn’t open ?

    Any idea?

  • chris

    Hey Paul.. i’ll look into it

  • http://www.mpetersonphoto.com Mark

    Excited to find this, thanks. Love it! One question: I can’t seem to make the Twitter tab quite wide enough to display my whole Twitter profile name. I narrowed the Twitter badge itself to 120px but it still cuts off my profile name. Is there a way to make the side tab wider?

  • paul gallagher

    hi chris,

    Can yopu help me out on this?

    Paul.

  • chris

    Hi Paul:

    unfortunately, you seem to have another jquery plugin that is conflicting with ours. this plugin will not work with your current set up.

    g luck!

  • Garry

    Wow, this is a nice plugin indeed ! I’m sure you’ll have a lot of success with it. The best feature for me so far : it works with Chrome, FF AND (the lamest of all time) IE.

    However, I’d like to know : how can I make the tab go back to unseen as soon as the mouse isnt on it?

    Thanks again for the sharing !

  • Garry

    Sorry, forgot something : I want only one tab to appear but lower in the screen. I tried adding only tab 3, but only the widget text shows up, not the sliding tab. Do you have any thoughts please?

  • chris

    Hi Garry: Unfortunately, this plugin doesn’t have either of your requested functions … if you want to change it, probably have to hire someone to customize the programming.

    g luck

  • Lisa

    Fantabulous plug-in!! THANK YOU, THANK YOU, THANK YOU!! :)

    One problem, my Twitter tab is also cutting off my updates (the tab isn’t wide enough to display it all). Is there any workaround to correctly display the Twitter widget?

  • http://www.linandjirsa.com admin

    Hi Lisa:

    Unfortunately, you can’t control the width of the plugin. However, it should be very easy to adjust the width of your twitter widget (if you’re using the one found here http://twitter.com/about/resources/widgets/widget_profile)

    Just find the ‘width’ in the code that you’re pasting in!

    G luck!

  • Gwen

    Hmmm I updated the wordpress to 3.0.1. And still getting the error: This error (HTTP 500 Internal Server Error) means that the website you are visiting had a server problem which prevented the webpage from displaying.

    I get this right after I click on activate plugin

  • Justin

    Is it possible to put the tabs on the right side instead of the left side?

    • Tobie Vanrhyn

      Hey Justin
      Been searching the exact question you asked. Did you manage to get a solution to putting the Tabs on the right hand side of the screen.

      Thanks

  • Amy

    Having a lot of trouble here with this plugin. I think it’s my code, does this look right (it the last few lines in the footer)?

  • http://www.puzsart.com/blog Marcell Puzsar

    Than you SLR lounge for this plugin. With wordpress 3.0.3 it took less than 2 minutes to install. I loved the color palette feature whick makes color matching so much easier.

    An SLR follower from San Francisco

  • Brett

    I have some conflicting issues on different sites. on one, the timeout to close drawer on mouseleave doesnt work, and on the other the rollover doesnt work. I would love to contact someone for some troubleshooting.

  • http://www.jchandlerphotography.com Joey Chandler

    Can I install this from my standard install Plugin approach or is the only way to download/upload manually. I searched for this in the plugin area but couldn’t find it.

    Thanks

  • http://www.greentreemediaonline.com/wordpress/ Stephanie Gagnon

    Hi! I love this plug-in, and I’m still working on pulling together the new blog. But I’ve followed all your instructions. I’ve tried updating wordpress, and deactivating a couple different plug-ins I had activated, but they just won’t show up. Any thoughts?

  • Mior

    Great plugin , great template.

    I am using a modded combo theme PHOTOFEATURE and PHOTOFLASH. Add this plugin, but it hidden behind flash banner.

    I added in flashdadehtml. But problem not solved eventhough.

    Please help.

  • http://semakorkmaz.com sema

    nice plugin – like the one i see on superb prophoto blogs. Thanks for this.
    but i think there’s bug.
    sidebar only opens for a limited amplitude. since it’s not big issue, it causes problems with other widget applications’ dimensons like facebook likebox i used. Panels do not open as wide as the likebox’s orginal width size, i had to reduce width from the iframe code..but with this way, you can only have 2 columns of faces in likebox unlike the original likebox code lays 4 columns which is 292px and mine is 185px.

    as i can see your panels have the same issue.
    is there are way have unlimited width for panels, or redouble the width?

    sorry for my english ;)
    still it’s a good plug-in.
    thanks again.

  • http://www.laurabscott.com/blog Laura B Scott Photography

    I recently installed the side tab plugin and I am having trouble getting it to work properly. The colors of the text & tab itself is not the color it was selected to in side tabs. Also the side tab does not show up at all in firefox.

    Any advise would be great!
    Laura

  • http://www.imagestudio.ch philipp

    It is possible that the open tabs after clicking? and only close when the mouse goes away?

  • http://www.ifotobelli.com Amanda

    I installed the side tab plugin last night and using the free photoflash theme. When my sidebar slides out the first one has a black shadow under it, the second and third one slides under my rotating image on my page. Not sure what I can do to fix this. Any help would be much appreciated :)

    Thanks!

    • Trung

      Hi Amanda:

      That is actually something we’re working on with the next theme and pluggin. Currently, we have no fix for you with your current set up.

      However, please note that it is not an issues on higher resolution (larger) screens, as there will be enough room for it to slide out.

      Thanks!

  • primbonbon

    Can this plugin be installed with 3.1 wp ?

  • TT

    Any one know if there is some thing like this for Joomla ?

  • marvelous

    hello guys, i really like the plugins but is there any way to use it on another website by using Dreamweaver? Thanks

  • http://www.purehomeandhealth.com Mario

    Is there any way to exclude the tabs from a specific page (say, a private page)?

    Thank you.

  • http://www.quirkykristen.com Kristen Rice

    Ok, so I followed all the directions and got to the add code to my footer section. Went to add it and it is already there. This is what it looks like:

    © Quirky Bits n’ Pieces
    Hosted: Blogs About Hosting
    Design: E.Webscapes Designs

    <img src="/images/top.jpg” alt=”Quirky Bits n’ Pieces” />

    But when you go to the site all you see is the link your site. Can you help?

  • Nicole

    Where exactly does the code go in the footer section. I tried doing it and all i got was hte image down the bottom of my page… no tabs? what am i doing wrong?

  • Free Articles

    cool plugin mate !!

  • Jen

    I downloaded the zip file and saved it.  Went to my hosting site, uploaded files side-tab.php and dynamic-css.php (only way I could see it in my Plugins tab),  but I am getting this error code:

    Warning: include_once(admin/sidetab-ui.php) [function.include-once]: failed to open stream: No such file or directory in /home/content/13/7939613/html/wp-content/plugins/side-tab.php on line 86

    Warning: include_once() [function.include]: Failed opening ‘admin/sidetab-ui.php’ for inclusion (include_path=’.:/usr/local/php5/lib/php’) in /home/content/13/7939613/html/wp-content/plugins/side-tab.php on line 86

    Also attached an image of my menu

  • Tobie Vanrhyn

    Hey Guys
    Absolutely a fabulous theme. I have a theme that already has a slider effect on the left hand side and it causes the Side Tab to go crazy. I was hoping there is a way to change it to the right hand side of the screen. If there is some way, your help would be appreciated.

    Thanks

  • http://www.semakorkmaz.com Sema

    the original version of this plug-in is included with profoto blogs.
    there isn2t any possiblty to change parameters a lot with this plug-in.
    It2s mostly a hach of the original i think. 

  • http://www.facebook.com/people/Laura-Scott/1189901404 Laura Scott

    yay! thank you! problem solved!

  • Henner

    Looks great on all sides i check so far, but it seems not to be working on WP3.1, right?

  • http://twitter.com/adventurebee Adventure Bee

    I did everything per the instructions (as it was fairly simple and straightforward) but all I have showing is the “powered by SLR Lounge”. Can you tell me possibly what I may be doing wrong?

    http://www.adventurebee.net

  • Slates

    Great plug-in, although still trying to get it to work with photocrati theme! The code that has to be added in the footer.php can this go anywhere or in a specific line?

  • http://twitter.com/TurnipTime Harrison Houde

    if ANYONE knows a way I can make the side-bars width more, so that when it pulls out it is wider, please tell me!
    ALSO How can I do it so I can edit the width of the side-bar tab, AND how can I move them down so they arent at the VERY top of my website. 
    http://www.HarrisonHoude.com 

    • Marc

      In the plugin’s dynamic-css.php file look for this line -
      echo ‘#drawer_content_’.$i.’ {width:163px;}’;
      Carefully change the 163px to width you want.

      • http://www.amber-hinds.com/ Amber @ Au Coeur

        Marc, That works to widen the tab, but it also makes the tab load half “open.”  What’s the fix for that?  
        http://66.147.244.100/~theseagr/  

  • http://wpmututorials.com Andrea_R

    Can you consider in the next version just hooking into wp_footer rather than have people do step 4?

    All you’d need to add to the plugin is this:

    add_action ( ‘ wp_footer’, ‘get_side_tab’ ) ;

  • Ben

    No matter which colors I choose the slider background is black.  I am also searching for a way to make it a little wider.

  • Anonymous

    How’d you setup your twitter/facebook/digg sidebar on this site? I’m using the same plugin but I can’t seem to make it permanently stay on the left side of the post out of the content area, when i resize my browser. 

    You can see it on my site http://www.imamangaholic.com

  • Chelsye Bacon

    Is there anyway to add this to blogger?

  • Vincentvanrooij

    doesn’t seem to work.

  • Vincentvanrooij

    just wondering: why only 3 sliding tabs? why not 4 or 5? why not as many as one might want?

  • Michelle Bondy

    No matter what I do, this plugin will not work on my site. I have no idea why.

  • http://www.djawadreang.com/ djawadreang

    i will try this plugin on my localhost., thank you.,

  • Victor

    Is there a way to put an image in the tab instead of text?

  • http://www.amber-hinds.com/ Amber @ Au Coeur

    Hi, This looks like an awesome plugin — I saw it on someone else’s site and want to add it to one I’m working on.  I added, installed, etc. and the tab is visible, but no matter what widget I add, the tab appears to be empty on the site.  Any suggestions would be very appreciated.  
    http://66.147.244.100/~theseagr/

    • http://www.amber-hinds.com/ Amber @ Au Coeur

      Nevermind! I figured it out.

      • Puzzlepiecephotography

        I’m having the same problem.  What did you do to fix it?

  • Anonymous

    Hello,   Love the widget.  Its awsome!  I have question? I’ve managed to figure out how to make it slide out farther then the default by changing the 163 in the dynamic-css.  My problem is when the page loads the sidebar loads sticking half way out.  I was wondering if there is a fix for this? Thank You.

    • Anonymous

      I figured out.

      • amber @ au coeur

        Care to share how? I am having this same problem.

  • Kellyluczywo

    What in the world am I doing wrong?  NOTHING is showing up!  I’ve tried it several times!

    • http://www.facebook.com/profile.php?id=703175188 Michelle Bondy

      I really wish someone would reply with the answer to why it doesn’t show up for some people.

  • CBK

    No matter what I do…nothing shows up!  What in the world am I missing? 

  • Margaret

    You guys are amazing!! Really, you make it so I understand how to do this. That’s a huge deal because I am so lost when it comes to this stuff. THANK YOU!! :)

  • Kaylaaimee

    Does anyone know how to make this work with a genesis child theme that doesn’t have a footer.php? Is there a hook for it? Thanks!

  • Victor

    This plugin is outdated! Check this one out instead 
    http://splashplugin.com/ But if you should buy it you need the developer version as the regular version will only show one tab on any given page at one time!

  • Ovidiu

    Do you guys keep this plugin updated? Is it still working with an uptodate wordpress version?

  • Paul

    Get a fatal error when trying to activate

  • Paul

    Parse error: syntax error, unexpected $end in …wp-content/plugins/side-tab/side-tab.php on line 140

  • http://adventuresnhappiness.com/ Ashley

    Is there a way to make this work with Speedy php or W3 Total Cache?  When I activate either of those, the tabs no longer slide out…

  • Vinnie

    With the new WordPress 3.4 update, these Sliding SideTabs don’t work anymore. They still show up, but there is no interaction when you hover over the tabs. Clicking won’t work either. This happened right after the release and update of 3.4.

    Maybe it’s time for an update?

    • Anonymous

      officially updated! you guys are gonna love this

  • Vinnie

    For anybody who encounteres the problem that the SideTabs won’t slide out anymore after the update of WordPress 3.4, here is an solution.
    (it would be even greater if the makes of the plugin just makes an update)

    1. Download the plugin via: http://www.slrlounge.com/slrlounge_downloads/side-tab.zip

    2. Open the file side-tab.php in a texteditor (like notepad)

    3. Look for line 48, which says:
    //wp_enqueue_script( ‘side-tab-js’, SIDE_TAB_URL . ‘/sidetab.js’, array( ‘jquery’ ), ’0.1′, true );

    4. Remove the // in front of the line. It now looks like this:
    wp_enqueue_script( ‘side-tab-js’, SIDE_TAB_URL . ‘/sidetab.js’, array( ‘jquery’ ), ’0.1′, true );

    (the only difference is the removal of the // at the beginning)

    5. Upload the file via FTP on your server.

    6. Voila, ga have a beer and congratulate yourself for solving this very difficult problem ;)

    By the way: Your welcome.

    • Tim Dunnington

      This fix does not work on 3.4.1 (at least not for me). At activation time, I get an “Unexpected $end” at line 154 (last line in side-tab.php).

      • Tim Dunnington

        Okay, figured it out. You have to either have short tags enabled in php.ini, or you have to edit line 138 to “<?php"

  • CMP

    I’m having the same problem with the tabs not working anymore. Any advice on how to fix this?

    • CMP

      The update worked!! Awesome..thanks so much Vinnie!

      • http://blog.daniel-dumbrava.ro/ Daniel D.

         Same here! Thanks, Vinnie!

  • Dorel

    Is there a way to change the opacity of tabs?

  • Tim Dunnington

    Plugin author: suggest you change line 138 of side-tab.php to a full php start tag…the short tag is disabled by default, at least in the php release I installed.

    • Tim Dunnington

      Well you also have to replace every “<?=” with “<?php echo “. Whala, plugin working.

  • http://www.facebook.com/taradunstan Tara Dunstan

    Is there possibly a way to change the opacity of the tabs? I have tried everything I can within the code but it just won’t change. Thanks heaps for any help you can give. :)

  • TheCustardShark

    How might i go about editing the distance from the top of the page to the side tabs

  • Cespe4

    Getting a fatal error when I try to activate the plugin?

    “Parse error: syntax error, unexpected $end in /home/intowish/public_html/wp-content/plugins/side-tab/side-tab.php on line 153″

  • Roxana GreenGirl

    I’m trying to add the side tabs but I don’t have the footer file with my Thesis theme. How do I make it work or is not compatible with Thesis? Thank you

  • http://cupcatz.blogspot.de/ cupcatz

    is there any tut for this side tab for blogspot? T_T

  • Kaptur Studios

    Love this Plugin, works great!

    Thanks from kapturstudios.com

Read previous post:
10 Tips for High Board Diving Photography

Many of us from time to time are requested to undertake a shoot that is outside our normal genre and beyond our comfort zone. This tutorial covers the elegant and dynamic sport of Aquatic Board Diving but many of these tips are suitable for all fast moving sports

Close