The Cascading Style Sheets (CSS) Working Group invites implementation of two Candidate Recommendations:

• CSS Conditional Rules Module Level 3. This module contains the features of CSS for conditional processing of parts of style sheets, conditioned on capabilities of the processor or the document the style sheet is being applied to. It includes and extends the functionality of CSS level 2], which builds on CSS level 1. The main extensions compared to level 2 are allowing nesting of certain at-rules inside ‘@media’, and the addition of the ‘@supports’ rule for conditional processing.
• CSS Values and Units Module Level 3. This CSS3 module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions. This is an update that clarifies that the viewport size used by the 'vw' and 'vh' units includes the size of any scrollbars only when the scrollbars are “automatic” (CSS rule 'overflow: auto'), and that the corresponding definition of viewport size for paged media is *not* part of this module.

Learn more about the Style Activity.

With its structured approach to organizing assets, Adobe Fireworks can be a pleasure for designing and prototyping. But demonstrating your designs on a wide range of devices can be time-consuming and could even require some degree of coding.

The Create Demo extension addresses some of these issues. It automatically converts your Fireworks documents into portable presentations, which can then be easily presented in any browser — desktop or mobile.

Overview

Why Is It Needed?

This extension makes the process of preparing and exporting your Fireworks PNG files as presentations quick and painless. It can be used to show multi-page website prototypes, designs and sets of slides.

The only thing you will need to think about is where to upload the presentation (i.e. whether to present it online or on your iOS or Android device). The generated slideshows will render identically on all devices, with automatic thumbnail navigation.

A Bit Of Background

The “Demo Current Document” used to be a great feature in Fireworks that I often used to show off website concepts and designs to clients. Unfortunately, its reliance on Flash and the success of the iOS and Android platforms means that, today, it cannot be used to reliably present your ideas on every screen and in every situation. We needed to move from Flash to a pure HTML solution if we wanted to have full cross-browser and cross-platform support.

Having read Viktor Goltvyanitsa’s excellent article about the making of the original extension and knowing what can be achieved today with the capabilities of modern browsers, we knew it was time to accept the challenge. This is how the Create Demo extension was conceived (you can read more on our blog).

Installation And Requirements

The extension works with Adobe Fireworks CS3 or later and has been tested extensively on both Mac and Windows platforms.

1. Download Create Demo from Adobe Exchange. The extension is free, but you’ll need an Adobe ID in order to download it (if you’ve ever downloaded Adobe software — Fireworks, for example — then you likely already have an ID).
2. When download is complete, simply double-click the CreateDemo2.0.5.mxp file.
3. Click on “Accept” when the Adobe Extension Manager opens.
4. If installation was successful, you’ll see Create Demo listed in the Extension Manager list.

Installation steps.

Advice to Windows 7, Windows 8 and Vista users: run the Adobe Extension Manager as Administrator to prevent any errors during installation.

Supported Browsers and Platforms

The exported demo files generated by this extension have been tested on a variety of platforms and browsers, including iOS, Android, Windows, Linux and Mac OS X. Tested browsers include Safari, Firefox, Chrome, Opera and Internet Explorer.

How Much Does the Extension Cost?

The extension is absolutely free for everyone and is licensed as “donation-ware”; the only limitation of the free version is a small credit that appears at the startup of every presentation. If you decide to contribute, you’ll have the option to remove this screen, and we’ll personalize the interface with your name (you can choose how much — or how little — to donate, starting from only £5).

Licensed version (personalized).

Last-minute note: If you are a CS6 user, you should know that the process of obtaining and managing your extensions is currently being overhauled. To ensure that we can continue to support and provide updates in the future, we have put the extension in the new Adobe Exchange panel. For detailed information on installing the extensions using this panel, see our detailed blog entry about it.

Create Demo: How To Use It

Basic Use

Once the Create Demo extension is installed, you can access it from the menu: Commands → Web Engineer → Create Demo.

The extension’s interface is grouped into two key sections: settings and pages. Settings can be customized on a per-document basis, so if you change them, you will need to save your Fireworks document to ensure they are not lost.

