WordPress Tabs Plugin

WordPress Tabs examples
WordPress Tabs/Likno Web Tabs Builder features

The solution consists of a combination of 2 parts:

1. The Likno Web Tabs Builder Add-in

This already exists inside your Likno Web Tabs Builder installation (v2.0.200 or above only - no need to download and install separately), and can be accessed through the following menu:

You can use the add-in to compile the tab controls for use on your WordPress pages.

2. The WordPress Plugin

This is the plugin that you need to install on your WordPress blog.

Through the plugin you can upload the files of your tabs, choose whether or not an anchor element will be printed and finally choose the positioning method of it.

The Wordpress plugin supports 3 tab control positioning methods:

- "Shortcode" method: This means that you can add this tab control inside the post or page that you want, using the visual editor. You will find the appropriate button there. Just click it and select the tab control you want from the list. The tab control will appear only on the single view of your page/article. However, there is an option 'Show tab control everywhere' that enables you to show this tab control in every place that this page/article shows(for example a category archive view etc...).

- "Template tag" method: Using this method you should copy and paste the generated code, inside the template file (for example header.php) that you want your tab control to appear.

- "Widget" method: A widget instance of the selected tab control is initially created and found in the widgets administration page (should be at 'YOURSITEURL/wp-admin/widgets.php'), under the "Inactive Widgets" section. Just drag this widget instance and drop it inside the Widget Area that you want.

The Wordpress plugin also has an option to print or not an html anchor element which should match the Element ID you selected for the Likno Web Tabs Builder project:

Download and install the Likno Web Tabs Builder Plugin on WordPress

Step 1: Download the plugin's zip file

Download "WordPress Tabs" plugin

Release Version:	1.2
License / Size:	GNU/GPL 84.5 KB
Requirements:	This "Plugin" version (i.e. code installed on WordPress) requires Likno Web Tabs Builder v2.0.200 or above in your PC (click [About] on its [Help] menu to view its version). Download the latest Likno Web Tabs Builder if not installed yet. The "Add-in" (i.e. code within Likno Web Tabs Builder) is already included with the installation (since v2.0.200, Jun. 2011), so no separate download link exists for install.

Step 2: Install the plugin to your WordPress blog

• Extract the likno-tabs-wordpress-plugin.zip file you downloaded in the previous step
• Upload the entire likno-tabs-wordpress-plugin folder (not just the files inside) to your plugins directory in your blog (ROOT/wp-content/plugins)
• ... OR use the WordPress Install New Plugin subpanel (found at Plugins -> Add New -> Upload) and upload the likno-tabs-wordpress-plugin.zip file you downloaded, if only you are installing it for first time(if the plugin is already installed you have to use the previous install method, or use the automatic update link at Plugins panel). You can check here for instructions.
• Activate the plugin in your administration panel

Configure/Use the Likno Web Tabs Builder Plugin on WordPress

Step 1: Configure your tab control

While in WordPress:

• Login to the Admin area of your WordPress blog.
• Go to the Likno Web Tabs plugin options (found at "Settings" after installing the plugin).
• Configure the tab control options, don't forget to select Tab Control Positioning Method.
• Click "Save Settings".

Switch to the Likno Web Tabs Builder desktop application:

• Step 1 - Configure your tab control (colors, borders, effects, styles, etc.) through the Likno Web Tabs desktop application.
• Step 2 - Choose how your tab control is "positioned" inside your WordPress posts/pages.

  While in Likno Web Tabs Builder software, you will find the Positioning property at the bottom of the Project Panes tab.

  There are 3 sub-options:

  "Insert inside a page Element (div, span, td, etc)", "Replace a page Element", "Replace a page Image" (by using it's filename).
  For the first 2 sub-options you can select from Likno Web Tabs WordPress plugin to print a page element (you can also choose not to print the page element but to provide Likno Web Tabs application with an already existing Element ID).
  
  
  
  Copy the element id from the WordPress Plugin (item [1] on screenshot, if of course you want to print the element), select "Insert inside a page Element (div, span, td, etc)" or "Replace a page Element" as Container Positioning (item [2], and paste the previous copied id(item [1] on screenshot) inside the Element ID field (item [3] on screenshot).

View how positioning works through detailed examples/use cases

Step 2:Setup, Compile and Upload the tab control files

While in Likno Web Tabs Builder software:

• Compile the tabs using the "Add-ins WordPress Project Compile WordPress Project" (item [1] on screenshot).
  

  Note: When asked for "Site_Root folder" use any local folder on your hard drive you like for the compiled files to be produced.

• Now you can upload the produced ZIP file using the 'Upload ZIP' file button at plugin settings.

Note: The name of the tab control is again the one you selected in the options of the plugin (default is 'tabs'). You can change these options in the Tools Project Properties Folders in the Likno Web Tabs Builder application. It is strongly recommended not to edit the above properties, just leave them default.