WordPress enqueue JS, jQuery and other libraries - wordpress-theming

Here’s what I do in an ordinary html file.
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/test.js"></script>
Now, I’d like to see this reflected in WordPress. So in my functions.php I do this:
function theme_files(){
wp_enqueue_script('jquery',get_theme_file_uri('js/jquery-3.3.1.slim.min.js'),NULL,'1.0',true);
wp_enqueue_script('popper',get_theme_file_uri('js/popper.min.js'),NULL,'1.0',true);
wp_enqueue_script('bootstrap',get_theme_file_uri('js/bootstrap.min.js'),NULL,'1.0',true);
wp_enqueue_script('ui',get_theme_file_uri('js/jquery-ui.min.js'),NULL,'1.0',true);
wp_enqueue_script('ownJS',get_theme_file_uri('js/scripts.js'), array('jquery'), '1.0',true);
}
add_action('wp_enqueue_scripts','theme_files');
Unfortunately it doesn’t work. I already found out that its not the dependency in my own js (scripts.js). It doen’t matter whether I do NULL or array(‚jquery‘). Also, I tried to only enqueue my own js without the others. Doen’t seem to change a thing.
Suprisingly, when I do alert(’test’); in my scripts.js it does pop up. But when I do
$(„#idOne“).click(function(){
alert(‚hello‘);
});
Nothing happens when I click on the element with the id=„idOne“
Even when I do pure js
function sayHi(){
alert(‚Hi‘);
}
var one = document.getElementByID(‚idOne‘);
one.addEventListener(‚click‘,sayHi, false);
it doesn’t do a thing ether. What do I do wrong?
Thanks!

Related

A method to get specific exports when using <script src="">

I'm making a site with Preact & Tailwind. In the code here (I know it doesn't have head, body, e.t,c but that isn't relevant to the code):
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
htm.bind(h)
let component = htm`<p>Hello World</p>`
</script>
htm and h are parts of the Preact and HTM cdn. How do I get htm and h from the preact/htm cdns?
I don't want to use a node_modules, as i want it to be a copypastable template html to use anywhere, like WordPress, replit, codepen, e.t.c. I also don't want to use as the way my code is setup it would look weird and bad to read.
Adding a dependency (or dependencies) via <script> adds those to the global scope. h, in the example above, is undefined as you have not specified where it comes from.
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.2/preact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.js"></script>
<script>
let html = htm.bind(preact.h)
let component = html`<p>Hello World</p>`
</script>
(Adjusted code, as htm.bind alone will not work. Need to assign & use the result).
This, however, is less than ideal in the modern age of ESM. Messing with globals is just rather unnecessary. Instead, use the following:
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script type="module">
import { h } from 'https://cdn.skypack.dev/preact';
import htm from 'https://cdn.skypack.dev/htm';
let html = htm.bind(h);
let component = html`<p>Hello World</p>`;
</script>
Or, even better yet, use htm/preact export to skip manually binding altogether:
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<script type="module">
import { html } from 'https://cdn.skypack.dev/htm/preact';
let component = html`<p>Hello World</p>`;
</script>
Unpkg has a number of issues (very difficult to fix, if not impossible. Not a criticism, unpkg was built in a different time) regarding ESM usage, specifically for Preact, resolving package.json "exports" and sometimes duping the Preact instance. This is an issue for hooks, as they require a singleton by design. This is why I'd recommend Skypack or esm.sh. They're built for ESM and work brilliantly.

Change <Script> Structure

I need to insert a piece of code in my website. The code is to connect my website to MailChimp:
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/0dc30c560570fa73fdd90b4ec/2cfddd4d9fb2316dbdb3b3c48.js");</script>
The problem is that my website platform just let me add code that starts with <script> and ends with </script>:
https://i.stack.imgur.com/Lyl7A.png
Is there a way to change the code structure to start with <script> , and then add the id="mcjs"?
You can write a <script> that uses document.write and adds the MailChimp script.
<script>
document.write('<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/0dc30c560570fa73fdd90b4ec/2cfddd4d9fb2316dbdb3b3c48.js");<\/script>')
</script>

Pinterest profile widget is not working all the time