The key sections of the Create Demo extension: settings and pages.

Settings section

The settings panel groups the common general options for exporting your demo. The current version (2.0.5) gives you the following options:

• Stage
  The color of the area outside your slide.
• Highlight
  The color of the highlight applied to the selected slide’s thumbnail.
• Max thumb size
  The width and height of the bounding box within which your slide’s thumbnails will be sized to fit. The thumbnail’s size is not limited, however, for best results, use a thumbnail size that fits your target device.
• Auto-hide thumbs
  An option to hide thumbnails automatically (handy for slideshows).
• Click left side to go back
  Navigate both forwards and backwards through the slideshow depending on where you click. When not enabled, a click always advances you forward.
• Shadow
  Adds a CSS-based shadow to your slide (ideal for presenting photos).
• Show splash screen (licensed version only)
  Removes the splash graphic on launch.
• Use export settings
  This will respect the export settings specified in your Fw PNG document. If unchecked, the slides will be exported as high-quality JPEG files.
• Use HTML5 cache
  Enables your slides to be cached for offline browsing.
• Enable gestures
  An option to use gestures (flicks) on mobile devices to advance the slides and to show and hide the thumbnails. This works well on touchscreen devices that support it, but the feature is optional and not enabled by default. If you want to experiment, an explanation of the handling of gestures is featured in the third example.
• Auto-advance
  When set to a non-zero value, this is the delay in milliseconds before the next slide is shown (note that an interaction will restart the timer). 1000 milliseconds equals 1 second, so be sure to input a large enough value.

Pages section

The pages section shows which pages will be exported from your Fireworks document. Simply clicking on a page name will toggle its inclusion.

Fireworks’ Pages panel (left), and Create Demo page selection (right).

One of most valuable Fireworks features for Web and mobile designers is pages. Pages essentially enable you to capture your design concepts in one document, with the help of shared layers, states and symbols. The Create Demo extension relies on the pages feature in Fireworks when it prepares your design for exporting as a multi-page presentation.

The Pages panel is usually located to the right of the Fireworks workspace, docked with the Layers panel. If it’s not open, press F5 or go to Window → Pages.

A Note on Locations (for Exported Presentations)

• If you create a new Fireworks PNG file, save it somewhere in your computer, and run Create Demo, then the extension will suggest to save the presentation in the same location where the Fw PNG file is currently located.
• If you create a new Fireworks PNG file, save it somewhere in your computer (let’s call it location “A”), export it via File → Export… or File → Export Preview… (location “B”), and run Create Demo, then the extension will suggest to save the presentation to location “B” (and not where the Fw PNG file is located).

This is by design and could save you a few mouse clicks as you prepare your presentation!

Practical Examples

The following series of examples demonstrate the key features of Create Demo. The first slide in each example also shows the settings that were used to create it.

Example 1: This is a demo of a website prototype. The page shadow has been turned off, and the background is set to “match.”

Example 2: In this demo, the images have been framed with a shadow; large thumbnails have been chosen; and the “auto-hide” option is enabled (i.e. if you don’t interact with the mouse, the thumbnails will be hidden after a short delay).

Example 3: This example demonstrates some of the features added in the 2.x release, focusing on HTML5 enhancements (including caching and better device support).

Touch, Keyboard Keys and Mouse

Featuring keyboard control, mouse control and gesture support (iOS only), Create Demo makes navigating your pages both swift and smooth.

Keyboard controls (overview).

You can show and hide thumbnails of your pages for quick navigation. Images are handled with care, with a focus on presenting them efficiently and elegantly. Thumbnails are centered in the view, giving quick access to adjacent pages (making it similar to how Flickr’s navigation works). With a few clicks you can flip through a large number of slides, if the size you selected for the thumbnails is reasonable.

Create Demo: In More Detail

How It Works

The slideshows are created using nothing more than HTML and JavaScript. Create Demo produces configuration files, a manifest file (if the content caching option has been enabled), images, and the script required to create a versatile presentation that will run on a wide variety of devices.

Manifest is part of the HTML5 standard:

