How To Hide A Page Element From Non-Logged In Users In WordPress

Make stuff on your site disappear from non-logged in users!

I had a situation a while back where I needed to hide a portion of a WordPress site from non-logged in users, so I decided I’d notate how to hide certain elements from people that aren’t logged in to your WordPress site.

Use Case: Normally, you can hide a page element in the CSS file by using a display: none;, but in our case, we only want to hide the element from someone that isn’ logged into WordPress.

If they are logged in, then we do want them to see the information.

Let’s say that you want to hide a logo from non logged in users.

The way we’re going to do this is by using the WordPress is the is_user_logged_in()’ function. http://codex.wordpress.org/Function_Reference/is_user_logged_in

Find the part in the theme’s code that you want to hide.

In this example, we’re going to hide an avatar icon from non logged in users.

In the code, we find the avatar.

<a class="t1-drop-toggle" href="<?php echo esc_url( get_author_posts_url( get_current_user_id() ) ); ?>">
 <i class="icon icon-person">
 <?php echo get_avatar( $theme_current_user->user_email, 40 ); ?>
 </i>
</a>

Now we wrap that line with two new lines:

<?php if (is_user_logged_in()): ?>
<a class="t1-drop-toggle" href="<?php echo esc_url( get_author_posts_url( get_current_user_id() ) ); ?>"> 
<i class="icon icon-person"> <?php echo get_avatar( $theme_current_user->user_email, 40 ); ?> 
</i> 
</a>
<?php endif; ?>

At the top, we add

<?php if (is_user_logged_in()): ?>

and at the bottom we add

<?php endif; ?>

By doing this, we effectively hide the element from non-logged in users.

Leave your vote

1841 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

Leave a Reply

Your email address will not be published. Required fields are marked *