I added a Pinterest profile widget to my website the way I usually do it when building a website. Normally it works fine but for some strange reason this time sometimes it shows and sometimes it doesn't... This is the website I'm talking about: http://bav.kadushimarketing.com/index4.php
This is the code I added: <a data-pin-do="embedUser" href="http://www.pinterest.com/bonaireartvilla/" data-pin-scale-width="65" data-pin-board-width="230">Bonaire Art Villas's profile on Pinterest</a>
And this is the script I added:
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
I have a lot of other scripts on this website. Is it possible that these scripts conflict with each other? Is there a way to check?
In my case the Pinterest widget didn't load itself if I had a "display:none" style on a parent div-element during the pinit.js initialisation. When I removed that style from the parent, the widget finally replaced the a-tag with a bunch of spans, containing the widget data.
Very strange behaviour, but there's a solution...
Add this line for the widget
<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.co.uk/jojomamanbebe/"></a>
Add these two lines before the closing Body tag
<script type="text/javascript" async defer src="https://assets.pinterest.com/js/pinit.js"></script>
<script type="text/javascript" async defer src="https://assets.pinterest.com/js/pinit_main.js"></script>
I included a very simple "show element on click" jQuery script that conflicted with the Pinterest script.
You must put the tag of Pinterest at the end of site code, just above the closing BODY tag.
Add these two js file in head section
<script type="text/javascript" async defer src="js/pinit.js"></script>
<script type="text/javascript" async defer src="js/pinit_main.js"></script>
Save files from here:
http://assets.pinterest.com/js/pinit.js
http://assets.pinterest.com/js/pinit_main.js
This will work 101%
Add this code just before your closing </body> tag:
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
I add to the widget link style="display: block !important"
and is all working now
This rarely works for me, and I'm not doing anything other than what's spelled out by the Pinterest widget page. In the past I've had to resort to some extremely hacky approaches, like using jQuery's .one() binding function to attach the pinit.js code to the page when a particular element is clicked.
UPDATE: Ugh, my bad. (:P) I was trying to reference a profile for inclusion within the board widget -- unworkable. Switching to the profile widget helped tremendously. I still had a little trouble getting the widget to show up on certain devices, but I did get it going.

combining jquery functions ready and live

$(document).ready(function(){
$("a[rel='box']").colorbox();
});
and
jQuery('a[href*=#]').live('click',function() { ...etc...
total NOOB question:
I have these two functions in JQuery...
How do I combine them ?
a[href*=#] is a slideshow presentation and a[rel='box'] is for a colorbox to open...
one or the other works but not both together.
That is what I get for trying to "cut and paste" code...
the Jquery is loaded
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type='text/javascript' src='scripts/jquery.colorbox-min.js'></script>
in the HEAD section
I even tried to add:
jQuery(function(){
if(jQuery.isFunction(jQuery.fn.colorbox)) {
jQuery("a").live('click',function(){
jQuery(this).colorbox();
});
}
});
but this didn't work either...
This is where I got the slideshow... www.pixedelic.com/plugins/camera/ colorbox is loaded, but doesn't work on individual pictures...
Any help would be GREATLY appreciated and thanks!
The problem was defining $ in jQuery NOT an A conflict with READY and LIVE...
I think your copy of jquery.min.js is corrupted, it doesn't define $.
Your jQuery script ends with jQuery.noConflict();, that prevents defining $.
So you have to write jQuery(document).ready() instead of $(document).ready()
You can't write $.noConflict() after you already have jQuery.noConflict() in jquery.min.js.
SOLUTION:
jQuery(document).ready(function($){
$("a[rel='box']").colorbox();
});
NOT:
// cannot below use if have jQuery.noConflict(); ! use above notice large Q //
$(document).ready(function(){
$("a[rel='box']").colorbox();
});
THANKS! Barmar!

Upgrading Uvumi dropdown (MooTools)

I'm trying to upgrade Uvumidropdown menu for use with MooTools 1.3.2 or 1.4.1 so that I can use a MooTool slider as well. The first thing I did was to replace the mootools call to a "mootools-dropdown.js" with a call to "mootools-1.2.5.js" given that the contents of "mootools-dropdown.js" begins with
var MooTools={version:"1.2.0",build:""};var Native=function(J)...
so obviously this is a MooTool core file. I did this to troubleshoot the menu, and make sure that the core file was not a custom file.
<script type="text/javascript" src="js/mootools-1.2.5-core-yc.js"> </script>
<script type="text/javascript" src="xjs/mootools-dropdown.js"> </script>
<script type="text/javascript" src="js/UvumiDropdown-compressed.js"> </script>
<script type="text/javascript">
window.addEvent('domready', function () {
var menu = new UvumiDropdown('dropdown-demo');
});
As it happens, the dropdown menu does not work with 1.2.5.
Is my presumption that the menu should work with 1.2.5 incorrect?
My findings lead me to believe that the mootools core file has been customized, but I have no way to compare it with an original 1.2.0 file.