WordPress – How to add condition “if user logged in” for html/css/js menu

I’m working with elementor, in the html widget I wrote some code to create a menu and it works fine. Now I want to hide a part of the menu to make it visible only to logged in users. I understand that this is done with php, but elementor’s html widget does not support php. So I’m wondering if there is an alternative to php or if there is a way to indirectly apply php to my menu ?

I’m working with elementor, in the html widget I wrote some code to create a menu and it works fine. Now I want to hide a part of the menu to make it visible only to logged in users. I understand that this is done with php, but elementor’s html widget does not support php. So I’m wondering if there is an alternative to php or if there is a way to indirectly apply php to my menu?

Here is my test menu, it’s just a test so there are only two items. Can anyone help me understand how I can accomplish this? Sorry but I’m new and I’m trying to learn.

I appreciate any response, thanks.

Edit with possible solution: in wp-content / themes / child-theme / I created a folder called custom_menu, inside this I added two files, menu_structure.php and menu_style.css. The php file contains the html code with the script, while in the css I inserted the styles.

Then I went to the functions.php file and added this line include_once get_theme_file_path (‘/custom_menu/menu_structure.php’); This is to make wordpress understand that menu_structure.php must execute the functions, otherwise the shortcode would not work.

Finally, in the menu_structure.php file I added a shortcode, inside it I then added html menu and script. That’s how…

add_shortcode( 'mob_menu' , 'mobile_menu' );
function mobile_menu(){
?>

//Here I called the style css
<link rel="stylesheet" href="https://motustrength.it/wp-content/themes/astra-child/custom_menu/menu_style.css" type="text/css">

<?php if(is_user_logged_in()): ?> 

//Here I put html div menu...

<script>
//Here I put the script...
</script>

<?php endif; ?>

<?php
}

This is the initial code that I have inside elementor html widget

var menu = document.querySelector(".mob_menu_button");
      function mobile_menu(e) {
        e.stopPropagation();
        var x = document.getElementById("mts_mobile_menu");
        if (!x.classList.contains("active")) {
          x.classList.add("active");
          menu.innerHTML = "<span>Close menu</span>";
        } else {
          x.classList.add("side_hide");
          menu.innerHTML = "<span>Open menu</span>";

          setTimeout(function () {
            x.classList.remove("active");
            x.classList.remove("hide");
          }, 100);
        }
      }
      
      document.addEventListener("click", function (e) {
        var x = document.getElementById("mts_mobile_menu");
        if (e.target.id !== "mts_mobile_menu" && x.classList.contains("active")) {
          x.classList.add("hide");
          menu.innerHTML = "<span>Open menu</span>";

          setTimeout(function () {
            x.classList.remove("active");
            x.classList.remove("hide");
          }, 400);
        }
      });

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /*Items menu*/
      .user_menu {
        display: flex;
        flex-direction: column;
      }

      /*Menu header info*/
      .display.name {
        font-size: 15px;
        font-weight: 500;
        color: #303238;
      }

      .display.mail {
        font-size: 13px;
        color: #3d5afe;
      }

      hr.solid {
        border-top: 1px solid #e0e0e0;
        margin: 10px 0px 10px 0px;
      }

      /*Text Link css*/
      .user_menu.item > a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 0;
        font-size: 13px;
        color: #75777d;
      }

      .user_menu.item:hover > a {
        color: #2e323a;
      }

      /*Icon Button Toggle Menu*/
      .mob_menu_button {
      
       position: absolute;
       top: 15px;
       right: 15px;
       width: 20%;
       background: #fcfcfc!important;
       font-weight: 500!important;
      }

      .icn_button {
        margin: 0;
        font-size: 14px;
      }

      .icn_button:before {
        margin: 0;
      }

      .icn_button:after {
        margin: 0;
      }

      /*Icon Items Menu*/
      .icn_menu:before,
      .icon_menu:after {
        margin: 0px;
        padding: 0px;
        font-size: 16px;
      }

      .icn_menu {
        margin-right: 10px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
      }

      /* User Menu For header website */
      .mts_mob_container {
        display: flex;
        position: fixed;
        z-index: 999;
        /* height: 100%; */
        top: 0;
        left: 0;
        width: 100%;
        background: #000000d6;
      }
      
     .mts_sidenav_box {
        display: block;
        width: 100%;
      }

      .mts_sidenav_content {
        display: none;
        padding: 20px;
        background-color: #fff;
        min-width: 160px;
        width: 280px;
        border-radius: 3px;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 999;
        position: relative;
        animation: animateFromLeft 0.4s;
      }

      @keyframes animateFromLeft {
        from {
          left: -500px;
          opacity: 0;
        }
        to {
          left: 0;
          opacity: 1;
        }
      }

      @keyframes animateToLeft {
        from {
          left: 0;
          opacity: 1;
        }
        to {
          left: -500px;
          opacity: 0;
        }
      }

    .active {
      display: block !important;
      height: 100vh;
      overflow: hidden;
      width: 75%;
   }

      .mts_sidenav_content.hide {
        animation: animateToLeft 0.8s;
      }

<button onclick="mobile_menu(event)" class="mob_menu_button">Open menu</button>

      <div class="mts_mob_container">
         <div id="mts_mobile_menu" class="mts_sidenav_content"> 
          <div class="mts_sidenav_box">
          
            <div class="user_menu header">
              <span class="display name">Hello User</span>
              <span class="display mail">[e-mail]</span>
            </div>

            <hr class="solid" />

            <!--Anyone can see, so there is no need for conditions-->
            <div class="user_menu item">
              <a href="/account">
                <i class="icn_menu fa-regular fa-user">1</i>
                <span class="link_text">Public Link</span>
              </a>
            </div>
            
            <!--Only who is logged in can see-->
            <div class="user_menu item">
              <a href="ordini">
                <i class="icn_menu fa-regular fa-basket-shopping">2</i>
                <span class="link_text">Private Link</span>
              </a>
            </div>
            
          </div>
        </div>
      </div>

Answer

(css hacks may hide the menu item, but it will still be available to everyone whether logged in or not).

I don’t use wordpress, but it’s method for checking/returning login status seems to be is_user_logged_in(). See wordpress documentation. You would enclose the section you wish to hide in a conditional with that method.

I haven’t tested the following, but it would look something like this:

<?php if(is_user_logged_in()): ?> 
 <div class="user_menu item">
  <a href="ordini">
   <i class="icn_menu fa-regular fa-basket-shopping">2</i>
   <span class="link_text">Private Link</span>
  </a>
 </div>
<?php endif; ?>

There is probably a plugin that would allow you to add php, probably within a <script> tag or something.