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

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!

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.

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

insert the code and press “update file”

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.

SLR Lounge used to be hosted on Go Daddy, but after hours lost dealing with various issues, from injected malware to slow loading times and beyond, we decided to transfer SLR Lounge to Bluehost. If you’re not convinced, we compare them side by side in this SLR Lounge article. We had been happily using Bluehost for various websites; but we never got around to using it for SLR Lounge until a few recent experiences pushed us over the top.

Some of you may feel as married to your hosting as you are to your Camera brand, as the transfer process can seem daunting and time-consuming. However, switching your hosting (from Go Daddy or any other hosting service) to Bluehost can be as quick as a couple of hours, depending on the size of your database and the number of files; and you can do so with little to no downtime for your site.

The following methods is based on my experience with transferring 3 different sites from Go Daddy to Bluehost. There are a variety of ways to achieve the same result; and there may be unique situations that I have not encountered. However, the following steps should work, or at least give you a good reference, for transferring your site.

So let’s get right into how we can transfer, switch, migrate (or whatever else you want to call it) your hosting to Bluehost.

If you’re using a WordPress site, you can either follow the steps (1 through 8) in the second portion of this tutorial (and migrate your entire site, it’s databases and all of it’s content); or you can go another route that I’ll call the “Alternate Route”.

This method does not involve transferring your existing databases; but instead, it only transfers all of your content. Imagine moving into a new home (as opposed to moving your entire house). The negative aspect of this method is that you have to reinstall all of your plug-ins, set all of your permalink preferences again, and make a plethora of adjustments to get your site to exactly match it’s previous state. The time and effort this method takes depends greatly on how much you strayed from the default WordPress settings, how many plug ins you’re utilizing, and how close you want your site to match the previous version.

The trade off is that this method is a bit more straight forward than the one outlined below; and may be easier if you’re not used to working with MySQL, PHPMyAdmin, and FTP Programs.

Here are the steps if you want to use this method.

a) Get a Bluehost hosting account ( Click Here)
b) Assign the domain to your Bluehost account (see step 7 below for instructions)
c) Installing WordPress (see this SLR Lounge Article for instructions)
d) Export Content from Old Blog and Import Content to New blog. (See This Tutorial).

However, if you want to transfer the entire contents of your site, whether it be running WordPress, another CMS, or any other content you can also follow the rest of the steps in this tutorial. Imagine moving your entire home with the entire structure in tact (as opposed to moving into a new house).

a) For Go Daddy, make your way to your “Hosting Control Center”
b) Click “Manage Account” > Click “Databases” > Click “Mysql” (as shown below)

c) Click “Manage via MyphpAdmin” and Log in
d) Click on your database (on the left side)
e) Click the “Export” tab. You should see the following:

f) Check the first 4 boxes in Structure and the save as file box
g) Enter a name you’ll be able to identify into save name template,” and click Go.

a) Use an FTP Program to connect to your site (If you don’t have a free FTP program, see step 6 in this tutorial).
b) Create a folder on your desktop and transfer all of the files from your site into that folder you created.

a) First off, create a Bluehost account create (by clicking here) or Sign into your existingBluehost Account.
b) Click “Mysql databases”
c) Enter the name of your database in the create new database  field
d)Add new user  if you would like (or if you don’t have any users) making sure the user has full privileges
e) Under the Add User to Database  section, match up the User with the database you just created.

In the example of a WordPress site, you’ll go into your wp-config file and change the database name, username, password, and host. Your username and password will be the one set up in the previous step. If you’re not using WordPress, find the file that contains all of your database information.

Using your FTP program, create a folder for your site in the root directory and upload your files from the folder you created in step 2.

a) From your Bluehost C Panel, go to Myphpadmin

b) Click on the database you created in step 3
c) Click import and browse for the file you exported in step 1.

1) Follow the instructions in this tutorial Your directory will be the FTP folder you created in step 5.

Note: For Godaddy, the Authorization (EPP) Code is in the domain manager. (See below)

If everything went well, your site should be transferred. If you see an “error connecting to the database”, your wp-config file has some incorrect information. Double check the fields and re upload using the FTP.

UPDATE 10/7/2011: We’ve just released a killer new theme with AJAX commenting, AJAX slideshows, and more!  Click here for more information! Or if you’re not convinced, check out this example.

This theme is still in beta testing, as we’re still ironing out a few minor kinks here and there. However, it still rocks and for now, it’s free!

All three prior themes, we’ve designed an intuitive back end, a.k.a an options page. This means no more messing with the Theme Editor and altering the code of the site. Everything, from the border colors to the link text to the banner image, profile image, and logo image is completely controlled by the back end. Next, we cleaned up the code to display properly in all major browsers (Internet Explorer, Firefox, Google Chrome, Safari, and Opera). Lastly, we added some great functionality to each theme, as we’ll describe in further detail below. There are plenty of features that we just don’t have space to mention here, but feel free to click the examples and see the video tutorials for more information.

