Do you have a website where users log in to access content? You probably use a membership plugin to protect specific pages for certain membership levels, but what about specific elements on a page that can technically be accessed by users who are logged in or not? It’s as simple as one little snippet of CSS!
We’re using Thrive Themes (Theme Builder and Thrive Architect) for this tutorial because it allows us to give a CSS class to any specific element we want, however this tutorial is not unique to Thrive Themes.
Show Something in WordPress to Logged-In Users Only
In WordPress you can show content to logged-in users only by adding a simple two-part snippet of CSS. This CSS includes a class for the element you want to hide, and another class telling that element to be visible if the user is logged in to your website.
This CSS is default to WordPress, so the only thing you need to do is add the class to the element you want to show/hide, and then add the entire CSS snippet to your WordPress them customizer.
CSS to Copy:
.hiddenelement {display:none;}.logged-in .hiddenelement {display: block;}
The part highlighted in yellow is what you can customize and name whatever you wish. You can give this a name specific to the element you’re hiding (in my video I call it the “accountnav”) or you can use a widely-applicable term like “hiddenelement” so that you can easily remember and re-use it.
Copy the code above into the customizer, apply the class to your element, and you’re all set! The element with the class “hiddenelement” will only be shown to users who are logged in to your website.
The benefits of using this method:
- No plugins required
- No membership platform
- Can be applied to specific elements on a page
- Can be used on elements that are on a page users can access if logged in or not
Ideas for Implementation
- Show buttons or content only to logged in users on the WooCommerce my-account page
- Show discount codes only to logged in users for to encourage registration / loyalty
- Promote products on your site only to logged-in users
If you have any questions about implementing this little tip, feel free to reach out and I’ll be happy to assist.