688 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rg_ says

i did this in 5 minutes:

http://screenr.com/RGD

what you think?

95 posts
  • Has referred 10+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+4 more
bringthepixel says

nice

1742 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
+2 more
gbs says

Yep, that’s cool, man :D

579 posts Themes and Graphics
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+9 more
Bebel says

awesome!

I’d be thrilled to see how you hacked wp for this!

1012 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 more
wizylabs says

Awesome, can you share ;)

2459 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+3 more
digitalimpact says

So useful Roberto!

Can you please share how you did that? :)

832 posts
  • Power Elite Author: Sold more than $1M on Envato Market
  • Won a competition
  • Made it to the Authors' Hall of Fame
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
+7 more
wpbakery says

Loved the idea

228 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
stevebluck says

Realease that as a WP plugin on CC to be honest! You should rack the sales up!

688 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 more
_rg_ says

Ok, thanks, realy is very easy to do. I use only jQ and some css.

First you need to ensure to enqueue js and css only and just ONLY for the widgets page, and run js only and just only for that DIV items. If no widget page, and if no DIV , no js will be called.

That´s the most important thing in order to not cause any conflict between the rest of the wp admin files and scripts.

So i have a js and a css for that part enqueued in to admin, something like this:

global $pagenow;
if (is_admin() && $pagenow === 'widgets.php'){
    wp_enqueue_script('custom_js_for_widgets', THEME_OPTIONS_URI . '/js/pp_meta.js');
    wp_enqueue_style('custom_css_for_widgets', THEME_OPTIONS_URI . '/css/pp_meta.css');
}

The above, is on admin and on widgets page, do the enqueue.

Then, on the widgets page you have mainly two areas:

widgets-right

widgets-right > .widgets-holder-wrap (this can be opened or closed)

widgets-right > .widgets-holder-wrap / #[widget-slug-name]

  1. is the ID widget takes from the name you put when registering the widget sidebar area.

So, let´s say you have a widget sidebar called “my-new-sidebar”, well, in order to access that item you need to call this way:

$t('#my-new-sidebar').parent().addClass('widget-cian');

Doing that what we are doing is adding the .widget-cian class to the parent .widget-holder-wrap. Just because that´s the parent widget dragable entire DIV .

Doing that, you can colorize any widget. But also you can then selecte or not it, this way:

$t('#widgets-right .widgets-holder-wrap:not(".widget-cian")').hide();

That code will tell jQ to hide all widgets but not the cian ones… That´s the basics on how i made the Expand Collapse and the Show/hide thing.

Also i prepend some html (links and text) on the very widget right area using jq:

var rightDiv_html = "";
$t("#widgets-right").prepend('<a href="#" id="expand_div">Expand All</a>');

And of course then i tell the #expand_div to do the function:

$t("#expand_div").click(function(){
        $t("#widgets-right .widgets-holder-wrap.closed .sidebar-name").trigger('click');
        return false;
    });

That´s the expander, i tell all widgets to trigger a click on the sidebar-name, that´way i expand all.

Note the .closed class.. I need to trigger them only if they are closed, because in this case i want to expand all, and if widget is already opened i do not need to trigger the click function. When widget is opened it just don´t have the .closed class.

I do same, using not() and the widget-color class assinged, to trigger click and hide.

I do some hide() or show() to hide or show all “orange” or all “cian” ones.

Well, that´s the basic idea, i don´t have time to post the entire code and explain it step by step, but i´m sure if you have a minimal knoweldge on the wp core and some jq, that´s all you need.

Enjoy :)

579 posts Themes and Graphics
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+9 more
Bebel says

Thanks a lot for the hint in the right direction!

Its a loooot more fun to figure the rest out by myself! :D

by
by
by
by
by
by