If our website has user login, it is a good idea to make a distinction between logged-in and non-logged-in users. We often encounter functionality where the logged in user has their name or email address displayed in the “Login” area.
Well, that’s exactly what we’re going to do today with Elementor. It’s not complicated at all.
Start by adding an icon list somewhere in the header, add the same icon twice (fa-user, fa-key, fa-lock – these Font Awesome icons tend to be used as login icons). We’ll have the icons displayed next to each other, not underneath. For the first one, type “Login” or a similar word, this icon will be displayed to the not logged in user and for the second icon select Dynamic tags. From these we select Page -> User Info. The next time you click on this input, select the dynamic field. We have several options to choose from, e.g. e-mail, Display Name (but not everyone has this set), or login, i.e. login name. I chose login.
Don’t forget to set up a link to the login page or my account page.
Now we need to do one more thing – set custom properties for the links. Click on the gear next to the link to open the link options.
Here we actually make a distinction between logged in and not logged in users. The icon that says “Login” will be used for non-logged-in users. So we give this icon the property
logged|false
Properties are always entered using a straight slash, on Windows and Slovak keyboards using the ctrl+alt+w key combination.
For the second icon, the one that will belong to the logged in user, we specify the property
logged|true
These properties work by being generated into the resulting HTML code as an attribute and a property. So the result of this setup is ultimately HTML code that looks something like this:
<a href=”#” class=”css-classes-generated-by-element” logged=”false“>Login</a>
The result so far is as follows:
So the two icons will differ from each other in that one will still have logged=false and the other will have logged=true. We will use this aspect when writing simple CSS code. The code is written to work within the Element List with Icons itself -> Advanced -> Custom CSS (all the way down), it won’t work in any other file (there’s a word “selector that identifies the current Element). Practically, however, it should be enough to just delete the word selector and the code should work anyway.
body.logged-in selector a[logged=false] {
display: none;
}body:not(.logged-in) selector a[logged=true] {
display: none;
}
For the CSS code, we’ll take advantage of a simple WordPress feature that adds a “logged-in” class to each logged-in user’s <body> element. If we find this class in the <element of the> body, it means that the user is definitely logged in and we hide the icon whose logged property is false (this is the first part of the code). If we don’t find this class in <body>, it means that it is a non-logged user and so we hide the icon with the logged=true property.
The final effect?
Logged in user
Not logged in user
Do you know a better way to display the name of the logged in user? Write in the comments.
I have been programming websites since 2006. I have worked in several smaller and larger companies, always as a developer. I know how to program in PHP and lately I have been exclusively working on small and medium-sized projects in WordPress.
