FlashBlue
Fully customizable, lightweight, responsive jQuery & WordPress plugin for creating beautiful tabs with animated content

Thank you for purchasing our component. If you have any questions that are beyond the scope of this help file, please feel free to email via our email. Thanks so much!

 

Table of Contents

  1. Directories
  2. Installation
  3. Creating Tabs
    1. Tab Panels
    2. Sidebar Options
    3. Saving
    4. Previewing
  4. Creating Dynamic Tabs
    1. Dynamic Templates
    2. The Content
    3. Specifying Featured Posts
  5. Managing Tabs
  6. Publishing Tabs
    1. Shortcode Generator
    2. Template Tag
  7. Templates
    1. Folder Name
    2. Header Information
    3. Style Structure
  8. External Linking
  9. URL Linking
  10. Troubleshooting

A) Directories

source - Original source files other files are part of the source, you do not need to upload any of these to your server. Use these to change the code or style.

deploy – Preview file.

help – Help file (HTML)

slidingtabs - Plugin ZIP file to install


B) Installation

FTP Upload: Unzip slidingtabs.zip. Using your FTP program, upload non-zipped plugin folder into the wp-content/plugins.

WordPress Upload: Navigate to Plugins › Add New › Upload. Go to Upload, click on Browse, select the slidingtabs.zip file and click Install Now.

Once the plugin is uploaded, you need to activate it. Go to Plugins and activate the plugin.

Add New Plugin:

Install Plugin:

Activate Plugin:


C. Creating Tabs

To create a new Sliding Tabs entry, go to the main Sliding Tabs menu and click "Add New".

Enter a title for the Sliding Tabs entry.

1. Tab Panels

The tab panels is where you create the content for each individual tab. There are two different tab panels, one for adding HTML content and one for AJAX.

Tip: The panels can be collapsed/expanded by clicking on the title bar to save vertical space.

Content Tab:

1)  The text that will display in the tab.
2)  This is the tab's unique 'href' value and external-link 'rel' attribute (can only contain URL friendly characters).
3)  Here you can create your content in a visual editor or in plain HTML. You can also upload and include media files (like images) from the "Upload/Insert" menu.
4)  Set a background image for the content.

AJAX Tab:

1)  The Tab URL field is where you link to the content you want to load via AJAX. The rest of the fields are the same as the content tab panel (see above).

Add New Tab:

To add a new tab, click the "Add AJAX Tab" or "Add Content Tab" button below the tab panels:

Rearrange the Tabs:

To rearrange the tabs simply drag and drop the list elements inside the "Rearrange Tabs" panel. Save the tabs to show the tab panels in the new order:

In the sidebar on the right you have the option panels. Each panel contains a group of settings and can be collapsed/expanded to save vertical space.

Tip: Hover the sidebar labels to show a tooltip with info about each setting.

3. Saving the Tabs

After you're done creating the content and setting the options how you want them, the tabs needs to be saved to the database. Click the "Save" button inside the "Actions" panel to save the tabs:

4. Previewing the Tabs

After saving the tabs, the "Preview" button can be clicked. The preview will load in a modal window. Remember to save before previewing any new changes.


D. Creating Dynamic Tabs

Dynamic tabs lets you display excerpts of your posts and pages. The tabs will be generated automatically from the number of posts available or by the number you specify.

1. Dynamic Templates

The dynamic tabs uses customizable templates to display the content.

2. The Content

You can control what type of post-content to display with the settings on the Add Dynamic page:

1)  Specify the type of content you want to display and how you want to display it.
2)  Sort the posts by content and/or post categories.
3)  The text that will display in the tabs. It can either be the post title or the post date.
4)  Max length of the content-title, and alternative title length for when a image is included in the content.
5)  Max length of the post-excerpt, and alternative length for when a image is included in the content.
6)  Settings for the content image.

You can mark any post you create/edit as a Sliding Tabs featured post in the "Sliding Tabs Dynamic" metabox in the sidebar. This way you can choose to only display the posts you have marked as featured instead of all the available posts.

1)  An optional title can also be specified. This is useful if the original post title is too long for example.


E. Managing Tabs

All the saved tabs can be accessed through the Manage page:

Each entry has it's own ID that is used when publishing the Tabs. In the menu to the right of each entry you can edit, get the template embed code, duplicate, preview and delete the tabs. You can sort the entries by their title or the date they were last modified by clicking the "Title" or "Modified" links.


F. Publishing Tabs

1. Shortcode Generator

You can use the Sliding Tabs shortcode generator button on the WordPress visual editor to include the tabs in a post or page. Click the button to open the dialog window, select the tabs you want to include and click "Insert" to add the shortcode to the content:


You can also enter the shortcode manually. Enter [slidingtabs id="123"] in a post or page, where "123" should be the ID of the tabs you want to publish.

2. Template Tag

Including Sliding Tabs directly into your WordPress theme is made simple by using the slidingtabs(id, dimensions) PHP template tag:

<?php slidingtabs(id, array('width' => 700, 'height' => 350)); ?>

The first parameter of the template tag is the ID of the tabs and the second parameter (optional) is an array with the dimensions. The second parameter will override the defined width and height specified in the Admin page.


G. Templates

1. Folder Name

You can create your own templates by following a few simple steps. Go to the slidingtabs->templates plugin directory, copy/paste the 'clean' folder and rename it. For this example we will rename it to 'custom'.

Note: The folder name should not contain any spaces.

Inside the new 'custom' folder you will find the template stylesheet: template.css. The template.css file should not be renamed as the template will not be found by the plugin if the name is changed.

2. Header Information

Next we need to edit the header information in the template.css file. Enter the details you want about your template.

WordPress Plugin: "Template Name" is the name that will display in the Admin panel and should not be left blank.

/*
  Template Name: Custom
*/

3. Style Structure (prefix)

All the styles in the template.css file should be prefixed with the template's folder name ("custom"). The easiest way to do this is to use the "find and replace" function in your text editor, and replace 'clean' with 'custom'.

Below is an example of how it should look with the prefixed names changed:

div.custom-horizontal {
  position:relative;
  clear:both;
  width:850px;
}

div.custom-horizontal div.st_tabs {	
  position:relative;
  z-index:100;	
  width:100%;
  height:43px;
  margin-bottom:-1px;
  overflow:hidden;
}

Note: You need to create your own CSS styles to add icons to the left of Tabs like Tab Icons. A sample CSS is in source/css/tab-icons.css file.


H. External Linking

You can link directly to any tab by adding links anywhere on the page. Below is an example of how it's done:

<a href="#tab-2" class="st_ext" rel="slidingtabs_1" />

External-Link Attributes:


I. URL Linking

You can also target tabs with the URL:

http://www.your-url.com/#tab-2

The URL's hash value (#tab-2) should match the rel attribute/slug of the tab you want to open.


J. Troubleshooting

Follow the steps below to troubleshoot issues with the Sliding Tabs WordPress Plugin:

Twitter Facebook Google+ Linkedin Deviant Art Behance Dribbble Flickr YouTube StumbleUpon FriendFeed Tumblr RSS Feed