The first theme is called PhotoFeature. We designed this because we were tired of all of our great posts from a year back never getting any love, as most of of our readers stopped after the 3rd page or so. The featured slider gives your readers a chance to view your featured content.

Download: Sign Up by Clicking Here
Instructions: Click Here

If you think the featured section looks a little too busy for your taste, go with a simple flash banner instead. All the same customization ability with the addition of a flash banner instead of the featured section.

Download: Sign Up by Clicking Here
Instructions: Click Here

Still too many bells and whistles for your taste? Go with PhotoLounge, a laid-back, simple version of the two themes mentioned above. We took out the featured section and the flash header and left you with a clean, basic blog with sleek typography and easy customization.

Download: Sign Up by Clicking Here
Instructions: Click Here

We hope you enjoy!!!

Example: Click Here
Download: Signing Up HERE (You receive access to all 4 themes with one sign up)

1) Install WordPress. For video instructions, see this post.

2) Download the Theme by Signing Up HERE (You receive access to all 4 themes with one sign up)

3) Install Theme and begin customizing by clicking “Photo Feature by SLR Lounge Options” in the Appearance Tab

4) Customize the colors of your site using Adobe’s Kuler (Optional Resource)

5) Continue Customizing Your Blog by Continuing with the “Photo Feature by SLR Lounge Options” in the Appearance Tab

NOTE ADDED 4/12/2010: TO INSERT QUOTATION MARKS, APOSTROPHES, EXCLAMATION POINTS AND OTHER SPECIAL CHARACTERS, FOLLOW THIS RESOURCE: http://www.tedmontgomery.com/tutorial/htmlchrc.html

6) Customize The Footer

Note: comments have been closed for this post. All questions and issues can be posted and resolved on the forums, found at http://www.slrlounge.com/forums

Live Example: Click Here
Download: Signing Up HERE (You receive access to all 4 themes with one sign up)

1) Install WordPress. For video instructions, see this post.

2) Download the Theme by Signing Up HERE (You receive access to all 4 themes with one sign up)

3) Install Theme and begin customizing by clicking “Photo Feature by SLR Lounge Options” in the Appearance Tab

4) Customize the colors of your site using Adobe’s Kuler (Optional Resource)

5) Continue Customizing Your Blog by Continuing with the “Photo Feature by SLR Lounge Options” in the Appearance Tab

NOTE ADDED 4/12/2010: TO INSERT QUOTATION MARKS, APOSTROPHES, EXCLAMATION POINTS AND OTHER SPECIAL CHARACTERS, FOLLOW THIS RESOURCE: http://www.tedmontgomery.com/tutorial/htmlchrc.html

6) Install an FTP Program (Filezilla) and Connect to Your Site (The following video was created for the SLR Lounge Theme 1.0, but the same instructions should apply to this theme)

7) Go to http://www.lynk.de/wordpress/flashfader/ and download the plugin, FTP files (NOT FOLDER) of the Flashfader into the Plugins Folder, and Finalize Your Customization

8) Change the flashfaderhtml document

NOTE THIS IS AN ADDITIONAL STEP ADDED 4/12/2010 TO CORRECT THE MENU DROP DOWNS FROM HIDING BEHIND THE FLASH BANNER

In order to have your menu drop downs appear over the flash banner, you need to alter the flashfaderhtml.txt document

a) Open your ftp program
b) Log into your site
c) Navigate to wp-content > flashfader > flashfaderhtml.txt
d) Drag flashfaderhtml.txt to your desktop and open with any text editor
e) Copy and paste in the following code: <param name="wmode" value="transparent" /> right before the object closes: </object>

For example, the flashfaderhtml.txt file in our example blog reads <object type="application/x-shockwave-flash" data="http://slrlounge.com/testwordpress/wp-content/plugins/flashfader.swf" width="1000" height="350"><param name="bgcolor" value="#ffffff" /><param name="movie" value="http://slrlounge.com/testwordpress/wp-content/plugins/flashfader.swf" /><param name="FlashVars" value="path2xml=http://slrlounge.com/testwordpress/wp-content/flashfader/images.xml" /><param name="quality" value="high" /><param name="wmode" value="transparent" /></object>

Your code should not need to be altered except for the inserting the code we talked about in step e. The whole code is mentioned above for your reference. Notice the <param name="wmode" value="transparent" /> right before the end of the code. However, yours will be slightly different because your url obviously isn’t slrlounge/testwordpress

f) Replace the new flashfaderhtml.txt document on your site with the one you changed using the ftp program.

9) Customize The Footer

Note: comments have been closed for this post. All questions and issues can be posted and resolved on the forums, found at http://www.slrlounge.com/forums