0

I have made a toggle button with short-code for dark/light mode code below

function dark_light_toggle_button_shortcode() {
    ob_start(); ?>

    <!-- new button -->

    <div  id="dark-light-toggle" class="toggle-style">
    <div class="toggle-dot">
      <span class="sun">
        <svg
          width="20"
          height="18"
          viewBox="0 0 20 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.99919 4.49163C7.51323 4.49163 5.49082 6.51444 5.49082 9.0004C5.49082 11.4864 7.51323 13.5092 9.99919 13.5092C12.4848 13.5092 14.5076 11.4868 14.5076 9.0004C14.5076 6.51404 12.4848 4.49163 9.99919 4.49163ZM9.99919 3.16634C9.76596 3.16634 9.54227 3.07372 9.37731 2.90883C9.21235 2.74395 9.11963 2.5203 9.11952 2.28707V0.879672C9.11952 0.646369 9.2122 0.422621 9.37717 0.25765C9.54214 0.0926795 9.76589 0 9.99919 0C10.2325 0 10.4562 0.0926795 10.6212 0.25765C10.7862 0.422621 10.8789 0.646369 10.8789 0.879672V2.28707C10.8788 2.5203 10.786 2.74395 10.6211 2.90883C10.4561 3.07372 10.2324 3.16634 9.99919 3.16634ZM9.99919 14.8333C9.88367 14.8333 9.76928 14.856 9.66256 14.9002C9.55583 14.9444 9.45886 15.0092 9.37717 15.0909C9.29549 15.1726 9.23069 15.2696 9.18648 15.3763C9.14227 15.483 9.11952 15.5974 9.11952 15.7129V17.1199C9.11952 17.3532 9.2122 17.577 9.37717 17.742C9.54214 17.9069 9.76589 17.9996 9.99919 17.9996C10.2325 17.9996 10.4562 17.9069 10.6212 17.742C10.7862 17.577 10.8789 17.3532 10.8789 17.1199V15.7129C10.8788 15.4797 10.786 15.256 10.6211 15.091C10.4562 14.9261 10.2325 14.8334 9.99919 14.8333ZM14.1237 4.87507C13.9589 4.71005 13.8663 4.48633 13.8663 4.25308C13.8663 4.01982 13.9589 3.79611 14.1237 3.63109L15.119 2.63583C15.2004 2.55275 15.2974 2.48662 15.4045 2.44128C15.5116 2.39594 15.6266 2.37228 15.7429 2.37168C15.8592 2.37107 15.9744 2.39353 16.082 2.43775C16.1895 2.48198 16.2872 2.54709 16.3695 2.62932C16.4517 2.71155 16.5168 2.80926 16.561 2.91682C16.6053 3.02437 16.6277 3.13963 16.6271 3.25592C16.6265 3.37221 16.6029 3.48722 16.5575 3.59431C16.5122 3.7014 16.446 3.79844 16.363 3.87981L15.3677 4.87507C15.2027 5.04002 14.979 5.13268 14.7457 5.13268C14.5124 5.13268 14.2887 5.04002 14.1237 4.87507ZM5.87426 13.1253C5.79263 13.0436 5.69568 12.9787 5.58895 12.9344C5.48222 12.8902 5.36781 12.8674 5.25227 12.8674C5.13673 12.8674 5.02232 12.8902 4.91559 12.9344C4.80887 12.9787 4.71191 13.0436 4.63028 13.1253L3.63502 14.1202C3.47289 14.2857 3.38262 14.5086 3.38383 14.7403C3.38504 14.972 3.47762 15.1939 3.64147 15.3577C3.80531 15.5216 4.02719 15.6142 4.25891 15.6154C4.49062 15.6166 4.71345 15.5263 4.879 15.3642L5.87426 14.3685C5.95596 14.2869 6.02077 14.19 6.06499 14.0834C6.10921 13.9767 6.13197 13.8624 6.13197 13.7469C6.13197 13.6315 6.10921 13.5171 6.06499 13.4105C6.02077 13.3038 5.95596 13.2069 5.87426 13.1253ZM15.8325 9C15.8325 8.51413 16.2263 8.12033 16.7121 8.12033H18.1195C18.2366 8.11784 18.353 8.13874 18.4619 8.18182C18.5707 8.2249 18.6699 8.28928 18.7536 8.37119C18.8373 8.45311 18.9038 8.5509 18.9492 8.65884C18.9945 8.76679 19.0179 8.88271 19.0179 8.9998C19.0179 9.1169 18.9945 9.23281 18.9492 9.34076C18.9038 9.4487 18.8373 9.5465 18.7536 9.62841C18.6699 9.71032 18.5707 9.7747 18.4619 9.81778C18.353 9.86086 18.2366 9.88177 18.1195 9.87927H16.7121C16.5966 9.87933 16.4822 9.85662 16.3755 9.81246C16.2688 9.76829 16.1718 9.70354 16.0901 9.62188C16.0084 9.54023 15.9436 9.44328 15.8994 9.33658C15.8552 9.22987 15.8325 9.1155 15.8325 9ZM4.16553 9C4.16553 8.88448 4.14278 8.77009 4.09857 8.66337C4.05437 8.55664 3.98957 8.45966 3.90788 8.37798C3.8262 8.29629 3.72923 8.2315 3.6225 8.18729C3.51577 8.14308 3.40138 8.12033 3.28586 8.12033H1.87886C1.7618 8.11784 1.64541 8.13874 1.53652 8.18182C1.42764 8.2249 1.32845 8.28928 1.24477 8.37119C1.1611 8.45311 1.09462 8.5509 1.04923 8.65884C1.00385 8.76679 0.980469 8.88271 0.980469 8.9998C0.980469 9.1169 1.00385 9.23281 1.04923 9.34076C1.09462 9.4487 1.1611 9.5465 1.24477 9.62841C1.32845 9.71032 1.42764 9.7747 1.53652 9.81778C1.64541 9.86086 1.7618 9.88177 1.87886 9.87927H3.28626C3.51946 9.87927 3.74311 9.78664 3.908 9.62174C4.0729 9.45685 4.16553 9.2332 4.16553 9ZM14.1237 13.1253C14.2887 12.9605 14.5125 12.8679 14.7457 12.8679C14.979 12.8679 15.2027 12.9605 15.3677 13.1253L16.363 14.1206C16.5279 14.2856 16.6205 14.5093 16.6205 14.7425C16.6204 14.9758 16.5277 15.1995 16.3628 15.3644C16.2811 15.446 16.1841 15.5108 16.0774 15.555C15.9707 15.5992 15.8563 15.6219 15.7408 15.6219C15.5076 15.6218 15.2839 15.5291 15.119 15.3642L14.1237 14.3689C14.042 14.2873 13.9772 14.1904 13.933 14.0837C13.8887 13.977 13.866 13.8626 13.866 13.7471C13.866 13.6316 13.8887 13.5173 13.933 13.4106C13.9772 13.3039 14.042 13.207 14.1237 13.1253ZM5.87426 4.87507C6.03921 4.7101 6.13188 4.48637 6.13188 4.25308C6.13188 4.01979 6.03921 3.79606 5.87426 3.63109L4.879 2.63623C4.71295 2.47687 4.49106 2.38893 4.26092 2.39127C4.03078 2.39362 3.81073 2.48606 3.64797 2.64878C3.4852 2.81149 3.39268 3.03151 3.39026 3.26165C3.38784 3.49179 3.47571 3.71371 3.63502 3.87981L4.63028 4.87507C4.71191 4.95684 4.80887 5.02171 4.91559 5.06597C5.02232 5.11023 5.13673 5.13301 5.25227 5.13301C5.36781 5.13301 5.48222 5.11023 5.58895 5.06597C5.69568 5.02171 5.79263 4.95684 5.87426 4.87507Z"
            fill="#fff"
          />
        </svg>
      </span>
      <span class="moon"><svg
        width="18"
        height="18"
        viewBox="0 0 18 18"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M17.562 10.2517C17.3779 10.2057 17.1937 10.2517 17.0326 10.3668C16.4342 10.8732 15.7436 11.2875 14.9841 11.5637C14.2706 11.8399 13.488 11.978 12.6594 11.978C10.795 11.978 9.09172 11.2184 7.87182 9.99853C6.65192 8.77863 5.89236 7.07537 5.89236 5.21099C5.89236 4.42841 6.03046 3.66885 6.26063 2.97834C6.51382 2.24179 6.88209 1.5743 7.36545 0.998875C7.5726 0.745688 7.52657 0.377415 7.27338 0.170262C7.11226 0.055177 6.92812 0.00914298 6.74399 0.055177C4.78754 0.584569 3.08428 1.75844 1.86438 3.32359C0.690511 4.86573 0 6.77615 0 8.84768C0 11.3565 1.01275 13.6352 2.66997 15.2924C4.3272 16.9497 6.58287 17.9624 9.11474 17.9624C11.2323 17.9624 13.1888 17.2259 14.7539 16.006C16.3421 14.7631 17.4929 12.9907 17.9763 10.9652C18.0684 10.643 17.8842 10.3208 17.562 10.2517Z"
          fill="#A940E3"
        />
      </svg>
      </span>
    </div>
    
  </div>

    <?php
    return ob_get_clean();
}
add_shortcode('dark_light_toggle_button', 'dark_light_toggle_button_shortcode');

