Sidebar button click redirect when user is not logged in instead displays it

Question

in my web I have a button (.x-btn.widgetbar) that displays a section of widgets in the upper right as in this example.

I have modified the icon to change based on whether the user is registered or not, I would like that when the user is not logged in redirect to a login page instead of displaying the widgetbar.

I'm new to this and I do not know where to start, I've consulted in several forums and I think I could find the code but I do not know what file to edit, I've been trying for weeks but I can not apologize in advance for the query.

I try this function in functions.php but doesnt works..

function wp_redirect_NotLogin ()
{
    if( isset($_POST['x-btn-widgetbar']) && ! is_user_logged_in() ) {
        wp_redirect( home_url( '/register/' ) ); 
    exit(); 
    }
}

Answer 1

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

Answer 2

just checking the body for logged-in class

if( jQuery('body').hasClass('logged-in') ) {
// do something
} 

Answer 3

Thanks all for your help, Ibrahim youre great!!

Finally I got it to work as I wanted, so I close the post and leave what has worked for me if someone can at some point take advantage of it.

I try with the code that you provide me in 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
           jQuery('.x-widgetbar').hide();
           window.location.href='https://website.com/login';
       }
  });

});

And this in 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');

This code does exactly what I wanted but I had a slight delay in responding by taking a few seconds to redirect and sending an alert that I did not add in the code.

I've tried what Samuel and Parthavi (thanks a lot!) wrote and put this code in Javascript:

jQuery('.x-btn-widgetbar').on('click', function() {

  if(jQuery('body').hasClass('logged-in') ) {

  } else {
     jQuery('.x-widgetbar').hide();
     window.location.href='https://website.com/login';
  }

});

With this code the behavior is the same and works well, but the response is faster and prevents small delays.

If you see some way to debug the code or see something that would help me avoid problems I would appreciate it since I am not an expert in javascript.

Thanks in advance for all your help, I hope everything goes well for you.