Hello. I’m trying to hide a specific class on my page that displays an episode list for ghost visitors. I’ve identified the class and attempted to write the necessary code/scripts using ChatGPT, but it doesn’t work correctly. The issue is that the content remains hidden even for logged-in users. I believe my script is not functioning properly, and I’m unsure how to fix it.
That’s what we got so far. It’s abotu WordPress’s theme:
What i’ve added in Style.css
\#login-message {
color: red;
text-align: center;
font-size: 16px;
padding: 10px;
background-color: #f8f8f8;
border: 1px solid #ccc;
}
.epcheck {
display: none;
}
What i’ve added in footer.php
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var loginMessage = document.getElementById(‘login-message’);
var epList = document.querySelector(‘.epcheck’);
if (userIsLoggedIn) {
loginMessage.style.display = ‘none’;
epList.style.display = ‘block’; // Показва листа с епизоди
} else {
loginMessage.style.display = ‘block’;
epList.style.display = ‘none’; // Скрива листа с епизоди
}
});
// Тази променлива трябва да отразява статуса на потребителя, може да се зададе от PHP
var userIsLoggedIn = <?php echo json\_encode(is\_user\_logged\_in()); ?>;
</script>
What i’ve added in single-anime.php above <div class=”bixbox bxcl epcheck”>
<div id=”login-message” style=”display:none;”>Трябва да се <a href=”https://otaku.bg/login/”>логнете</a>, за да видите епизодите!</div>
<div class=”bixbox bxcl epcheck”>
<!– Съдържание на листа с епизоди –>
</div>
[ad_2]
You should be using is_user_logged_in() core function and setting the class to display with a script that only loads if the user is logged in and on the specific page you want to target the display change (so you aren’t loading unnecessary code elsewhere. I.e. if (is_page(‘Your page title or slug – can also use id’) && is_user_logged_in()){ echo ‘<script> your script here</script>’;} inside a function using wp_head or wp_footer action hooks.
[is_user_logged_in() dev docs](https://developer.wordpress.org/reference/functions/is_user_logged_in/)
If I understand the problem, you are way overthinking it.
You have one piece of content that you want to display if the user is logged in and another if they are not (ghost = guest?). Is this right?
While the right answer is definitely to handle this server side, you can easily handle it in CSS like this:
body.logged-in #login-message {
display: none;
}
body:not(.logged-in) .epcheck {
display: none;
}
But this approach is not anywhere close to “secure” as you are sending the content to the browser regardless. So anything in “epcheck” can still easily be seen.