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
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.
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.
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.
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.
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).
To add a new tab, click the "Add AJAX Tab" or "Add Content Tab" button below the tab panels:
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.
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:
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.
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.
The dynamic tabs uses customizable templates to display 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.
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.
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.
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.
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.
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 */
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.
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:
href
: Must match the rel
attribute of the tab you want to open (this is the tab's slug value).class
: Each external link must have the .st_ext
class.rel
: Must match the main container id
of the tabs you want to target.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.
Follow the steps below to troubleshoot issues with the Sliding Tabs WordPress Plugin:
wp_head()
and wp_footer()
functions. Also make sure <?php wp_head(); ?>
is the last thing loading in your <head>
tag.
wp_enqueue_script()
function. See http://codex.wordpress.org/Function_Reference/wp_enqueue_script for more information on how to implement this.