Problem Creating a Widget

Beaver Builder
1

So I’m attempting to just build some of my own wordpress widgets, but I can’t see to get certain things to work. For example, I’m creating a simple widget with a color picker in it.

I enqueue the color picker like so:

wp_enqueue_style( ‘wp-color-picker’ );
wp_enqueue_script( ‘wp-color-picker’ );

Then I’m just putting this on my back-end form:

<script type=‘text/javascript’>
jQuery(document).ready(function($) {
$(’.my-color-picker’).wpColorPicker();
});
</script>

<input type=“text” class=“my-color-picker” name=“background_color” value="" />

But when I click the input nothing happens. No errors in the console window either… I’ve tried this with a few different jquery type items, but none seem to work.

Is there something I’m doing wrong here to get this to work?

2

Hey Jeffrey,

Thanks for getting in touch! A bit of Googling led me to the link below. Granted, the post is quite dated but it gets the job done. You may just need to tweak a line of code or two.
http://wordpress.stackexchange.com/questions/82718/how-do-i-implement-the-wordpress-iris-picker-into-my-plugin-on-the-front-end

Hope this helps!

Ben

3

Thanks for that. That was actually the first one I tried. It seems like nothing with jquery will work though. In fact, I just downloaded a widget that someone else built that is just the color picker. It won’t work in the BB…but when I go to the appearance->widgets and just throw it in one of those it works?

Before I tried the color picker, I tried to create a font-awesome icon picker as well, and that didn’t work. I thought it was just my code, but now that I try this plugin and it isn’t working either I’m wondering what it might be…

This is the one I just added to test:
https://pippinsplugins.com/adding-the-farbtastic-color-picker-to-your-wordpress-widgets/

4

Hey Jeffrey,

Do you mind sharing what kind of Widget you are trying to make? Just curious as to maybe we have a module that can handle the task? Also, you might just want to create a custom module as opposed to creating a widget?

Regarding the font-awesome icon picker, we have our own Icons module you can use. I suggest you give that a shot.

Ben

5

[Content Hidden]

6

Hey Jeffrey,

Thanks for the detailed explanation. Exporting a page layout as a template can already be done. After creating the layout you wanted, just hit Tools > Save Template. This should allow you to apply/append the said layout to another page.

Saving a Row/Module as a template is currently in the works together with the Global Rows and Modules(which I’m pretty excited about). You can find more BB goodies in store for you in the blog entry link below.
http://forum.wpbeaverbuilder.com/beaver-builder-roadmap-july-2015/

For the widgets issue, I’ll assign someone from the team that can assist you further in that regard.

Ben

7

Oh I feel slightly embarrassed now. I overlooked that “tools” menu so many times. Yea, I’m excited now to see those new features come out!

Thanks for assigning someone to look at the widgets for me.

8

Hi Jeffrey,

Just to check, are you enqueuing css/js within the wp_enqueue_scripts action?

Next, can you verify that your $(‘.my-color-picker’).wpColorPicker(); JS code is showing up on the page?

Let me know about those and we’ll go from there.

Justin

9

Justin,

When I wrote the code myself I was enqueuing the css/js using the wp_enqueue_script action. However, even though I have it on my page, the $(‘.my-color-picker’).wpColorPicker(); is not showing up when I view page source from the browser?

Also, just to be sure that it wasn’t my coding, I actually installed this simple widget (you can see the exact code on the link below):

https://pippinsplugins.com/adding-the-farbtastic-color-picker-to-your-wordpress-widgets/

That’s the one that works in the normal widget area in wordpress, but it doesn’t show the color picker in the BB.

10

Hey Jeffery,

How are you including the $(‘.my-color-picker’).wpColorPicker(); code? If it’s not showing up, that is probably the issue.

The color picker in Pippin’s widget probably isn’t showing up because it’s not coded to work on the frontend.

Have you considered creating a custom module instead? They are more versatile than widgets and easier to code for the frontend.

Justin

11

I remember trying a few different methods, but the last one I tried putting it in the actual html in the “form” section?

I haven’t looked into the custom module yet. I guess I need to dig into the documentation…

12

I just looked at the documentation, and I think I might be able to accomplish this with custom modules. I’m going to jump into that and see if I can get one done.

13

Great! Let me know if you have any questions about that.

Justin

14

Hey guys, thanks again for all your support. I have to say, you have been really great…very fast and helpful responses!

I just built a custom module, and it was WAAAY easier than doing the widget!

Great product, great support!

15

Hey Jeffrey,

Glad to know that was the case! Have fun with The Beaver! :slight_smile:

Ben