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.
This has been super useful.
This is so good. You can get really clever with this.
Hi,
Is there a way to hide an element (or container) when a user is logged in?
e.g. On a home page I have a container with elements that prompt a person to register or login. When they are logged in I don’t want to show that.
Basically what you are doing but backwards?
If I’m understanding you correctly, then yes. The key is the login prompt. You can use the Thrive login element and if you put the right css properties on the right containers, this is doable.
hey Doug,
Would there be a way to do something similar to this with a social share button? I’ve used this CSS code before for individuals logged in and it’s worked like a dream!
However, I want to see now if I can allow a button (so I can provide a download) for someone only if they perhaps share the page on FB, twitter, etc.
Is that something that is possible and that you would know how to do?
Anything you have on this would be greatly appreciated!
There wouldn’t be a way to confirm they actually shared something, and it’s definitely beyond the scope of CSS. There’s probably a SaaS product or plugin out there you can get to do this, but it’s not something I have expertise in.
Thanks for the response. Yeah, I’ve found 3rd party SaaS that would work and I could embed the code in the whole page, however, I wasn’t sure if we could do it via Thrive. Thanks! You’re the best.