Tabbed Widget Area

I would like to have a tabbed widget area, similar to this premium plugin . I wonder if someone has already done this in the Beans / UI kit community ?

I've been using the free plugin - Ultimate Tabbed Widgets successfully - to create a tabbed widget areas - in other themes, which unfortunately doesn't work with Beans.

I think that having tabs in the widget area is a great tool to keep the area 'above fold' better organized.

I haven't tried any premium plugins for this purpose yet, but I suspect that they will also not play well with Beans. Has anyone had a positive experience with a plugin, for this purpose ?

Any suggestions as to how best to accomplish this in Beans, would be greatly appreciated.

Cheers,

Yuna M

An update : I tried this free plugin , which seems to play well with Beans, so far.

Hey Yuna,

You can indeed do that quite easily with Beans, there is a few tricky with the markups so I use a class in the example below:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

 beans_uikit_enqueue_components( array( 'tab' ) );

}

class example_widgets_tab {

 var $id;

  var $widgets;

 function __construct( $id ) {

   $this->id = $id;

    add_action( 'beans_widget_area_init', array( $this, 'init' ) );

 }

 function init() {

   global $_beans_widget_area;

   // Stop here if the this isn't the sidebar targeted.
   if ( $this->id !== beans_get( 'id', $_beans_widget_area ) ) {
     return;
   }

   // Stop here if no widget.
    if ( ! $this->widgets = beans_get( 'widgets', $_beans_widget_area ) ) {
     return;
   }

   $this->render_tabs();

 }

 function render_tabs() {

    // Build json connector.
    $connect = "example_{$this->id}_switcher";

    ?>
    <ul class="uk-tab uk-margin-bottom" data-uk-tab data-uk-switcher="{connect:'#<?php echo $connect; ?>'}">
      <?php foreach ( $this->widgets as $id => $widget ) : ?>
       <li>
          <a href="#">
            <?php echo ( $title = beans_get( 'title', $widget['options'] ) ? $title : $widget['name']  ); ?>
          </a>
        </li>
     <?php endforeach; ?>
    </ul>
   <div id="<?php echo $connect; ?>" class="uk-switcher">
    <?php

   // Widgets are automatically rendered here, so we add an action close the wrap after the widgets.
        add_action( "beans_{$this->id}_append_markup", array( $this, 'close_wrap' ) );

 }

 function close_wrap() {

   ?></div><?php

 }

}

// Initialize widgets tab.
new example_widgets_tab( 'sidebar_primary' );

The example above does the following things:

1. Add the tab UIkit component.
2. Build a re-usage class to add widgets tab on a widget area basis.
3. Fire the widgets tab for sidebar_primary as an example.

It is important to note that this is just a starter example and the class should ideally move in a includes/class-widgets-tab.php file. Please note that the example above uses global $_beans_widget_area which is considered as private. While very unlikely, Beans Core private areas may be subject to change without backwards compatibility so you will have to test your website (you should always do it anyway) when update to a new version of Beans.

Have fun,

Hey Thierry,

Phew, that's a handful of code, alright. 😃 I'll need some time to digest this .

Is this code ment to go into a plugin, as is - more or less unaltered , or is it meant to be added to functions.com ?

Thanks ,

YunaM

Hey Yuna,

You can add it straight your functions.php if you want, it will work out of the box and make the primary sidebar tabbed 🙂 That said, it would be better to organize your code as functions.php is meant to be the root of your child theme and not a place where you dump everything (ideally). So you would add the class code in a includes/class-widgets-tab.php file, then require it on top of your functions.php .

Here is an example child theme following the structure above.

Have fun,