The cache manifest in HTML5 is a software storage feature which provides the ability to access a web application even without a network connection.

Simply put, it gives the browser the complete list of resources that are required to store pages locally. It is associated with the presentation in the HTML by adding the manifest attribute to the document. For example:

<!DOCTYPE HTML>
    <html manifest="cache.manifest">
    …

The manifest file itself contains the list of resources, which might require you to configure your server to add the manifest MIME type. For those using Apache, a configuration file is automatically exported with your files.

To learn more about the application cache, HTML5 Rocks has a good introduction. To ensure that users see your latest presentation when the content cache is enabled, clear the browser’s cache or upload the presentation to a new URL.

You can also link to specific pages directly in your presentation simply by adding #X to the end of the URL, where X is the page number that you want the presentation to jump to. This can be extremely useful when you want to email a series of links and annotations to a client to explain a prototype in more detail.

Adapts to the Device

The presentation will adapt to the device (whether desktop or mobile) on which it is being viewed. Depending on the capabilities of the device, the presentation will make the best use of what is available. On the desktop, the fixed positioning helps to keep the thumbnails placed nicely at the bottom of your slideshow, and by adding a margin to the bottom of the page, none of your presentation images will be obscured.

When viewing the presentation on a mobile device, the thumbnails are moved to the top of the screen for easier navigation. The pages are not downscaled to fit the size of the screen, since mobile browsers usually have excellent zoom and pan functionality.

Mobile view (left) versus desktop view (right).

iOS Application Mode

The presentations created by the Create Demo extension fully support iOS’ application mode. By simply supplying a page with a given name and dimensions, you can automatically export icons and the startup screen directly from your Fireworks file. For icons, simply set the page name to the icon size in pixels, prefixed with @ (currently, 57, 72 and 114 pixel sizes are supported). For the startup page, name the page @startup, and it should match the standard startup image size of 320 × 460 pixels. For a full explanation and example of this in action, see the third practical example.

Known Issues

The extension has had a number of updates. I plan to develop and improve it further in the future.

Currently, only a few limitations are known:

• If Google Chrome is your default browser on OS X, then when you launch the presentation as an export from Fireworks, the browser ends up with an extra / in the URL. I believe this is a known issue with Fireworks (and will hopefully be fixed in a future release by Adobe).
• Gesture support for Android has been removed due to issues with scrolling. Touch and gesture support will likely be reviewed and updated in future releases of the extension.
• The current exporting format is not suitable for large presentations (i.e. large images), but whether this should be supported at all is questionable.

Download A Fireworks PNG Template For iOS

I have created a simple template containing icons and a startup screen. It contains four pages and provides a handy starting pointy for creating your presentations. The icons all share the same symbol, so they can be edited in one place, with the rest updating automatically. The icons and startup images are named and sized correctly and will automatically be converted on export (although that they won’t be shown as pages included in the output of the final presentation). This demo does not include a design concept because it’s meant to be a starter file.

Download the template Fireworks PNG file (ZIP, 650 KB).

After downloading, simply unzip the file, and open it in Fireworks. You can then assemble your presentation, add and edit pages, and customize the icons. This template is not required by the extension; it’s intended merely to save you a little time when you want to quickly create the full set of iOS icons and a startup screen.

Note: You’ll need to first add pages to the Fw PNG template; after that you can run the extension.

If you no pages are in your document (other than the icons and the splash screen) and you try to export the demo, you’ll see a warning, and a blank index.html file will open.

This message will appear if you try to create the presentation without having actual pages in the Fw PNG document.

Quick Demo

This very simple example of a presentation was automatically created with the help of the iOS Fw PNG template. It contains three content pages, navigation with thumbnails, an iOS startup page and three icons.

Click the link (or scan the image using your mobile device) to view the demo.

Conclusion

I’ve attempted to keep this extension robust in order to solve a simple problem, which is to quickly and reliably present multi-page Fireworks designs on any device. The key was to make it easy to use; it shouldn’t leave you puzzled and desperately looking for a manual. We’ve found this extension to work well for our team, and I hope it works well for you, too.

