How To Create A Tab Widget In WordPress

‘How To Create A Tab Widget In WordPress’ is my new article published on Smashing Magazine for WordPress. Article covers practical side of creating the Tabber widget: widget that can turn a sidebar into a single widget that uses tabbed navigation to save sidebar space.

Article contains detailed explanation on how the sidebar shows widgets, how to change the widget output and layout and how to use JavaScript (jQuery powered) to grab widgets and arrange them as tabs. Most important parts of the code and process are described, and code analyzed to help you understand what the example plugin does to create tabber interface.

You can download the example plugin with widgets in the article. To read the article, visit WP Smashing Magazine:

Shortcodes implementation is changed to conform with the gdr2 shortcodes class and to take advantage of the access control and other shared features implemented there. Both gdr2 and gdT3 libraries are updated. As for the bugs, two major ones are fixed: loading of templates from the custom location in some cases and modules initialization loading problems.

Please report any problems with this version, and I will get to fix them as soon as possible.

New Modules Panel

Most important change in this version is the new subsystem for modules. Some of the plugin features are moved into modules: Sitemaps support, Rich Snippet support and Toolbar Menu. Features in modules will not be loaded if you don’t need them, making plugin resource usage more optimized. Also, you can expand plugin with own modules without modifying the plugin directly.

New Widget: Products Comparisons List

Plugin got new widget: Products Comparisons Lists. Since plugin is logging all the comparisons made, this widget can be used to display some of them in the sidebar, directly linking them. This can help engage users to see some comparisons.

Product type specification is expanded with the settings for date and month formating. And there are two new property types: month and custom unit. Month is similar to date, but you can set only month and year. Custom unit allows you to specify value with custom unit specification (like percentage). Saving date property type value is improved to allow better search and filtering. Comparisons are improved, and you can now specify how the URL for products comparison is formed: you can specify glue that connect products, and you can select product ID or product slug to form URL’s.

jQueryUI library is updated to 1.8.21, gdr2 Library is updated to 2.7.7 and gdT3 library is updated to 3.1.7. Many minor changes are added to JavaScript code handling front end side, saving data and few more things. As for the bugs, there are several important fixes: critical problems with generating archive URL’s and creating rewrite rules for some taxonomies, exporting fails due to the missing code, broken maintenance tools and few more things. Some regression from Beta #1 two weeks back are now also fixed. To make sure all is OK, clear browser cache to get latest version of changed JavaScript.

Many of the features in this version are proposed by users, and many more suggestions will be implemented with next versions. Very soon work will start on the next milestone that will include: improved comparison, vendors and products editions and few more things. For now, please report any problems with this version, and I will get to fix them as soon as possible.

Slider / Sidebar

New xScape Theme Framework based theme called Focus is very close to release, and here is a small preview of how the theme is gonna look like. Currently, only one style is available using gold/red colors, but more than 10 styles will be available with built in color style switcher.

Focus uses jQuery Nivo Slider with wide range of settings to control navigation, transitions and animation of slides. Theme has two menus, with top level navigation can be on top of layout or between main menu and content. Header area where logo or site name is displayed can have background image. And, all colors can be set through theme settings as a custom theme style.

Footer / Widgets

Theme mixes news/magazine, normal blog or photo layouts so it can be used for a lot of different things. There will be several different layouts available for archives and individual posts, including brand new template for images, that will be added to other themes also.

Focus will be released with xScape Theme Framework 1.6.0 that will have several new features and number of improvements and fixes. Theme beta version will be released on Tuesday, with final version to be released by the end of the next week.

This is news type theme, as the name suggests, and the intention was to make it simple and clean, easy to read, with many interesting features.

newsScape Sidebar

Some of the previously standard elements of the layout will be used here also. There will be 2 vertical sidebars, one footer widget area, top header (with menu, date, search, social icons), header (with main menu), featured posts slider, categories latest posts block and footer. Bye default, per design, only one sidebar will be active by default.

Theme is very clean, with almost no images used. Theme is in gray, with one important color that will be available from the control panel and in several of pre-built sets. There will be no background apart from small header tile. Featured slider on top will be different from previous themes with 2 different widths (fit with sidebar, or above it full width). Also, by default sidebar will use already existing tabbed widget as on the image on the right.

All theme colors will be settable from the control panel, so you can make it more colorful.

Theme will be released on xScape.info as a Beta on Tuesday or Wednesday. Stable version will be released on September 20 2010. Expect a discount coupons for club membership and individual themes next week when Beta becomes available for test.

My Collection

My Collection is my new website that is made as a demo for several of my plugins and one theme, and in the same time for tracking my collection of music, videos and books I got from Amazon. Here are some more details about the website and plugins used.

Website uses lightScape theme (based on xScape Themes Framework) with custom style. But, real power behind the website are two plugins. One is used to actually get products from Amazon and display them (GD aZon FUSION Pro) and other to set up custom post types and custom taxonomies, add widgets (GD Custom Posts and Taxonomies Tools Pro). Also, GD Press Tools Pro is there, universal “don’t go anywhere without it” plugin.

GD aZon FUSION

GD CPT Tools

GD Press Tools

Website has 4 custom post types (Books, Movies, TV Series and Music). Also, there are additional taxonomies for each of the post types. And all of them use categories. As you can see on the website menus made using xScape Menu Designer (native WordPress Menus are not used), support both post types and taxonomies, and also support filtering of terms, and support custom templates for post types archives.

