Allows you to use the power and flexibility of the WordPress Widgets to set up a dynamic area anywhere in your site and manage multiple columns of widgets, dragging and dropping them around


  1. Download the package
  2. Upload to the plugins folder
  3. Activate it


<?php new EletroWidgets([cols = 2][, id = 0][, onlyEletroWidgets=true]); ?>

The basics:

Go to the theme file where you want to put eletro-widgets and add the following code:

<?php if (class_exists('EletroWidgets')) new EletroWidgets(); ?>

This will create a two column container on your site where you will be able to add the widgets.

The first paramater it takes is the number of columns you want your container to have. So, if you want a 3 columns container, this is what you have to do:

<?php if (class_exists('EletroWidgets')) new EletroWidgets(3); ?>

After putting the code above in a template file, go to any of the pages that uses this template (logged with an user with administrative privileges) and you will be able to add or remove widgets from the Eletro Widgets area. You can add a WordPress default widget, download a widget from the plugin repository or create your own widget.

Customizing the appearance of the widgets

Eletro Widgets comes with a default css stylesheet that you can customize to fit your theme.

In order to do that, copy the file eletro-widgets.css to your theme’s folder and edit it there as you like.

See the CSS structure of eletrowidgets’ canvas here.

Advanced – multiple containers on the same page

Eletro Widgets allows you to have more than one container of widgets at the same page.

For example, you can have one line with 3 columns of widgets, and another set of 2 columns of widgets underneath.

In order to do that, all you have to do is declare a new instance of EletroWidgets passing the second parameter, wich is the unique ID for this container.


<?php if (class_exists('EletroWidgets')) new EletroWidgets(); ?>
<?php if (class_exists('EletroWidgets')) new EletroWidgets(3, 2); ?>

After that, make sure you have styles for all the containers in your eletro-widgets.css file. There are examples in this file so you can create as much containers as you need.

How to restrict available widgets

sorry, but this is currently broken

You may want to choose only a few widgets to be available on your eletro widget canvas.

You can do that by passing the third paramater as true. It will tell this canvas to hide from the list of available widgets all the widgets that were not defined as an “eletro-widget”.

To define a widget as an “eletro-widget”, do the following:

<?php defineAsEletroWidget($widgetId); ?>

Once you’ve done that, you will use the third (and last) paramater of the EletroWidgets class, which tells wether it should display all widgets or only widgets defined as eletro-widget:

Possible values are: false (default) – display all widgets / true – display only widgets defined as eletro-widgets

<?php if (class_exists('EletroWidgets')) new EletroWidgets(2, 0, true); ?>

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>