You can follow the Adobe Fireworks Exchange for update notifications. I’d also love to see how this is being used, and we welcome feedback and comments. You can also follow me on Twitter for the latest updates.

Feedback

Have an idea for improvement or a new feature? Found a bug? Don’t hesitate to contact us or leave a comment here.

(al) (mb)

© Craig Lawson for Smashing Magazine, 2013.

Yesterday, anyone old enough to have been working during the browser wars, felt the icy cold fingers of fear creep up their spine when Google announced that its browser Chrome will be abandoning Webkit in favor of their own Blink rendering engine.

Based on the open source Chromium Project, that will be forking Webkit, Chrome is the biggest browser in the world: statistics place Chrome usage at anywhere up to 41.9%, and growing at more than a percent each month; it’s trusted across MacOS and Windows; it is also the dominant browser in Central and South America, Europe, India and Northern Asia.

Chrome is also making significant progress on mobile, with the Android operating system increasing in popularity and Apple’s iOS — which is the only area the other major Webkit browser, Safari, dominates — slowly losing market share.

Until now, Chrome has relied on the Webkit rendering engine, a framework devised in the early 2000s which critics such as Google say was designed for a different web landscape. Although Google claims that initially focus will be solely on cleaning up the existing codebase and deleting unnecessary files, the new Blink rendering engine is, designed for the modern web with a host of performance improvements, notably in the area of DOM rendering — which is vital if the rich media aspects of HTML 6, 7 or 8 are ever to become a reality.

All of this sounds very positive, until you look at the practicalities for web designers. Presently we test across six major browsers: Chrome, Safari, Firefox on MacOS and Chrome, IE, Firefox on Windows. Some dedicated testers will also check for Opera compatibility. The task is made simpler by the fact that 9 times out of 10 Chrome and Safari render identically thanks to their shared rendering engine. The introduction of Blink means that Chrome and Safari will probably not be rendering in the same way in future.

The issue is even larger for the mobile web. Device emulators now need to find a way of rendering not just Webkit and Mozilla, but Blink too. That work begins now, but it’s likely that for a period of some months, designers will have to have access to multiple devices to ensure Chrome compatibility.

“we believe that having multiple rendering engines—similar to having multiple browsers—will spur innovation and over time improve the health of the entire open web ecosystem” — Adam Barth, Software Engineer Chromium Project

Perhaps the biggest issue is one that initially looks the most positive: Chrome will no longer be supporting browser prefixes. In other words, whilst you might currently write in CSS:

div {
  -moz-column-count:4; // Mozilla
  -webkit-column-count:4; // Webkit
  column-count:4; // default
}

There will be no additional:

-blink-column-count:4; // Blink doesn't support this

Browser prefixes bring a host of problems, quite apart from being ugly and inconsistently supported, they also create file bloat and encourage diverse implementation. So can we stop using browser prefixes? No, they’ll still be required for other browsers just as much as they are now.

Instead of using a browser prefix, anything Chrome considers experimental will be held behind an ‘enable experimental’ flag. Which means you can enable everything experimental, or nothing at all.

Furthermore, by removing the browser prefix Chrome sets itself up as the ‘default’ behavior for the web. If Chrome’s implementation of a feature doesn’t sit right, the option to tweak your code with a browser specific prefix isn’t there. The chances are, we’re going to have to go back to using JavaScript to ‘browser sniff’ Chrome and adjust the default CSS when required.

The forking of Webkit and the creation of Blink will be highly beneficial to Google; Chrome will be a faster, even less buggy, and faster to evolve. The benefits to users will be a light, fast browser built for the modern web. The consequences for web designers are likely to be a lot more headaches and substantially more hours spent tweaking CSS.

What do you think of Google’s decision to create their new Blink rendering engine? Do you think Blink will save you time, or create more work? Let us know in the comments.

Featured image/thumbnail, fork image via Shutterstock.

20+ Cutting-Edge Photo Slideshow Templates – only $19!

There is a large number of online resources for developers looking to make better websites. These are all free tools for anybody to use, and they provide an exceptional push forward in quality. Designers have been striving towards a better method of working online and we are only getting closer with each passing year.

