0

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.

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
    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. Dec 7, 2022 at 21:51
  • Why not just wrap the div itself in is_user_logged_in()? 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
    Dec 8, 2022 at 8:33

2 Answers 2

0

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.

0

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; ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.