Say you have a WordPress-based blog created with Elementor. Your blog relies on ads to generate revenue. Suddenly, you have an idea to accept membership on your blog. One of the features you plan to offer is an ad-free reading experience. Unfortunately, Elementor has no built-in feature to cover such a need.
A simple solution to the above case is by installing a third-party add-on. Alternatively, you can add an additional function to handle the job. In this post, I will show you how to show/hide an element in Elementor by taking advantage of CSS class selector.
Step 1: Add a New Function to WordPress
First, you need to add a custom function on your WordPress blog. In WordPress, you can add a new function by editing the functions.php file of your theme. Or you can also use a plugin like Code Snippets to add a custom function without editing a theme file (functions.php).
Here the code of the function:
add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}
// return the $classes array
return $classes;
}
The above code will check the class of the element (logged-in-condition and logged-out-condition). If the class is logged-in-condition, the element will not be shown. Conversely, if the class is logged-out-condition, the element will be shown.
Step 2: Add the CSS Classes to Your WordPress Blog
Once done with step one above, you can go to theme customizer to add the following CSS code. The below code adds two CSS classes to your WordPress website as covered above.
.logged-in-condition .hide-logged-in {
display: none!important;
}
.logged-out-condition .hide-logged-out {
display: none!important;
}
To add the code above, you can go to theme customizer (Appearance -> Customize). Open the Additional CSS block and paste the code to the available field.
Click the Publish button to apply the code.
Step 3: Apply the CSS Class
Once done with the two steps above, the last step is to apply the CSS class. Edit an Elementor page (or custom template) containing an element you want to hide. Select the element (section, column, or widget) and go to the Advanced tab on the settings panel. Paste the CSS class to the CSS Classes field.
You can paste the hide-logged-in to hide the element. While to show the element, you can paste the hide-logged-out
You can use the above custom function to page builders other than Elementor such as Divi , Breakdance, to Brizy. You can even use it on Gutenberg as Gutenberg also allows you to add a CSS class to an element (block.)
Top comments (2)
good day dear Aliko
many thank you so much for spending your time creating and posting this article.
I really like the idea of the support Using CSS Class to Show/Hide in the WordPress development.
i just found your article and i like it. The way you talk about the usage of Using CSS Class to Show/Hide in WordPress development.
Many thanks for the article it is just great!! It looks very promising and your thoughts are geat: Many thanks for your inspiring ideas.
i am currently working on some issues - that have to do with the CSS and google fonts.
to begin with the beginning:i have found out that my wordpress-site fetches two google fonts:
one of them is montserrat
i decided to host them locally. so i have to
a. fetch the fonts
b. correct the css code
with the following tool i fetch them
google-webfonts-helper.herokuapp.c...
here i have the option to add the paths - to customize the path in the css-data
/* montserrat-regular - latin / u/font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v25-latin-regular.eot'); / IE9 Compat Modes / src: local(''), url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 / url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), / Super Modern Browsers / url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), / Modern Browsers / url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), / Safari, Android, iOS / url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); / Legacy iOS */ } Customize folder prefix (optional):
and now i have to add a path to set the correct path - (that means to customize the path )
../fonts/
some additional thought: what makes me wonder is the fact that some of the examples show full paths as reference - others dont:
see the following examples;
a. wp-ninjas.de/wordpress-google-font...
url("https://wp-ninias.de/fonts/muilti-latin-300.woff2") format (
url("https://wp-ninias.de/fonts/muilti-latin-300.woff") format (
b. pixelgrade.com/docs/advanced-custo...
Copy the URL Path field and paste it before each URL in the Embed Code field. The example code will look like this:
@font-face {
font-family: 'Name of the font';
src: url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff2') format('woff2'),
url('http://yourwebsite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff') format('woff');
}
c. themeisle.com/blog/custom-fonts-wo...
Once the file is in place, open up your child theme’s stylesheet. Now you’ll need to call on that font so you can use it, via a snippet that should look like this:
`
@font-face {
font-family: New Font;
src: url(yourwebsite.com/wp-content/themes/...);
font-weight: normal;
}
`
and now compare it with the following example here:
Code:
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
see the helper-tool google-webfonts-helper.herokuapp.c...
the question: so the question is: how to set the path correct for the CSS... which path should we use here!?
Dear Aliko i look forward to hear from you
I just love the simplicity of this solution.