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">mailtest@gmail.com</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>Advertisement
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.