isotropic-2022
Share
Blog
Search
Menu

How To Fix TypeError: $ is not a function on line... in Oxygen Builder

By James LePage
 on December 11, 2020
Last modified on January 6th, 2022

How To Fix TypeError: $ is not a function on line... in Oxygen Builder

By James LePage
 on December 11, 2020
Last modified on January 6th, 2022

This article shows you how to fix TypeError: $ is not a function on line 1 (or any line) in Oxygen Builder.

Luckily this is a really simple fix, and it's caused by WordPress itself.

text

Whenever you add any jQuery code to Oxygen (via the JS section of a Code Block), this error will trigger because WordPress does not recognize jQuery well. Despite that issue, it does support jQuery, and it comes pre installed on the CMS. All you need to do is make it easy for WP to understand that you do, infact, want to use jQuery code on you Oxygen Builder Code Blog.

Here’s how to fix it. On a simple chunk of jQuery code, simply swap the $ for jQuery. Here’s an example:

Original: $('.my-paroller').paroller();
Oxygen Builder Compatible: jQuery('.my-paroller').paroller();

For longer jQuery in an Oxygen Builder Code Block that’s toggling the “TypeError: $ is not a function” error, use this:

(function($) {YOUR CODE})( jQuery );

That should solve your problem.

codewp-ai-og-new
Meet CodeWP, an AI Code Generator
Prompt CodeWP in plain English and it'll output high quality code, specific for WordPress.
isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
Join Now
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jeff K.
1 year ago

Hi
It works wonderfully, the error message has disappeared.

Many Thanks! you are our hope.
I am very happy there are people like YOU who take the time to help others.
You are an idol..

Julian
Julian
4 months ago

Hi James,

please could you explain it to me?
I just have to replace all "$" with "jQuery"? I've been trying for ages to add a position aware button, but unfortunately I can't. maybe you have tips for a good procedure

see here: https://codepen.io/kkick/pen/oWZMov

I also tried changing the background color of the button. However, this negates the javascript effect. maybe you have some tips for me 🙂

Bang
Bang
18 hours ago

Hey, thanks for the solution, but what if i get a "JQuery is not defined" in the code block?

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram