New WP Plugin: WYSIWYG Widgets

Yesterday i’ve released my newest plugin for WordPress, WYSIWYG Widgets. The name says pretty much all there is to say but let’s get into detail on what this plugin does and why you should use it. Nothing says more then screenshots right?

After installing this plugin you should see the above block appearing as a widget you can use. Let’s drag this widget to one of my widget areas and see what it does.

Nothing fancy so far. This looks just like WordPress’ default Text widget?! Let’s click the textarea to insert some text or html.

Whoa. This WYSIWYG (that looks quite familiar from the post editor) just popped up. This is where you (or your client) can easily produce HTML (and inline CSS) mark-up without actually having to know any HTML. When you’re done creating stunning content just click the ‘Send to widget’ and the HTML gets inserted in your widget’s textarea.

All the features you love from WordPress’ default post editor now available to use in your widgets. Media uploading and inserting, easy bullet lists, linking to other pages on your blog, colors, pretty much whatever you like.

One last screenshot, showing the WYSIWYG Widgets editor filled with some content.

Head over to the WordPress repository to download this plugin and tell me what you think. Experiencing any problems or bugs? Please let me know trough the WYSIWYG Widgets support forums.

30 Responses to “New WP Plugin: WYSIWYG Widgets”

Eyal Gursoy — June 10, 2011 at 6:10 am

Hi Danny,
Very nice plugin, though there is a problem in the widgets administration page on WordPress with RTL support. for some reason the admin css he-IL is not loaded.

I’m not sure why it happens – I just know it does. this is causing the page to be displayed LTR (annoying).

Danny van Kooten — June 10, 2011 at 8:08 am

Hi Eyal,

I’ve sent you an email with some questions, it would be of great help if you could take the time to answer them so I can easily find what’s causing your problem. :)

Leonard — June 13, 2011 at 10:45 am

failure with installing:
Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /hsphere/local/home/doshnl/dosh.nl/wp/wp-content/plugins/wysiwyg-widgets/php/frontend.php on line 7

what to do?

    Danny van Kooten — June 13, 2011 at 11:03 am

    Hi Leonard.

    Looks like your host is not running PHP 5. WordPress 3.2 has PHP 5 as a requirement, and so does this plugin. I highly recommend you to contact your host and ask him to update PHP.

Norm Sash — June 14, 2011 at 1:52 pm

Neat plugin idea you have here. I’m going to install and try it (I was wondering why there was no beautified widget).

A little off topic… have you developed a way (or know of any way) to stop the wp wysiwig editor from stripping code and tags from posts and pages. I HATE it that wp does this, and judging from the number of other people commenting about the wp intrusion into our posts, a lot of other people hate it.

For example, I have a shopping cart that is hosted at a third party. To display a product in one of my posts I am supposed to go to the shopping cart site, grab a bit of jscript code that they prepare for me, and drop it into my post where I want it to appear.

Works fine if I just paste into the html editor. But if I ever switch to the wysiwig editor all my “invalid” code (according to wp) is stripped out. Argh!!

Anyway, sorry for the long winded post… just thought you might have some good idea about this.

    Danny van Kooten — June 14, 2011 at 4:02 pm

    Hi Norm,

    First of all, thank you. I’m going to have a play with this, exploring different methods to see how this is solved best. I’ll drop you a line as soon as I come up with a convenient way to insert JavaScript into your posts. :)

    Danny van Kooten — June 14, 2011 at 7:00 pm

    Have a look at ‘how to preserve inline JavaScript in your post‘ and let me know how that works for you. :-)

martine b — June 21, 2011 at 3:23 pm

danny,
ik heb je plug in op de website gezet, alleen als ik ´m test, geeft ie aan dat naam en emailadres verplicht zijn. terwijl ik alleen een invulveld heb voor ´emailadres´
wat gaat er mis? welke vinkje heb ik uit of aanstaan waardoor het niet werkt?
ik hoor graag van je.

adrian — June 23, 2011 at 1:45 pm

Hi danny,

the wysiwyg widget is still the same regular text widget. it didn’t auto change to a wysiwyg editor? do i need to install tinymce or something for it to work? thanks

    Danny van Kooten — June 23, 2011 at 3:39 pm

    Hi Adrian,

    Did you try dragging the newly added ‘WYSIWYG Widget’ to one of your widget area’s and clicking the textarea? That should make the visual editor pop-up in a thickbox screen.

      Adrian — June 24, 2011 at 1:12 am

      hello Dan,

      Yes did exactly the same thing, dragged the widget to my sidebar1 but no visual editor poped up. i’t just behaved like the normal text widget, i mean i can only see a normal text widget and when i clicked too on the textarea nothing happened.

      could you also provide a short video tutorial of it? hope im not asking too much. maybe im just missing something on the procedure.

      thanks dan.

Adrian — June 24, 2011 at 1:56 am

