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 633 Bricks code tutorials with BricksLabs Pro

6 comments

  • 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?

      • 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!

  • eins walter

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

Leave your comment

 

Related Tutorials..

[Function] Current Term Has Children

[Function] Current Term Has Children

Updated on 20 Jul 2024 A user asks: I'm working on an archive template for WooCommerce products. I'm trying to hide a section if there…
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
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
Checking if the current Page/Post has Children i.e. is a Parent in Bricks

Checking if the current Page/Post has Children i.e. is a Parent in Bricks

Shows how we can check whether the current Page or Post (of any hierarchical post type) is a parent
Categories:
Pro
Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

This Pro tutorial provides the steps to modify a ACF Repeater query loop to only output the rows for which a True / False type…
Categories:
Pro
User Role Conditional Output in Bricks

User Role Conditional Output in Bricks

This Pro tutorial provides the steps to output elements based on their CSS class to users of the specified role in WordPress when using Bricks…
Categories:
Create A Customizable AJAX Add To Cart Button In Bricks Builder

Create A Customizable AJAX Add To Cart Button In Bricks Builder

In Bricks, you can simply create an Add To Cart button from a dynamic data / function {woo_add_to_cart}. This button supports AJAX as well if…