In this video tutorial — using CSS, jQuery and a bit of PHP — we will teach you how to display content conditionally based on whether the user is logged in or logged out of the website. The specific example used here is creating a logged in / logged out link in your navigation where the text and the appropriate icon will adjust based on these conditions. Once you learn the principles shown here, you can easily apply this to other areas of your website to create a custom user experience ideal for membership, learning, and eCommerce websites to name a few.
The CSS:
.et_header_style_left #et-top-navigation nav>ul>li.log-in-out>a {
color: #fff;
padding-left: 36px;
padding-right: 16px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
background: #F43161;
margin-top: -10px;
}
.et_header_style_left #et-top-navigation nav>ul>li.log-in-out>a:before {
content: "\7e";
font-family: 'etModules';
position: absolute;
left: 12px;
top: 10px;
}
.et_header_style_left #et-top-navigation nav>ul>.log-in-out.logged-out>a {
background: #09e1c0;
}
.et_header_style_left #et-top-navigation nav>ul>.log-in-out.logged-out>a:before {
content: "\e000";
}
.et_header_style_left #mobile_menu ul>.log-in-out.logged-out>a {
margin-top: 10px;
}
The jQuery:
jQuery(document).ready(function($){
var name = $(".ab-submenu .display-name").text();
if ($("body").hasClass("logged-in")) {
$("<h1> Hey " + name + ".</h1>").prependTo(".et_pb_section_0 h1");
$(".log-in-sec").hide();
} else {
$(".log-in-out").addClass("logged-out");
}
});
The PHP:
add_filter('wp_nav_menu_items', 'divi_log_in_out', 10, 2);
function divi_log_in_out($items, $args) {
ob_start();
wp_loginout('index.php');
$loginoutlink = ob_get_contents();
ob_end_clean();
$items .= '<li class="log-in-out">'. $loginoutlink .'</li>';
return $items;
}The Changing content for logged in/logged out users with jQuery webinar was just a small taste of the incredible knowledge that SJ James has. As one of the trailblazers in the Divi community, SJ James has years of experience with the Divi framework and certainly knows how to work well with it.
If you loved the content of the webinar and loved learning from SJ, then we have some great news for you!
Divi Space has just launched the Transforming Divi with CSS & jQuery Course! Grab your seat, the course will open on the first of May (early bird discount below), and we’d love for you to join us! Here is a sneak peek of whats included in the course:
- Private Facebook Group
- Introduction to CSS
- Introduction to Jquery
- Five real world examples where custom CSS has been used to make Divi better
- The jQuery Cheat Sheet
- Moving & Replacing with jQuery
- Preparing a child theme for jQuery & CSS
- Bonus: Inserting Layouts in Template Pages
- Bonus: Editing Modules
For a limited time, you can grab an EARLY BIRD DISCOUNT of 20% OFF the course with the Transforming20. Simply enter the code at the checkout and the discount will automatically apply!
Here you can create the content that will be used within the module.
followed all the steps and for some reason I’m seeing logout in the menu… what could have happened here? I’m using with child theme with divi space builder… 🙁
Replay not in HD so unfortunately, it’s harder to follow as the text isn’t clear.
Yeah unfortunately we forgot to hit record on this one locally and had to rely on Facebook lives replay to download :(. Hopefully we won’t make that snafu again. Thanks for watching Alain.
Hi SJ,
Not sure what happened above. When I submitted the code sample I pasted in it appear different now?
It should state if the user isn’t logged in, loginoutlink is a link to the page where the user logs in (or a link to a section that contains the login area), else just log out.
I tweaked the function so that logging in brings you to to a specific page and/or login area:
/* Login Logout Button */
add_filter(‘wp_nav_menu_items’, ‘add_login_logout_link’, 10, 2);
function add_login_logout_link($items, $args) {
ob_start();
wp_loginout(‘index.php’);
if ( ! is_user_logged_in() ) {
$loginoutlink = ‘Log In‘;
} else {
$loginoutlink = ob_get_contents();
}
ob_end_clean();
$items .= ”. $loginoutlink .”;
return $items;
}
I missed this one. But I liked it all the same in replay. As a dev myself of course I know this stuff but I like the way SJ makes this simple for people that don’t know jQuery. I and sure I will learn something new at some point even as a dev. I love the fact that you teach inspect element to people. My background in Instructional Design always likes the way you don’t try to teach complex jQuery just simple do-by-example stuff. I love this period.
Thank you 🙂 Yeah I think learning to inspect elements and troubleshoot your own code is very important, and by teaching some simple, but powerful jQuery, I hope people watching can use it as a base to build their own learning on top of 🙂
Very cool! Great information that helps to get even more out of DIVI.
Thanks Mike! Glad to have you watching 🙂