Opens in a new tab
12th Jul '22
/
6 comments

Conditional Rendering for Logged in/out Users by CSS Classes in Bricks

This tutorial shows how Bricks builder‘s bricks/element/render filter can be used to conditionally output elements having a class of logged-in to logged-in users only and elements having a class of logged-out to visitors that are not logged in.

Add the following in child theme’s functions.php or in a code snippets plugin:

add_filter( 'bricks/element/render', function( $render, $element ) {
	// Get the element CSS classes
	$classes = ! empty( $element->attributes['_root']['class'] ) ? $element->attributes['_root']['class'] : false;
  
	// Check if the element has the special class "logged-in"
	if ( $classes && in_array( 'logged-in', $classes ) ) {
		return is_user_logged_in();
	}
	
	// Check if the element has the special class "logged-out"
	if ( $classes && in_array( 'logged-out', $classes ) ) {
		return ! is_user_logged_in();
	}

	return $render;
}, 10, 2 );

With this in place, for any element that you wish to be output only for users that are logged into your Bricks WordPress site, simply add this class: logged-in

For any element that should be output only for visitors that are not logged in, add this class: logged-out

Sample use case: Render separate menus for logged-in users and logged-out visitors.

Reference

https://academy.bricksbuilder.io/article/filter-bricks-element-render/

Get access to all 634 Bricks code tutorials with BricksLabs Pro

6 comments

  • eins walter

    If I understand right, we still cannot add condition as Class like this without code, right?

  • Ernest

    Hello Sridhar, thanks for sharing this solution, but i have a question, how can apply this code to the entire page not only for each element, image i have dozen of sections in a page that i need to be only visible for login users and i will have to put the .logged-in class in each element. Bricks have the option to put a class to the entire page in: Page Settings / CSS classes (body) but the class .logged-in is not working that way, so, can you please tell how apply that class to entire page?

    Thanks in advance.

    Ernest.

    • A

      Are these for the standard page post type pages? If so, do you currently have a Bricks template for that post type?

      • Ernest

        Yes, standard pages, i need build a custom user-author dashboard page, with welcome message, and lots of other sections but i would like to "hide" all the content until user login, not classing each section by section but all the page itself, i don't know if that is possible i search all over the internets and didn't find a proper solution for that.

        Thanks Sridhar!

Leave your comment

 

Related Tutorials..

Pro
Checking ‘PublishPress Future’ plugin’s Future Action enabled posts

Checking ‘PublishPress Future’ plugin’s Future Action enabled posts

PublishPress Future is a handy plugin for scheduling actions like unpublishing or deleting posts (of any post type) at a specified date and time in…
Categories:
Pro
Bricks Dynamic Condition – Check if today falls within 5 days before any holiday date

Bricks Dynamic Condition – Check if today falls within 5 days before any holiday date

Creating a custom condition that returns true or false depending on whether today falls within 5 days before any holiday dates selected on a Meta…
Categories:
Tags:
Is WooCommerce Cart Empty Condition in Bricks

Is WooCommerce Cart Empty Condition in Bricks

Updated on 5 Nov 2024 Looking to conditionally render an element depending on whether the user's cart is empty or not when using WooCommerce? Add…
Pro
Conditional single post Bricks template based on internal referrer URL

Conditional single post Bricks template based on internal referrer URL

How to automatically select a single post template depending on the page from which the post is accessed.
Pro
ACF Repeater sub field value dynamic data condition in Bricks

ACF Repeater sub field value dynamic data condition in Bricks

This Pro tutorial provides the steps to output an element on single posts (can be of any post type) only if a specified ACF (Pro)…
Checking if the current post has been published within the last x days

Checking if the current post has been published within the last x days

Conditionally output an element if the current post has been published in the last x number of days.
Categories:
Pro
Conditional Rendering in Bricks Based on CSS Class

Conditional Rendering in Bricks Based on CSS Class

Updated on 19 Jun 2024 A user asks: Is there a way to apply the same conditions to several elements like we set styles appending…
Categories:
Pro
Conditionally Rendering an Element Outside the Loop based on Taxonomy Term in Bricks

Conditionally Rendering an Element Outside the Loop based on Taxonomy Term in Bricks

A user asks: Hiding element based on taxonomy I have an element in a footer that I want to hide if a page has a…
Categories:
Pro
Conditional CSS in Bricks based on Post Meta

Conditional CSS in Bricks based on Post Meta

In the Bricks Facebook group a user asked: Hi, how do you normally control margin, padding and font-size using dynamic data? I'm looking for the…