I have put together a small collection of websites and webapps to help developers work smarter and faster. You may not find all of these tools useful, but they are worth looking into and doing a bit of research. Plus there are new resources launching online every month. As more web developers join the community we will notice even more resources & web applications being published online.

CodeVisually

I have been using the website CodeVisually for a number of months to check up on the latest open source projects. Developers will submit their releases to the site and it catalogs a full gallery of plugins, templates, themes, and scripts. You can find a lot of helpful JS libraries for common UI functionality. There are also frameworks and templates for WordPress developers.

I definitely recommend checking the site every-so-often if you are a big jQuery or JavaScript enthusiast. It can be exciting to check out new plugins and build functionality for your website concept. Plus it is much easier sorting through plugins with thumbnails rather than searching Github or another code repository.

Cmmntr

Although this is a newer launch, I have really taken to cmmntr as a studious network for design & development news. The site was created by Japanese developer Motoshi Goto as a resource for the latest news and hot topics in web design. These links mostly focus on tutorials and plugins, but also includes cool demos and free open source projects.

Although the descriptions and webpage text is written in Japanese, the stories are submitted using their English headline name. It is still easy to determine if you have an interest in the tools or not while browsing the site. The reason I like this news curation so much is because it provides introductions onto similar resources such as CSS DB. The frontpage articles are always high quality and provide even more helpful tools for designers and web developers.

Google Web Fonts

Most people know about Google Web Fonts but I can’t ignore this resource in the collection. When I am not using Typekit then my secondary choice is always Google Webfonts. Their typefaces are free to use as many times as you’d like. This allows developers to keep their servers clean of TTF/OTF/SVG/WOFF files which are hosted externally by Google. If you have never used this service before it is worth a test run on your next web project.

Stack Overflow

When you move onto more difficult problems in web development it can be tough educating yourself and fixing bugs. Whenever I see people asking for helpful webdev forums I always recommend Stack Overflow as the best contender. Members have an incentive to answer questions because their profile will gain points and badges as recognition for a correct answer.

Also the questions are practically never deleted, and save as an archive for others to search and find a solution at a later date. So before even asking a new question I would recommend searching in Google with the keyphrase site:stackoverflow.com and see what turns up. This is my technique for solving 90% of the problems I run into during a typical coding session. Stack is a tremendous resource for any web developer no matter how skilled you are, as there will always be more to keep learning.

CodePen

The CodePen webapp is like a cloud-based IDE for building websites. Most developers use this tool as a sandbox for creating demos and small interface features. The default pens are setup public and you can search through them for resources which have been coded and released by other developers.

It is an excellent website to bookmark when you need to show somebody your code without uploading to a web server. Check out this sample dark UI theme as an example. Or paired with Stack Overflow and similar forums, you may recreate any HTML/CSS/JS bugs within CodePen and then use this demo for your question. Users of the website then have access to directly edit your code and see if they can fix anything.

iPad Peek

Mobile testing is huge and the rising smartphone market has not stopped. If anything we are seeing more consumers switching onto tablet PCs for general web browsing. This really cool webapp iPad Peek allows you to load a website into an iPhone or iPad to see how it would render on the screen. The site includes options for the iPhone 4 and the iPhone 5, plus landscape and portrait views for the iPad. It may not be something that you will use all the time, but it can be more resourceful than pulling out your own devices for mobile testing.

CSS Code Snippets

Chris Coyier built a large collection of CSS snippets for web designers and developers. His blog at CSS Tricks is full of great tutorials and resources. But this single page offers a huge collection of very practical snippets you should save and keep for local development. Using applications such as Coda you may save code snippets right into the app, or similarly keep them in a separate external file.

But snippets are a fantastic resource for developers who don’t want to recreating everything from scratch. You can save a lot of time and still produce the same quality of websites. Similarly I have to recommend Eric Meyer’s CSS resets as another code snippet worth saving. There is the option of directly including the file off his website, but there is no guarantee he will keep that saved in the exact same location forever. It is more resourceful to save a local copy of the styles and either import them into your own stylesheet, or include both CSS files separately.

