login - Can i hide a dynamically created div to logged out users?

Is it possible to hide a specific dynamically created div from user that is logged out?

I have tried this but doesnt work:

<?php if (is_user_logged_in()): ?>
var element = document.getElementById("elementor-element-f4e5a8e");
element.classList.add("logged-in");
<?php else: ?>
var element = document.getElementById("elementor-element-f4e5a8e");
element.classList.remove("logged-out");
<?php endif; ?>

Then added the appropriate css.

Is it possible to hide a specific dynamically created div from user that is logged out?

I have tried this but doesnt work:

<?php if (is_user_logged_in()): ?>
var element = document.getElementById("elementor-element-f4e5a8e");
element.classList.add("logged-in");
<?php else: ?>
var element = document.getElementById("elementor-element-f4e5a8e");
element.classList.remove("logged-out");
<?php endif; ?>

Then added the appropriate css.

• login
• logout

Share Improve this question edited Dec 7, 2022 at 13:39 Ryan asked Dec 7, 2022 at 13:35 RyanRyan 522 bronze badges 4

• 1 if your theme uses bodyclass() correctly in its templates then there's a logged in or logged out html class you can write CSS for, there's no need for custom PHP or JS – Tom J Nowell ♦ Commented Dec 7, 2022 at 15:10
• If possible, it would be more performant to prevent the div from outputting at all instead of hiding it with CSS. – Deepti Boddapati Commented Dec 7, 2022 at 21:51
• Why not just wrap the div itself in is_user_logged_in()? – Jacob Peattie Commented Dec 7, 2022 at 21:54
• I would wrap the div itself in that but unfortunately it is dynamically created therefore no code is created till the page displays, so i need it to find the code once its created then hide it. But nothing seems to work. – Ryan Commented Dec 8, 2022 at 8:33

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

The body element already gets a logged-in class that you can use to hide the element with regular CSS.

body:not(.logged-in) #elementor-element-f4e5a8e {
  display: none;
}

If the ID is dynamic and isn't always the same you'll need a different selector to target the element, but that would still just require standard CSS techniques that have nothing to do with WordPress.

Also, be aware that hiding something with CSS is trivially easy for users to bypass, so whatever information is in this div should be treated as public.

It seems you're using is_user_logged_in() correctly, but try to wrap the action of the if statement in script tags so you create an inline JS script instead:

<?php if (is_user_logged_in()) { ?>
<script>
document.getElementById('elementor-element-f4e5a8e').classList.add('logged-in');
</script>
<?php } else { ?>
<script>
document.getElementById('elementor-element-f4e5a8e').classList.add('logged-out');
</script>
<?php } ?>

Just a side note, hiding by CSS is easily bypassed in the browser. So in that sense it would be better to add the code of the DIV inside the if statement instead.

Thanks for the help, i managed to come right with this:

<?php
if ( is_user_logged_in() ) {
        echo "<script type='text/javascript'>
            $(document).ready(function($) {
    $('#elementor-element-f4e5a8e').addClass('logged-in');
});
            </script>";
    } else {
        echo echo "<script type='text/javascript'>
            $(document).ready(function($) {
    $('#elementor-element-f4e5a8e').addClass('logged-out');
});
            </script>";
    }
?>

The above is one option I found, but the below works even better:

if (is_user_logged_in()): ?>
    <script type='text/javascript'>
            $(document).ready(function($) {
    $('#elementor-element-f4e5a8e').addClass('logged-in');
});
            </script>
<?php else: ?>
        <script type='text/javascript'>
            $(document).ready(function($) {
     $('#elementor-element-f4e5a8e').addClass('logged-out');
});
            </script>
<?php endif; ?>