when you want interaction between client side and server side you should use ajax .
i think this Link will be very helpful to you 🙂
Put this in your javascript
var data = {
action: 'is_user_logged_in'
};
jquery.('.x-btn-widgetbar').on('click',function(){
jQuery.post(ajaxurl, data, function(response) {
if(response == 'yes') {
// user is logged in, do your stuff here
} else {
// user is not logged in, show login form here
window.location = <login url here >;
}
});
});
put this in your functions.php
function ajax_check_user_logged_in() {
echo is_user_logged_in()?'yes':'no';
die();
}
add_action('wp_ajax_is_user_logged_in', 'ajax_check_user_logged_in');
add_action('wp_ajax_nopriv_is_user_logged_in', 'ajax_check_user_logged_in');
Update #1 26-9-2017
and if you want widgetbar to hide you can use this jquery :
jquery('.x-widgetbar').hide();
or
jquery('.x-widgetbar').css({display:'none'});
or simplay put this in *.css file:
.x-widgetbar{display:'none'}
update#2 26-9-2017
if want only hide the widgetbar without hiding the x button it self you can replace .x-widgetbar by .x-widgetbar-inner