Pictaculous

I happened to stumble onto this website the other day and was playing around for a good 20 minutes. Pictaculous allows you to upload any image or banner artwork and it will put together a color scheme which would best suit this graphic. You may use this resource for design ideas when constructing a new website layout. Or similarly when making a new banner design or logo in Adobe Photoshop.

I think this will be useful to both designers and developers who often struggle with color choices. It can be tough finding an image which you can place on the page and blend into your layout. So I do not think everybody will find a purpose for this webapp. However it can be fun to generate new color schemes and test your own design intuition.

Final Thoughts

I do hope a few of these resources will prove useful to designers and developers. Some webapps will take a bit of practice to get used to, but I have really become attached to the idea of coding and building projects “in the cloud” with tools and website resources. By working locally you can ensure a copy of your project is always safe while still building out new ideas in your web browser.

The post Most Helpful Webapps & Resources for Building Modern Websites appeared first on Treehouse Blog.

We’re ready to announce something new and exciting — the Tuts+ Hub beta!

As you know, Tuts+ is all about helping people learn. With Hub, we’ve worked to deliver an experience that makes it easy for you to find exactly what you’d like to learn, with a delightful interface for reading.

What you see is a brand new layer that sits atop our current websites. All the articles and tutorials are still here (along with your comments), but we’ve designed a new way of presenting them and built new tools to help you navigate the library. Take a look now, and read on to find out more.

What’s New?

Here are the basics of what’s new on the Hub:

• A new content structure that emphasises disciplines over software-centric categories
• Improved (pretty great) search
• A more intuitive approach to browsing
• Responsive design
• Carefully formatted articles

We’re releasing Hub as a beta because it’s going to continue evolving. There are still some important features that we’re going to implement, and a few wrinkles that need ironing out. We’ve taken a lot of care to make Hub something that looks great and works well, upon which we can easily improve and iterate.

We want to tailor this site to you — our readers — so your feedback is incredibly valuable to us. If you notice anything that looks awry, or something that doesn’t behave the way you’d like, we’d be grateful if you took the time to fill out this feedback form.

The New Content Structure

If you’re used to the current Tuts+ blogs, you may be interested to know how we’ve reorganised our topics.

At present, the Tuts+ Network consists of thirteen sites. Though they all occupy different niches, some of them have similar kinds of content. By isolating the sites, it’s possible that we’re keeping you from finding the sort of things you want to learn, and we’re needlessly restricting ourselves to very specific niches.

We plan to expand the breadth of content that we provide, and our new topics are designed to cater to that expansion.

This is how the new topics on Tuts+ Hub map to the current sites:

Design & Illustration

• Psdtuts+
• Vectortuts+
• Webdesigntuts+

Development

• Nettuts+
• Mobiletuts+
• Webdesigntuts+
• Wptuts+

Audio Production

• Audiotuts+

Photography

• Phototuts+

3D & Animation

• Cgtuts+

Game Design

• Gamedevtuts+

Video Production

• Aetuts+

Arts & Crafts

• Crafttuts+

Computing

• Mactuts+

We’d Love Your Feedback

When you’ve had a chance to take a look, search around, and read a tutorial or two, we’d welcome any and all of your feedback. It’ll help us to create a product that our readers love to use!

In this tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.

In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let’s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.

Saving Sidebar Space

The main advantage of tabs is that you can fit more widgets into the sidebar. And tabs look good. The image below shows how much vertical space is taken up by three standard widgets (using the default Twenty Ten theme). The default layout is on the left, and our tabber widget is on the right:

Before We Start

A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress’ Widgets API and how to create a basic widget:

• “Widgets API,” WordPress Codex
• “Creating Widgets for WordPress 2.8,” Tim Trott, Azulia Designs
• “Advanced WordPress Widgets,” WP Roots

Use these resources as needed while following the tutorial along.

The Basic Idea

