688 posts
  • 8 Years of Membership
  • Affiliate Level 1
  • Author Level 4
  • Collector Level 2
+3 more
_rg_
says

i did this in 5 minutes:

http://screenr.com/RGD

what you think?

99 posts
  • Author Level 11
  • Elite Author
  • Featured Author
  • Exclusive Author
+6 more
bringthepixel
says

nice

1766 posts
  • Affiliate Level 1
  • Author Level 5
  • Beta Tester
  • Collector Level 2
+3 more
gbs
says

Yep, that’s cool, man :D

610 posts Themes and Graphics
  • 6 Years of Membership
  • Affiliate Level 3
  • Author Level 9
  • Beta Tester
+11 more
Bebel
says

awesome!

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

1012 posts
  • 5 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 more
wizylabs
says

Awesome, can you share ;)

2468 posts
  • 7 Years of Membership
  • Exclusive Author
  • Author Level 2
  • Collector Level 2
+3 more
digitalimpact
says

So useful Roberto!

Can you please share how you did that? :)

839 posts
  • Power Elite Author
  • Winner
  • Top Monthly Author
  • Trendsetter
+10 more
wpbakery
says

Loved the idea

228 posts
  • 7 Years of Membership
  • Affiliate Level 1
  • Collector Level 4
  • Exclusive Author
+2 more
stevebluck
says

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

688 posts
  • 8 Years of Membership
  • Affiliate Level 1
  • Author Level 4
  • Collector Level 2
+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 :)

610 posts Themes and Graphics
  • 6 Years of Membership
  • Affiliate Level 3
  • Author Level 9
  • Beta Tester
+11 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