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?

98 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

1748 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

596 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 ;)

2468 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
+2 more
digitalimpact says

So useful Roberto!

Can you please share how you did that? :)

834 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 :)

596 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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by