Side Tab WordPress Plugin | Free SLR Lounge Download


main side tab tagged Side Tab Wordpress Plugin | Free SLR Lounge Download

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) Add php code to Footer
5) Edit Plugin Settings (of tabs, text on tabs, color of text)
6) Add Widgets (in Appearance Menu)
7) 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”

editor 680x307 Side Tab Wordpress Plugin | Free SLR Lounge Download

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 Side Tab Wordpress Plugin | Free SLR Lounge Download

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”

activate plugin tagged 680x222 Side Tab Wordpress Plugin | Free SLR Lounge Download

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 680x311 Side Tab Wordpress Plugin | Free SLR Lounge Download

insert the code and press “update file”

insert php tagged 680x344 Side Tab Wordpress Plugin | Free SLR Lounge Download

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.

settings Side Tab Wordpress Plugin | Free SLR Lounge Download

side tab color tagged 680x321 Side Tab Wordpress Plugin | Free SLR Lounge Download

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.

side tabs 680x298 Side Tab Wordpress Plugin | Free SLR Lounge Download

side tab text 680x453 Side Tab Wordpress Plugin | Free SLR Lounge Download

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.

facebook badge 680x374 Side Tab Wordpress Plugin | Free SLR Lounge Download

Like this post? Share it!

  • Tweet
  • Facebook
  • Diggit
  • Delicious
  • Diggit
  • Diggit

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

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

  • 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

  • http://www.eyecandyonline.ca/blog 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

  • http://lovelifeportraits.com Justin

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

  • 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?

  • http://fotografi.mediakreatif.com.my/ 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!

  • http://www.pbonbondays.com 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?

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

    whooops! sorry didn’t remember to add some spaces to the coding! LOL here is my Footer page info again :)

    & copy; Quirky Bits n’ Pieces
    Hosted: Blogs About Hosting
    Design: E.Webscapes Designs

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

  • http://myka-photography.com Tommy

    Hi admin,

    I am using your side tab, it is great. It works fine with fb… however when i add twitter widget, about 100px of the right hand side widget is cut off. Can you please give me some idea where i might have done wrong please?

    much appreciated

  • 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?

  • http://www.articlescolumn.com/ 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 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

  • 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. 

  • 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.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 

  • 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

  • http://www.facebook.com/chelsye.bacon 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?

  • http://www.facebook.com/profile.php?id=703175188 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.,

  • Marc

    You can use the Widget Logic plugin –
    http://wordpress.org/extend/plugins/widget-logic/

  • 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.

  • Victor

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

  • Anonymous
  • 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.

  • 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/  

  • 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.

  • Puzzlepiecephotography

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

RELATED ARTICLES


  1. Customizing Your SLR Lounge Blog Theme
  2. SLR Lounge Photography WordPress Blog Theme
  3. Installation of Your SLR Lounge Photography Theme
  4. Free Photography WordPress Themes
  5. Photo Flash WordPress Theme Download and Installation Instructions

Write Photography Tips


SLR Lounge is a resource for photography tutorials, photo news, camera reviews and more. We're in search of writers to cover a range of topics. Click to learn more about our jobs.

SUBSCRIPTIONS


Polls


What Type of Photographer Are You?

View Results

Loading ... Loading ...