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 633 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..

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
Conditionally Outputting Query Loop Item Based on Post Meta in Bricks

Conditionally Outputting Query Loop Item Based on Post Meta in Bricks

Rendering query-loop enabled posts depending on the value of each post's custom field value is tricky because by default, the custom field plugins' functions or…
Categories:
Pro
Condition to Check if the Current Category Has At Least One Child

Condition to Check if the Current Category Has At Least One Child

Looking to render an element in the category archive Bricks template only if the category of the current category archive page is a parent? This…
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:
Conditional Output based on Manual Excerpt in Bricks

Conditional Output based on Manual Excerpt in Bricks

How to display a post’s excerpt only if it has been manually set.
Categories:
Pro
Query Variables Condition in Bricks

Query Variables Condition in Bricks

This Pro tutorial provides the steps to register a custom function that returns true or false depending on whether the current page URL has specific…
Pro
Conditional Output in Bricks based on if Content has Headings

Conditional Output in Bricks based on if Content has Headings

How to prevent the output of the table of contents if the content has no headings.
Categories:
Tags:
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…