The idea for this widget is simple: select a sidebar, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget’s interface, you can select a sidebar, specify an extra CSS class and optionally apply your own styles. When enabled, the plugin will register an extra sidebar (which may be removed if you have other ways to add a sidebar). Then, using the same code, you can add more sidebars, and each of them can hold instances of the Tabber widget.

To control your widgets, Tabber uses idTabs for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.

Here is the basic HTML structure required to create tabs:

    <ul>
      <li><a href="#widget-1">Widget one</a></li>
      <li><a href="#widget-2">Widget two</a></li>
    <ul>
    <div id="widget-1">
      Widget one's content
    </div>
    <div id="widget-2">
      Widget two's content
    </div>
    

Unfortunately, you can’t get such a structure directly by using WordPress’ sidebar and widget rendering. Typically, WordPress’ widget structure looks like this:

    <div id="widget-1">
      <h2>Widget one</h2>
      Widget one's content
    </div>
    <div id="widget-2">
      <h2>Widget two</h2>
      Widget two's content
    </div>
    

So, the goal with Tabber is to transform any widget’s output into markup that can be used to display tabs. To complicate matters, different themes might register sidebars that do not use a <div> to hold a widget or use <h2> to show its title. For example, WordPress’ new default theme, Twenty Twelve, uses <aside> and <h3> tags for this. Other themes may use complicated markup that can’t be predicted or successfully transformed into the output needed for tabs.

The solution to this problem is to intercept the widget’s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.

Tabber Widget Loading

Now that we understand the goal, let’s look at the demo plugin. Our plugin contains a main PHP file, one JavaScript file and one CSS file. The PHP file contains the widget and loads the CSS and JavaScript, like so:

    add_action('init', 'd4p_st_init');
    add_action('widgets_init', 'd4p_st_widgets_init');
    
    function d4p_st_init() {
        register_sidebar(array('name' => 'Tabber Example Sidebar', 'description' => 'Add widgets to this sidebar to use it from Tabber widget.'));
    
        if (!is_admin()) {
            $url = plugins_url('d4p-smashing-tabber');
    
            wp_enqueue_script('jquery');
            wp_enqueue_script('d4p_st_tabber', $url.'/tabber.js', array('jquery'));
            wp_enqueue_style('d4p_st_tabber', $url.'/tabber.css');
        }
    }
    
    function d4p_st_widgets_init() {
        register_widget('d4p_sr_tabber');
    }
    

Here, the function d4p_st_init is run during WordPress’ init action. It will register one sidebar (line 5) and enqueue the jQuery, JavaScript and CSS files using the wp_enqueue_script and wp_enqueue_style functions (lines 10 to 12).

Then, the function d4p_st_widgets_init is called during WordPress’ widgets_init action. We register the widget on line 17.

Widget interface.

The Main Tabber Widget Class

Tabber is a normal widget, and in this case it is located in the d4p_sr_tabber class.

Settings: Plugin Interface

The widget has two settings:

• “sidebar”
  to hold the ID of the selected sidebar
• “css”
  for extra CSS classes to style the Tabber widget

When selecting which sidebar to use, you must avoid using the sidebar that holds the Tabber widget. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget’s content, check whether the selected sidebar is the same as the parent sidebar. This can’t be prevented while the widget is set up, because the widget’s panel affords very little control over this.

Also, using sidebars that are not normally used is a good idea. To help with this, the plugin includes sample code to help you add an extra sidebar.

The form and update methods contained in the d4p_sr_tabber class are used to display the widget’s interface in the “Widgets” panel and to save its settings, and they are not that interesting. But it is worth taking a closer look at how to display the widget on the front end.

Main Display Method

Here is the main widget method:

    public function widget($args, $instance) {
      add_filter('dynamic_sidebar_params', array(&$this, 'widget_sidebar_params'));
    
      extract($args, EXTR_SKIP);
      $this->id = $widget_id;
    
      echo $before_widget;
      if ($args['id'] != $instance['sidebar']) {
        echo '<div id="'.$widget_id.'">';
        echo '<ul></ul>';
        dynamic_sidebar($instance["sidebar"]);
        echo '</div>';
      } else {
        echo 'Tabber widget is not properly configured.';
      }
      echo $after_widget;
    
      remove_filter('dynamic_sidebar_params', array(&$this, 'widget_sidebar_params'));
    }
    

