Description
Provides a function to output a user controled dynamically tabbed navigation system with optional drop down menus in Wordpress. Basically, it makes adding dynamic tabs to your Wordpress blog/theme easy.
…more info
- dTabs can be easily added as an option in themes.
- Tabs can be made for the posts page, the front page, individual posts, categories, pages, the archives, the bookmarks, and external links.
- Tabs for categories and pages have optional dropdown menus of their sub-categories/sub-pages, while archives and bookmarks have non-optional drop down menus.
- Tabs are set up by the user via administrator preferences, while their properties and appearance can either be set by the user via administrator preferences or within the theme’s css.
Recent Changes
Version 1.2.2 29/04/2008
- Fixed a bug introduced in version 1.2.1 that prevented tabs with non-word characters in their name being selected (reported by Joy).
Download the latest version
If you find this plugin useful then please consider making a donation to help fund it’s further development.
Requirements
As of version 1.2, dTabs requires Wordpress Version 2.5 or greater for full functionality.
Installation
- Extract dtabs.zip on your local machine.
- Upload dtabs.php to your Wordpress Plugins directory.
- Activate dTabs in the Plugins section of the admin control panel.
Please note that if your theme is not pre-enabled for dTabs you need to paste a snippet of code into your theme before your tabs will appear on your blog, alternatively/in addition you could ask your theme’s author to pre-enable your theme.
Updating
To update follow the instructions for installation, writing over the old dtabs.php in your plugin directory.
Uninstallation and deactivation
To uninstall dTabs, click on uninstall on the Manage > Tabs admin panel. This will remove all of dTabs’ settings and deactivate the plugin, if you would like to keep your settings for future use, then simply deactivate dTabs on the Plugins admin panel as you would any other plugin.
Themes pre-enabled for dTabs
Kubrick tabs
Please feel free to add any more themes to list by commenting on this post :-).
Adding dTabs to your theme
To insert the tabs into a theme which is not pre-enabled, just copy and paste the code below into a template file corrisponding with where you wish your tabs to appear (most people will probable use header.php). The only requirement is that it is placed within the body html tags (ie somewhere after the <body> tag in header.php, before the </body> tag in footer.php, or anywhere in any other template file).
<?php
if (function_exists('dtab_list_tabs')) {
dtab_list_tabs();
}
?>
|
If the dTabs plugin is activated, this code will output your tabs. If it is not then it does nothing, your theme will display as normal, (minus your dynamic tabs).
The only thing left to do is add css formatting to your tabs and drop down menus, mainly so that a) the selected tabs are displaid differently to the non-selected tabs, b) that the drop down menus are positioned correctly in relation to their tabs, and c) that the tabs are displayed on the same line (ie if you want a horizontal navigation menu).
A good starting point for this is checking out the CSS section on the Manage Tabs admin preference pane. Ticking Automatic css generation will display some example css for you to work on. While the box is ticked the css will automatically be inserted into the header of every page in your blog. If you are pre-enabling a theme for public release then you will need to insert the css for the tabs into your theme’s css file.
The tabs will appear in your html as a list of links in the following format:
<li class="tabselected"><a href="Tab URL/Path/Permalink" id="Tab Name_tab">Tab Label</a></li> for selected tabs
<li class="tab"><a href="Tab URL/Path/Permalink" id="Tab Name_tab">Tab Label</a></li> for none selected tabs
The links will be wrapped within <ul> tags with a class of tabbar:
<ul class="tabbar">
<li class="tabselected"><a href="Tab1 URL/Path/Permalink" id="tab1_tab">Tab1 Label</a></li>
<li class="tab"><a href="Tab2 URL/Path/Permalink" id="tab2_tab">Tab2 Label</a></li>
<li class="tab"><a href="Tab3 URL/Path/Permalink" id="tab3_tab">Tab3 Label</a></li>
</ul>
By default this will create an unordered list of tabs - a vertical dynamically tabed navigation system.
dtab_list_tabs() has three parameters which enable you to modify it’s output:
dtab_list_tabs('before=""&after=""&outputjs=1')
- before
(string) Optional: text/html to place before each link. There is no default.
- after
(string) Optional: text/html to place after each link. There is no default.
- outputjs
(boolean) Optional: 1 outputs javascript with the tabs, 0 doesn’t (so that a javascript file can be included with the theme, which is more efficient than sending it with each page). The default is 1.
Any drop down menus will simply be a list of links to any subcategories for that tab enclosed in div tags with a class of “dmenu” and an id of “tab name_menu” eg:
<div class="dmenu" id="Downloads_menu">
<ul>
<li><a href="subcategory 1 url">subcategory 1 name</a></li>
<ul>
<li><a href="subcategory 1.1 url">subcategory 1.1 name</a></li>
<li><a href="subcategory 1.2 url">subcategory 1.2 name</a></li>
</ul>
<li><a href="subcategory 2 url">subcategory 2 name</a></li>
<li><a href="subcategory 3 url">subcategory 3 name</a></li>
</ul>
</div>
To check for the name of the current tab (using a pre-enabled or manually enabled theme with the dTab plugin installed and activated) take a look at the source of any post/page/category/etc and the name of the current tab will be contained in a comment just below the html for your tabs.
Examples
- The tabs on this site were made and are managed using dTabs.
- Kubrick tabs - a Kubrick (WP’s default theme) pre-enabled for dTabs
For examples of slightly more advanced css than that in the Tabs Options pannel, take a look at the css files in Kubrick tabs or on this site (style.css/style.css.php).
Donate
If you find this plugin useful then please consider making a donation to help fund it’s further development.
Known Issues
I have experienced problems after restoring my database from a backup. This problem is due to the way in which Wordpress stores data for plugins and how certain scripts export this data when making backups. There isn’t much I can do to prevent it, but the problem can be fixed by reseting your tabs.
Future
Any suggestions? Let me know
History
Downloads Per Day
Version 1.2.2 29/04/2008
- Fixed a bug introduced in version 1.2.1 that prevented tabs with non-word characters in their name being selected (reported by Joy).
Version 1.2.1 20/04/2008 (456 downloads)
- Fixed a bug introduced in version 1.2 that prevented menus fading out for tabs with non-word characters in their name (Reported by Mike and Morgan).
Version 1.2 2/04/2008 (664 downloads)
- Improved improved support for static front pages
- Updated javascript to properly support Safari 3 (and dropped support for Safari 2)
- Updated javascript to fade drop down menus in and out
- Made javascript output optional (so a javascript file can be included with themes)
- Depreciated dtabs_echo_dtabs, replaced with dtabs_list_tabs
- Removed Tabs Options pannel
- Moved automatic CSS generation option to Manage Tabs Panel
- Dropped before and after admin options
- Rewrote default CSS, making it more complex but producing half decent looking tabs
- Used register_activation_hook to set up tabs upon activation
- Introduced activation message
- Introduced ability to uninstall
- Integrated into WP 2.5 UI
- Made other minor changes to streamline the interface
Version 1.1 18/12/2007 (1045 downloads)
- Added full support for static front pages
- Added suport for automatic update checking
- Prepared for internationalisation
- Fixed several empty array bugs (reported by Joost Verweij and others)
Version 1.0.4 16/10/2007 (390 downloads)
- Fixed ambiguity bug (reported by Julian) introduced with 1.0.3
- Fixed a bug also introduced with 1.0.3 that prevented dTabs from recognising sub categories
Version 1.0.3 15/10/2007 (6 downloads)
Verson 1.0.2 - 17/08/2007 (240 downloads)
- Fixed the zero bug (reported by Gregg Mendez) where in certain circumstances a “0″ was added within tabs’ links tags - invalidating the html.
- Fixed the slashes bug (reported by AJ) so slashes are stripped from tab labels
- Rearranged the order of tags for tabs so that before and after parameters are applied within the list item tags, to enable Gina’s suggestion to allow tabs to stretch and expand - i.e. dynamic css.
- Minor update to default css
Verson 1.0.1 - 03/04/2007 (496 downloads)
- Fixed behaviour for page tabs so that they cannot be confused with categories of the same id number.
- Put tabs in an unordered list - replacing the <div> tags with <ul>s and <span> tags with <li>s.
Verson 1.0 - 09/02/2007 (479 downloads)
- Added simple dynamic menu functionality - tabs that link to categories and pages can have a css/javascript drop down menu listing any subcategories, sub-pages, archives, or bookmarks in a hierarchal tree.
- Fixed the problem with the default tab present upon installation or after resetting the tabs so that it can be selected.
- Fixed the bug caused by database changes brought in with WP 2.1 (reported by James) where pages were no longer listed in the Modify > Tabs admin pannel.
- Added ability to make tabs for pages, subcategories, archives, and bookmarks (previously it was only super-parent categories and pages).
- Improved the method by which the current tab is selected - now all tabs linking to the current page/post/category and it’s parents are taken into consideration, and the closest match is selected.
Verson 0.911 - 14/08/2006 (645 downloads)
- Fixed behaviour for blog/main page tab so that it can be selected and so the link points towards the blogs web address (instead of the website’s root directory).
Verson 0.91 - 06/06/2006 (327 downloads)
- Added options > Tabs admin panel, with the following features:
- Optional automatic (basic) css generation/example.
- Optional automatic css output into any theme.
- Option to create vertical tab interface (as opposed to horizontal by default).
- The ability to add html before and after each tab (just like you can in the templates).
-
Also added the option to control the formatting of selected and non selected tabs using their id instead of class, allowing the custom formatting for each tab.
Verson 0.9 - 10/03/2006 (28 downloads)
- Update to manage > Tabs admin panel, including the addition of a drop down list of available tabs to make setting the plugin up as easy as possible.
- Fixed behaviour with categories: current tab now reflects the parent category instead of the current category.
Verson 0.8 - 09/02/2006 (10 downloads)
If you would like to request any particular features for this plugin then feel free to leave a comment. Please note that while I will try my best to help, development of the plugin is very time consuming so unless it’s a tiny adjustment don’t expect any fast results 
Support and Feedback
If you’re having any problems or need any help then please feel free to reply to this post for support regarding any aspect of dTabs.
If you’re using dtabs successfully than I’d love to hear about it! Reply to this topic or send an email to dtabs [at] dynamictangentconceptions.dtcnet.co.uk .
