Properly Run Pop Up-Javascript in WordPress

nice work!
I used to work with a similar popup, I didn’t know how enqueue the js and css either but I had access to my server and created a /js and /css direcories and linked to the files in my header.php:

<link href="https://example.net/css/popup.css" rel="stylesheet" type="text/css">
<script src="https://example.net/js/popup.js" type="text/javascript"></script>

and added the HTML to my footer.php

can your client do that? does he/ have access to his server?

also, try to make the overlay work the exact same way as “close” button, if clicked. (#ui-widget-overlay)

I linked to the javascript directly in the header.php and add the html to the footer. But it’s not working. Part of the javascript does not work, because it dynamically make some of the html display:none to hide it, and then pops it up.

I will make the adjustment to the overlay; I missed that UI principle.

I just need this to work first.

Firstly, where do you want the popup? If on homepage, you can use index.php for that purpose. Then, before loading WordPress header (get_header()), you need to enqueue the JS (popup.js). Use wp_enqueue_script. Also don’t forget to include jquery and jquery-ui-core as dependencies to that JS, so popup.js is loaded only after those two are.

// index.php
<?php
wp_enqueue_script('my-popup', get_template_directory_uri() . '<path-to-popup.js>', array(
        'jquery',
        'jquery-ui-core'
    ));

get_header();

// rest of the code (including html for popup)

You can’t use $ as jQuery in the global JS scope because it’s loaded in No Conflict Mode. However, you can use $ in a function’s local scope (e.g.

jQuery(document).ready(function($){
   // you can use $ instead of jQuery here
});

After that, put your popup’s HTML in the index.php somewhere after loading header. And you are done.

If you want to understand WordPress template files hierarchy in more depth, study this diagram WP template hierarchy

I was able to enqueue the script and the required css just fine in a child theme’s functions.php.

add_action('wp_enqueue_scripts', 'themify_add_scripts');

function themify_add_scripts(){

    wp_enqueue_script( 'popup.js', site_url() . '/ctct/popup.js', array(
        'jquery',
        'jquery-ui-core'
    ));

    wp_enqueue_style( 'popup-style', site_url() . '/ctct/styles.css');

}

However, I can’t seem to find a good place to put the html.

I’ve tried index.php in the child theme; I’ve even tried inside the home page itself (which is set to a static page).

Each time, I get two problems. One, is that the pop-up does not appear on top of all the elements, but seems to appear a little underneath the fixed header of the theme. Not only does this look terrible, it blocks the closing button.

The second problem is that the js only runs when a admin is logged in.

1. That fixed header is not related to the WordPress itself but to the design of your site. It would be wise enough to make the header static instead of fixed when popup is opened so it can be above all layers (or use any other CSS technique to accomplish this).

2. This is very strange. As far as I know, the action wp_enqueue_scripts runs on front-end, not admin-end so themify_add_scripts should be called even if the admin is not logged in. I can’t think of any reasonable explanation for this, sorry. Maybe the outputting of the enqueued scripts is made conditional somewhere in your theme, e.g.:

if (is_admin()) {
   wp_head(); // scripts are outputted here
}

but I’m just guessing here..

I understand the fixed header is related to the design of the site. I just didn’t expect the JS to do that at all. I’m not sure what css to apply to keep it all top level.

It’s crazy how complex implementing this is.

I’m also not sure if the header would be made admin conditional, as, of course, non admin viewers get the header too. If you view the source of the page, the JS and CSS loads correctly in the head for all viewers. So it seems the linking of the scripts is correct. It just doesn’t execute for some reason.

I tried to do this without enqueueing, and just linking to header.php and adding to index.php, but I got the same result. My hope is doing this the correct way will eventually get this to work and keep the code resilient against theme and wordpress core updates

Okay, is the Developer Console in your browser showing any JS errors? If yes, either create a screenshot or paste the error here.

Also, try to disable showing admin bar on page by putting the following PHP code into functions.php:

add_action('show_admin_bar', '__return_false');

Then try if the popup works even for the logged-in administrator. Disabling the admin bar on page should remove all admin styles and JavaScripts from the page even when you are logged-in.

Uncaught TypeError: undefined is not a function

It references this in popup.js line on line 34 whcih starts with

jQuery('#ccsfg').dialog({autoOpen:false,modal:true, resizable:false, closeText:'close', draggable:false, width:350, buttons: dialog_buttons
				});

And actually, what is happening now you will see the first popup, and then clicking “Sign Me Up” you get the errors. The first popup appears above everything, but only in what appears to be the #content div. My guess is the JS windows can only be on top of other CSS styled elements in some sort of hierarchy. Since I put the html directly in the home page, maybe that’s what it only blankets there.

The code is live right now on https://www.lakenormansocialclub.com/

Click the ‘Test’ Hyperlink.

Well, although I still see the JS error, the popup appears to be working for me. After clicking on the ‘Test’ hyperlink, it opens.

The JS error is happening because an HTML element with #ccsfg ID is missing from the source code, as far as I can see. Looks like you are either missing something or did something bad in the code. Check it out.

The crazy thing is, still, there is no JS undefined error when logged in as admin in WP. Just bad styling.

https://i.imgur.com/XN6QLFi.png?1

Oh sorry, it is actually there. It’s just missing the dialog function. Maybe it’s not included in the jquery-ui-core JS library.

But that library functions in admin?

I see where you are going. Maybe admin loads additional javascripts (because of admin bar?).

Seems to me like jquery-ui-core is not even loaded if you are not an admin. I can’t find it on the page you sent me. Going to try to test it on my site locally.