Widgets from GD CPT Tools Pro are used extensively on the website. Also, new widget from GD aZon FUSION is there for single product in the sidebar. Amazon product templates are customized for the theme also.

Whatever new is added to each of these plugins will be added to this website. So, visit it and check out what you can do with these plugins.

myCollection, Amazon Products:
http://my.gdragon.info/

GD aZon FUSION promo coupon

If you decide to purchase plugin now, while still in Beta phase, a coupon is available that will give you 25% discount. This coupon is: AZONFBETA. To purchase plugin, visit the plugin editions page listed bellow.

GD aZon Fusion, Editions & Purchase:
http://dv4p.com/10g

xScape 1.4.2 will have several new features:

• Use of WordPress media manager. With this you can use images you might have in media manager already. This will work for all images used by theme.
• Upload of Gravatar default image to replace default images in WordPress.

lightScape detail

As for lightScape, image on the right shows a detail from one of the current two color styles. This one is called Autumn. You can see transparent content area (this will be used for some styles, not all), and there are two menus. Top header area for now can have menu and search box, and I plan to add rss feeds, twitter and similar links there.

There will be slider on the page, and layout supports one sidebar and one widgets footer area.

So, very soon, all current themes will get new framework, and demo of lightScape goes on xScape by the end of the week.

Whether you use Facebook or not, you must admit it’s impact to the Internet and it’s almost 500 million users. So far xScape had only Like button integration. But, this version moves that into a separate module. I plan to add few more Facebook features to the framework (leave a suggestion what would you like to see next), and it’s better to keep all that in the same place. For now, Like integration is moved to module and expanded with more options including support for custom post types. BTW, baseScape theme got another style called Facebook.

IMPORTANT: Recheck all the settings after you update. If you used FaceBook Like go to Extend page and enable it from there.

Breadcrumbs are improved and few issues fixed, and also I have added setting from the title of the Home element (per suggestion). Taxonomy problem with breadcrumbs was also seen in the archive heading, and is also fixed. Problem with WordPress features like post thumbnail not being initialized is fixed.

Even more JavaScript is minimized and compacted into a single file for even more speed in website loading. xScape needs up to 4 times less external files than any other premium theme (we need 2 CSS and 1 JS files with 1 CSS for ShareThis module), some premium themes load 10 or more files. Also, some JS is compressed using new Google Closure Compiler.

I hope that I didn’t leave any bugs this time around, or at least no serious bugs,  so please report any problems. xScape 1.3.8 with new theme will be released by the end of next week. Theme will be called airScape. Soon after another theme called newsScape will follow.

Test all themes and try them with a free test drive, for both front end and back end:

Demo Loader: http://xscape.info/load/
Demo Home: http://xscape.info/

baseScape and photoScape now both support resizing of the sidebar. This is limited by the themes design, and is done in the increments of the columns used in Blueprint CSS framework. But, it gives great flexibility. Resizing the sidebar will automatically change other elements, so you need to check the thumbnail sizes for content and things like that to avoid having too much empty space or other layout related problems.

And both those themes now support new footer layout that allows adding of sitemap or links based on standard menus or custom built using menu designer. Tutorial coming soon.

baseScape has new color style called Blood Red on Light.

New Buttons

Social buttons for Digg, Facebook and  Tweetmeme are improved and support different locations around the post content. Some combinations don’t look so good due to different sizes of these buttons and styling issues, but try and see what’s best. Also, photoScape allows you to put these buttons in the meta block on the left of the post. Also, per request, I ave added FaceBook Like button that allow some settings changes. On the image on the right you have all these on the same side.

Framework now allows creating templates for custom post types (WP 3.0 only), and also has several bugs fixed. All themes also support improved Google Rich Snippets from GD Star Rating plugin, that will be available when 1.9 version of the plugin is released tomorrow. More info to follow.

Test all themes and try them with a free test drive, for both front end and back end:

Demo Loader: http://xscape.info/load/
Demo Home: http://xscape.info/

Menus Designer

New items are added to menus including Admin options (dashboard, profile, new post) and Login options (login, logout, register). But, more importantly, menus are nested by design. Previously you could add elements that are going to make drop down, but now you can move any element deeper within the menu.So, if you compare xScape Menus to WooNavigation or WordPress 3.0 native NavMenus, you will see that xScape is much more powerful and flexible with more options you can use to create wide range of items. A tutorial covering more aspects of menus coming later today.

New mapping desinger

Layouts Manager

As you can see, middle blocks got new buttons for moving blocks left and right. This will allow you to move sidebar from left to right. Also, master templates introduced in xScape 1.1, are now functional. Many more things are changed in layouts code allowing some of the things planned for next two themes (multiple sidebars is one of them).

Two tutorials covering all the changes and use of master template will be published later today.

Author Widget

Author Widget

Another new widget is added. This one allows you to set up About Author area to display some info about the author, gravatar and a read more link.

Both current themes are updated with new framework. Next theme is eScape and this one will be released by the end of the week. After that we are planning one news styles theme and long overdue starScape II.

Also, I can confirm that by the end of this week, or over next weekend, lite version of baseScape will be released. Making lite version of the framework wasn’t easy, but it’s almost done now. Lite framework will not get any new features any more, and only, if needed will be fixed from time to time.

Beside new themes, we have planned few more things for the framework, including 3 more widgets, but more on that soon. Stay tuned for number of new tutorials this week, and more improvements to Central Documentation.