is it because i’m using Dean’s FCKEditor 3.3.1?

    Adrian — June 24, 2011 at 2:00 am

    Hi dan! found the issue, indeed it’s because of the installed Dean’s FCKEditor 3.3.1 . when i disabled it, the visual editor pop-up showed up. thanks. i guess you can add it in your note. thanks!

      Danny van Kooten — June 25, 2011 at 8:12 am

      Hi Adrian!

      Allright! I’m glad you got it to work. It won’t be easy to make the plugin compatible with FCKEditor (if even possible) so guess you’ll have to do with this. Hope you like it though! :-)

Jakub Chodorowicz — July 2, 2011 at 1:05 pm

This plugin is really amazing and very useful – thanks!

Julien DIZDAR — July 2, 2011 at 10:39 pm

Hi danny,
Your widget is perfect ! thank you very much.

I have a question …
on wysiwyg i add some line break.
But when i send to widget, all line break disappears.

what to do ?

Thank

    Danny van Kooten — July 3, 2011 at 8:26 am

    Hi Julien,

    Make sure to check the checkbox beneath the textarea that says ‘Automatically add paragraphs’. That will convert all linebreak’s to paragraph’s when printing the output on the frontend of your website. :-)

Lydia — July 3, 2011 at 9:20 am

Hi,

Am considering using this plugin. But before I go through the trial, would this plugin enable me to customize my footers, i.e. center text on a footer? Adding other things seems quite doable but, centering is what I’m after.

Thank you for your help.

    Danny van Kooten — July 3, 2011 at 9:23 am

    The WYSIWYG editor that comes with WordPress has an option to align text in the center. So if you’re footer widget area’s span the whole footer then you can most certainly center text in your footer. :-) It depends on your theme though.

Lydia — July 3, 2011 at 9:30 am

Danny,

Thank you for your prompt response. I’m inquiring about my other blog’s theme, Coraline, which is cool but it has its limitations if you’re not css or php savvy. If Coraline’s footer widgets are not good for this, then which themes are most editable with your plugin?

Most kind thanks again from Panama.

Cody — July 6, 2011 at 5:14 pm

Danny,

Every time I click on the text area and the Wysiwyg editor opens, it adds multiple   lines. Is this because I have wpautop disabled?

    Danny van Kooten — July 10, 2011 at 7:38 am

    Hi Cody,

    This is a TinyMCE issue i’m still looking into. I’m sorry for now if it’s a problem, i’m looking into TinyMCE to fix this ASAP.

Dave Porter — August 1, 2011 at 12:10 am

Hi There,

Thanks for the plugin, someone just pointed it out on a forum!

I use TinyMCE Advanced for all my sites – does the plugin automatically use this, or does it just use the standard TinyMCE ?
TIA, Dave

Stef — September 16, 2011 at 12:57 am

hey Danny – thanks for the fab plugin – what a great time saver!

Thought I’d just let you know it doesn’t work in Chrome. Not sure if it’s conflicting with a plugin I have installed or not – I just switched to Firefox & voila!!

cheers

Stef

Viv — November 9, 2011 at 8:20 pm

Hi Dan,

I’m wondering how you can use the Wysiwyg plugin with the newsletter sign-up form you also created. I have both plug-ins installed but the newsletter sign up form loads as a basic text widget. I also have TinyMCE installed. Any help would be much appreciated.
Thanks,
Viv

    Danny van Kooten — November 12, 2011 at 8:47 am

    Hi Viv,

    WYSIWYG Widgets has some problems with some browsers and the current WordPress version. For some, it works just fine, for others it doesn’t. Upon clicking on the Newsletter Sign-up Widget’s textarea a visual editor should pop-up. If not, try using the WYSIWYG Widget and use the [newsletter-sign-up-form] shortcode.

    Hope that helps!

    Danny

Lawrence — December 26, 2011 at 8:10 am

Hi Danny,

Compliment of the seasons to you.

I am new to WordPress, HTML and CSS and want design a website hence been taking online training with Open Source Training. I wanted to add text to the right hand side column and Your widget WYSIWYG was recommended. I am using twentyten themeand and Mozilla Firefox browser. I have installed your widget and it does not show any tool bar even after clicking on the text area. I have read all the comment mentioned and your feedback and could not find any solution.

What should I do?

SPN — February 10, 2012 at 8:53 pm

Hi,
this plugin stopped behaving correctly with WP 3.3, both in Safari and Firefox (Lion). ‘Visual’ does not work at all; the kitchen sink is gone and you can’t add any text.
Your somewhat annoying donation reminder that pop ups when clicking the plugin admin page within WP becomes sort of ironic.
I’d love to support your work, when working again, though the ‘reminder hack’ is a bit of a turn off, working or not.

gadi — April 16, 2012 at 6:36 pm

The easiest way to show an image in sidebar. Thank you very much :)

tomo — August 7, 2012 at 9:19 am

great plugin, I use it to suit my clients need

Leave a Reply

Pallet Tafels