How to insert a widget with a jscript in wordpress pages/posts

LOL But this seems really really difficult. Can someone help me out, please? How can I do this, please?

It only seems so, but it’s not really so ??

Do you want to display the IQAir widget on a particular page/post ONLY, or do you want this to appear throughout the entire site?

If you want to display the widget in a particular page/post only, and if you’re using the native WordPress block editor (aka Gutenberg), insert a new CUSTOM HTML block into the page/post in question, copy and paste the entire IQAir code into this CUSTOM HTML block, and update that page. That’s all.

If you want to display the widget throughout the entire site, you’ll have to look for an appropriate Widget Area on your site where you want to display the IQAir widget (Sidebar, Header, Footer, etc — this depends on your specific theme). Then insert a CUSTOM HTML block into that area. (If your version of WordPress is 5.7 or earlier, you’ll have to insert an HTML Widget instead, as 5.8 overhauled the widgets system in WordPress.)

If something is not clear, please let me know. But also include your website address so I can fish shout some pertinent details.

hi George,

Thanks for the reply. Yes I want them to be in specific pages. Like I want to show air quality of Spokane, Washington in Spokane page. My website is very new and I’m building it.

I tried custom html already but it just doesn’t output anything. I think I have the updated Gutenberg. It’s called Advanced Editor Tools (previously TinyMCE Advanced) Extends and enhances the block editor (Gutenberg) and the classic editor (TinyMCE). And it’s got that custom HTML block.

https://grabbingit.com/spokane-air-quality

See nothing shows up.

Is this because of that javascript? I heard wordpress doesn’t like it??

I think I have the updated Gutenberg. It’s called Advanced Editor Tools (previously TinyMCE Advanced) Extends and enhances the block editor (Gutenberg) and the classic editor (TinyMCE). And it’s got that custom HTML block.

I was referring to just the default, native editor that comes with the 5.8 you’re running. If you’ve installed the Gutenberg plugin just for this, please remove it, as you don’t need it.

I was also referring to the Custom HTML block that comes with WordPress by default. You don’t need this mouthful “Advanced Editor Tools (previously TinyMCE Advanced) Extends and enhances the block editor (Gutenberg) and the classic editor (TinyMCE)” plugin for this to work. If you installed this plugin just for this, kindly remove it as well — you don’t need it.

I can see on your site that you’ve inserted the code at three different places.

The reason they’re all not working has to do with the code, and not your website or anything you may be doing wrong.

Thankfully, the problem is very easy to fix:

Just change the http in the code to https (note that s here). So the code becomes:

<div name="airvisual_widget" key="XXXXXXXXXXXXXXXX"></div>
<script type="text/javascript" src="https://cdn.airvisual.net/assets/widgets/widget_v3.0.js"></script>

Here’s the code working on my test site, using the CUSTOM HTML BLOCK that comes with WordPress’ block editor by default:

EXPLANATION (IF YOU ODN”T MIND)

Your site uses a secure connection (ie HTTPS). Such a secure site will not allow loading anything from links that use insecure connections (ie HTTP). So even though WordPress inserted the IQAir code properly, our browsers were blocking the code from executing. That simple flip of the address from HTTP to HTTPS fixes this ??

WoW! You are a Genius! I haven’t even tried to apply your fix, but I’m sure it will work!

I will reply here with the result.

I know it seems easy after you have shown what to do, but it takes a genius to figure that out. In this case, it’s you!

Thank you ??

It just worked! I only added that tiny little “s” ??

Thanks, George, You saved me and my time! I feel silly for those numerous plugins I tested all day long ??

• This reply was modified 3 years, 6 months ago by Sarah McLean.