Webinar Replay: Changing Content for Logged In/Logged Out Users with jQuery

Webinar Replay: Changing Content for Logged In/Logged Out Users with jQuery

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 .= '&lt;li class="log-in-out"&gt;'. $loginoutlink .'&lt;/li&gt;';
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.

Download Divi Layouts

FOR FREE!

Fill the form below. We will send you a link to download layouts.  You will also get notified about the future giveaways! 

Great, you've entered our giveaway! Please check your email!