I have inserted code below to show it on nav primary menu.

add_filter('wp_nav_menu', 'do_shortcode_on_menu', 10, 2);
function do_shortcode_on_menu($nav_menu, $args) {
    if ($args->theme_location == 'primary-menu') {
        $nav_menu = do_shortcode($nav_menu);
    }

    return $nav_menu;
}

Now, I'm Having Problem is when i login it working well for me. But without login it show shortcode as a text.

Please help me. Where i have missed.

1 Answer 1

0

The issue you're facing, where the shortcode appears as text instead of being executed for users who are not logged in, could be due to the timing of when the do_shortcode function is applied to the menu items. The wp_nav_menu filter is not the ideal place to apply do_shortcode, as it can lead to unexpected behavior, like the one you're experiencing.

A better approach is to use the wp_nav_menu_items filter, which allows you to append or prepend additional items to your menu. Here, you can directly insert the output of your shortcode.

Here's how you can modify your code:

Remove your current filter that applies do_shortcode on wp_nav_menu.

In your theme's functions.php file add a new filter to wp_nav_menu_items like this:

add_filter('wp_nav_menu_items', 'add_dark_light_toggle_to_menu', 10, 2);
function add_dark_light_toggle_to_menu($items, $args) {
    if ($args->theme_location == 'primary-menu') {
        $toggle_button = do_shortcode('[dark_light_toggle_button]');
        $items .= '<li class="menu-item">' . $toggle_button . '</li>';
    }
    return $items;
}

This code checks if the menu is the primary menu (adjust 'primary-menu' if your theme uses a different location name). It then appends the output of your [dark_light_toggle_button] shortcode as a new menu item.

Ensure that your shortcode function dark_light_toggle_button_shortcode and the add_dark_light_toggle_to_menu function are both available to all users, regardless of their login status.

By using the wp_nav_menu_items filter, you're directly manipulating the menu items, and this should resolve the issue of the shortcode appearing as text for non-logged-in users. This approach is more consistent and should work across different themes and setups.

1
  • thanks it working.
    – Atiq Rev
    Jan 22 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.