In this code, line 2 adds a filter that modifies the widget’s rendering parameters before they are processed. With this filter, all widgets rendered after that point will have their parameters modified as needed for successful transformation to tabbed form. And that will be done for the widgets in the selected sidebar on line 11, using the dynamic_sidebar function.

This function requires the name of the sidebar, and it will display all widgets in it. Line 9 contains the check mentioned before, to prevent recursion when displaying sidebar content if the selected sidebar is the same as the parent sidebar.

Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.

Widget Modification

To prepare for the transformation done with JavaScript, the tabber widget includes the d4p-tabber-widget class, which contains an empty <ul> tag.

The filter used to modify the widget’s parameters looks like this:

    public function widget_sidebar_params($params) {
      $params[0]['before_widget'] = '<div id="'.$params[0]['widget_id'].'">';
      $params[0]['after_widget'] = '</div>';
      $params[0]['before_title'] = '<a href="#">';
      $params[0]['after_title'] = '</a>';
    
      return $params;}
    

Depending on how the sidebar is registered, this code will change the rendering parameters to a format that is close to the format needed for tabs. But JavaScript is still needed to move the widget’s title into the <ul> tag for the control tabs. After this filter, the widget’s output will look like this:

    <div id="widget-1">
      <a href="#">Widget one</a>
      Widget one's content
    </div>
    

JavaScript For Widget Transformation

Once the widget’s presentation is modified, one thing remains: to complete the transformation and get the titles from the widgets and turn them into tabs:

jQuery(document).ready(function(){
      jQuery(".d4p-tabber-widget").each(function(){
      var ul = jQuery(this).find("ul.d4p-tabber-header");
    
      jQuery(this).children("div.d4p-st-tab").each(function() {
        var widget = jQuery(this).attr("id");
        jQuery(this).find('a.d4p-st-title').attr("href", "#" + widget).wrap('<li></li>').parent().detach().appendTo(ul);
      });
    
      jQuery(this).idTabs();
      });
    });
    

This code uses jQuery to get all of the Tabber widgets based on the .d4p-tabber-widget CSS class, and each one gets the element (where the tabs will go):

• With line 5, we find all individual widgets belonging to the Tabber widget.
• On line 6, we get the widget’s ID needed for the tab to connect it to the widget’s content.
• On line 7, we find the title <a> element, set its href attribute to that of the widget’s ID, wrap it in a </li> element, remove it from its current location, and move it into the tab’s <ul> element.
• After this, the <div> will hold only its content.

Final Tabber example.

Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the tabber.css file, you can see how Tabber looks with three widgets in it (see screenshot above). Feel free to experiment and adjust the styling to your theme.

How To Install The Tabber Plugin

• Download version 1.0.0 of the Tabber plugin.

As with any other plugin, unpack it, upload it to WordPress’ plugins folder, and activate it from the plugins panel. When you go to the “Widgets” panel, you will see an additional sidebar, “Tabber Example Sidebar,” at the end on the right. And “Available Widgets” will show one more widget, “D4P Smashing Tabber.”

Add this new widget to the “Main Sidebar.” From the “Sidebar” widget drop-down menu, select “Tabber Example Sidebar,” and save the widget. Now, open the “Tabber Example Sidebar” and add the widgets you want to be displayed as tabs. You can add as many widgets as you want, but pay attention because if you add too many, the tab’s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.

Conclusion

Creating one widget to display several other widgets as a tab isn’t very difficult, as you can see. The trick is in adjusting the widgets’ output to a format that can be transformed into tabs, and then using JavaScript to display them. We’ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.

We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:

• idTabs
• EasyTabs
• jQueryUI Tabs
• Tabify

I prefer using a jQuery-based solution, and idTabs is very easy to use and easy to style and it works in all browsers. Check out other solutions, and see what extra features they offer to enhance your own tabbed widgets.

(al)

© Milan Petrović for Smashing Magazine, 2013.