Adding Javascript for Logged In Only

Support
#1

Greetings, I recently added the following Javascript to make it so all of the new menu items that appear when a user is logged in (using Ultimate Member plugin), appear on their own row.

// select the x-nav element:
const newNav = document.querySelector(’.x-nav’);

// select first seven children
const nodes1 = […newNav.children].splice(0, 7);

// create wrapper div for first seven children which make up the default menu:
const wrapper1 = document.createElement(‘div’);
wrapper1.classList.add(‘defaultMenu’);

// and append all children:
nodes1.map(node => wrapper1.appendChild(node));

// and add the wrapper to the container:
newNav.appendChild(wrapper1);

// select the children of the node that makes up the logged in (social UM) and shopping cart menu items:
const nodes2 = […newNav.children].splice(0, 6);

// create wrapper div for children which make up the social UM and shopping cart menu items:
const wrapper2 = document.createElement(‘div’);
wrapper2.classList.add(‘socialMenu’);

// and append all children:
nodes2.map(node => wrapper2.appendChild(node));

// and add the wrapper to the container:
newNav.appendChild(wrapper2);

What this essentially did was wrap the first 7 menu items in a new div with the class .defaultMenu and the rest of the menu items in another div with the class .socialMenu. I adjusted the CSS using CSS grid to make everything look fine when a user is logged in, however, when logged out, this Javascript makes it so the div with the .defaultMenu class is located inside the div with the .socialMenu class. This makes the nav look pretty terrible when logged out.

My question is, is there any way to make it where the above Javascript is only used when a user is logged in? Also if you have any other suggestions that would be better for me to accomplish my goal, I am open to them. I am simply trying to make all new menu items that appear when a user is logged in, to be in their own row.

Logged in
https://starscriptlegends.com/wp-content/uploads/2019/09/Logged-in-1.png
https://starscriptlegends.com/wp-content/uploads/2019/09/Logged-in-2.png

Logged out
https://starscriptlegends.com/wp-content/uploads/2019/09/Logged-out.png

#2

Hi Zachary,

Please consider that this is a customization question and it is outside of our support scope. We are going to do our best to show you how to achieve the feature in question, but we will not be able to implement or follow up on that.

I suggest that you install the Child Theme, and use the WordPress Condition Tags to selectively include a Javascript file when the user is logged in.

  • Open up the functions.php file of the Child Theme.
  • Add the PHP code below into the file:
function add_scriptes() {
	if (is_user_logged_in()) {
		wp_enqueue_script('the-script', get_stylesheet_directory_uri(). 'loggedin.js');
	}
}

add_action( 'wp_enqueue_scripts', 'add_scriptes');
  • is_user_logged_in() is the conditional tag to determine if the user is logged in. Click here for more information.
  • You will need to add a javascript file named loggedin.js into the root folder of your Child Theme.

Thank you.

#3

I added a loggedin.js file to the Theme Editor in my Child Theme, then moved the JS code I had into it. From there I added the code you sent me into functions.php and it didn’t seem to work. In other words, the javascript does not appear to be implemented when logged in…

#4

Hello Zachary,

We can try and have a look on your website to check. Please provide us with the admin access to your site in a Secure Note:

#5

Ok. I sent a secure note!

#6

Hello Zachary,

The given credentials is not working for us.

By the way, after making your site changes, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

I noticed that you have install Autoptimize plugin too. You must temporarily disable this plugin or regenerate the minified CSS and JS files so that your latest JS file will also be added.

And please clear your browser cache too. You may use private browsing mode in testing your site to make sure that you are viewing the latest codes from the updates and not the cached version in your browser.

Regards.

#7

I’ll work on clearing cache, but I just copied and pasted the user name and pw I gave you and it worked fine for me during login.

#8

Ok. Cache is cleared for WP and Browser and I removed Autoptimize. Can you try logging in again?

#9

Hello Zachary,

We cannot get pass the WordPress.com log in. The credentials do work for us either. can you please temporarily disable the Jetpack plugin so that we can login to the default WordPress login url?

Thank you in advance.

#10

Ok. I disabled Jetpack and sent you new secure note.

#11

Hi Zachary,

Thanks, we are now able to log in.

Please try updating the PHP code to

function add_scriptes() {
	if (is_user_logged_in()) {
		wp_enqueue_script('the-script', get_stylesheet_directory_uri(). '/loggedin.js');
	}
}

add_action( 'wp_enqueue_scripts', 'add_scriptes');

So what we did is we just added a / before loggedin.js. It should be able to implement the javascript now.

Let us know how it goes. Thanks!

#12

So I changed the functions.php script as you said. I commented out the js in Theme Options and then activated the js I wanted in Loggedin.js. The result is that the javascript, which works fine in Theme Options, is coming up with errors when used in the Loggedin.js. I’m getting the following error in the console:

Uncaught TypeError: Cannot read property ‘classList’ of null

https://starscriptlegends.com/wp-content/uploads/2019/10/Screen-Shot-2019-10-04-at-9.18.13-AM.png

#13

Hello Zachary,

Please understand that the error now comes from your custom javascript code inside the JS file. You may need to consult the creator of the code and help you troubleshoot this remaining issue.

Perhaps these links might help you:

Thanks for understanding.

#14

Ok. Can you just answer for me why my JS would work fine with no console errors when put in the JS section in Theme Options, but come up with errors when put in the LoggedIn JS folder in Theme Editor? The .classList code works fine when used in the JS section in Theme Options.

#15

Hello Zachary,

Adding the loggedin.js, it will be loaded in the footer compared to the js when placed in X > Theme Options. You’re trying to access an element in the DOM before it exists so when your trying to access the class the item doesn’t exist yet. You may need to edit your code and have it here:

$(document).ready (function (){
    // code here
});

Hope this helps.

#16

Awesome! That makes sense. I’ll give this a try!

#17

Hi Zachary,

Let us know how it goes. Have a great day!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.