Site Origin Widget not working in West Pro


#1

I tested the ‘Tabbed widget’ that came with the ‘LiveMesh’ widgets, which are an Add-on to the Site Origin Widget Bundle plugin.
The widget doesn’t open tabs, in West Pro, but it works fine in the default ‘twentysixteen’ and 4 other themes I tried.

Please see the widget, in the ‘Below Header area’ HERE .

I also tested the widget in other West Pro sidebars, but it also doesn’t work.

Can you please let me know what’s going on?

This is actually a very important feature that my client wants as a part of her site.
She’d like a ‘greetings’ gif on the front page, and a few tabs, to give visitors some basic info about the site.

Best Regards,

Zoran


#2

Hi,

It doesn’t work because it’s interfering with our smooth scroll code. You’ll need to find a different plugin that doesn’t add IDs in the hrefs.

You can even use some custom code in a regular text widget if you want more control. Let me know if you would need help to implement this.


#3

Hi Vlad,

Thank you for the speedy reply and for the jQuery alternative on CodePen.

I did some more testing, with some other themes that use SmoothScroll, and found that the tabbed
widget worked, but the SmoothScroll got all messed up.
Which means that the West Pro theme is not at fault here.

Phew. I’m glad.

Both me and my client like the West Pro theme very much, and seeing that a plugin seemed to work fine in other themes, but not in West Pro, was a bit disheartening, before looking deeper into it.

In the meantime, I’ve found an alternative, by using the ‘jQuery UI widgets’ , a free WP plugin, which
has been around for a while now. It uses the tabs provided with jQuery UI, which ships natively with WordPress. Once the tabs are enabled in the plugin, I just copied the sample HTML code for the tabs from jQueryUI website, and pasted it in a text widget in WordPress.

It seems to work fine, and it doesn’t seem to cause conflict with the SmoothScroll, on West Pro.
However, it also relies on IDs in hrefs, so I’m a bit puzzled here. Perhaps I will run into a problem with it later …

So, just in case, I will try to implement the code that you suggested, on CodePen.

I think - to implement it in WordPress, I would need to first enqueue the
javascript, as a separate file, include the CSS in my Child theme’s ‘style.css’, and then
create a text widget that will contain the HTML part of the code.

I could use your help, though. If you could please let me know what is the best way to include the javascript part , into West Pro.
I know it needs to be enqueued in the functions.php, but it would save me some time, and some guesswork, if you could please provide the snippet for that.
The rest, I’m pretty sure, I can do alone.

Thanks a bunch,

Zoran


#4

You don’t actually have to enqueue it, you could just wrap it in <script> tags and add it in the text widget. To enqueue it would be mostly needed if you were building a theme from scratch so that it’s easy for child themes to remove your code. That’s not the case here.

But if you want to follow this route, this is how you would do it:


wp_enqueue_script( 'your-unique-handle', get_template_directory_uri() . '/js/yourfile.js', array('jquery'), '', true );

This bit of code would need to be added in your child’s functions.php file, you probably already have a function there that hooks into wp_enqueue_scripts. It need to go into that function.

And instead of the first line from the JS part on codepen, you want to add jQuery(function($) {.


#5

By wrapping, you mean just include it inside <script>…</script> tag, in the text widget ?


#6

Sorry, didn’t notice my previous message wasn’t showing up correctly. I’ve edited now. That’s what I mean, yeah.