Fun with Widget Structures: 0.1 beta

This plugin, a beta version that was never released as complete, is no longer maintained or supported. It has not been tested with the most recent version of WordPress and will likely cease to function entirely after WordPress 2.8. If you like this plugin and want to take over development of it please let me know.

Fun with Widget Structures is a WordPress plugin that provides alternative ways of organising your widgets. For example, by creating a tabbed box. This page explains version 0.2 beta.

Requirements

• PHP5
• WordPress 2.6

Download Beta 2

Beta 0.2 provides a fix to allow removing widgets, and includes IE6 CSS options. By default the the templates do not come with IE6 CSS support.

Download: Fun with Widget Structures 0.1 Beta 2

Installation

Unzip the plugin and upload to your plugins directory. Then activate as normal.

Adding a structure to your sidebar

Fun with Widget structures uses the WordPress widget system to add structures to the sidebar. You then add widgets to that structure.

Each structure you add will layout the content according to the template you select.

Although it is easy to use you should note that it is intended for peole with the knowledge of CSS to style the structure that they want to use. The template system does mean however that structures created for a specific template can be exported and shared.

To add a structure open the widget panel and find the Widget Structure widget. Click add to add it to the sidebar and then save. Once saved the sidebars dropdown box should show your new structure:

Styling your structure

Each structure widget has one option: which template to use. To edit and create templates open the Widget Structures page from beneath the design menu.

If you edit, or create a new structure you will be given the following options:

1. Name
2. Description
3. Separate the tabs from the content
   If this is marked yes then the javascript will move the tabs to a separate list. If this is no they will stay inline accordian style.
4. Allow tab layer
   If this is answered yes then the javascript will calculate how many tabs should fit and add separate them into layers. Each layer will be available using a + or – tab.
5. Only use next and back tabs
   If this is answered yes then the named tabs will be removed and navigation through the content will by + and – tabs only.
6. Swap width and height calculation
   If yes then the layer calculation will be based on height. This is for lining the tabs up verticaly down the side.
7. Rotation
   Set the time lapse before it jumps to the next tab. If any tab is clicked on the rotation will terminate.
8. Transition type
   This gives the options for how the content transitions between the visible and selected options.

The rest of the options allow CSS to be entered for each element. See the images below:

The last three options relating to CSS specificity are discussed in the next section

CSS Specificity options

At the bottom of each template are three textboxes to help with CSS specificity issues. You can find a great explanation of CSS specificity at HTML DOG.

To help overcome these issues you can add the ID for the elements that surround your sidebar. You can find this out by using Firebug for Firefox or just viewing the source but to make things easier I have included an extra function to do this for you.

With your page loaded put the following in your address bar:

[javascript] javascript:fwws_check_parents( 1 );

Replace the number with the number structure you want to check. Using this on the default theme will show you the following:

So for WordPress default theme you would use the following settings:

Entering the wrong specificity options will mean that none of the CSS will apply at all.

Importing and Exporting templates

On the widget structures page you will notice a second table. This allows you to import templates that you, or anyone else has written.

Importing a template is easy. Each template is an XML file named {something}.fwwst.xml. This needs to be uploaded to your site in either of the following places:

1. The root folder of the current theme you are using (wp-content/themes/{themename}/{something}.fwwst.xml
2. The templates folder in the plugin directory (wp-content/plugins/fun-with-widget-structures/templates/{something}.fwwst.xml)

Once uploaded to one of these two places open the widget structures page, locate the template in the list, and click import. It will then be available to use, or edit.

Next to each template that is in use there is an option to export. This will let you download that template as an XML file. Beside it is a second option which does the same thing but includes the CSS specificity options. If your template is intended for a specific location in a specific theme then you should use this option.

Defaults

The default tab template is imported by default when you install the plugin. There is also an optional accordian template included in this version. They should like this:

At the moment there is no specific timescale for release via the Plugin Repository. I won’t release it until I am happy that it is complete. I appreciate you trying it out. Please add any questions or comments below.