Buy All 48 Premium WordPress Themes for $54.99

How to Display a shortcode as Menu Item Dropdown

Shortcode as Sub-Menu

In some cases you may want to display the result of a shortcode as Main menu sub-item. Here are all of the necessary steps:
Let’s use the ‘Login Logout Shortcode’ plugin as an example:

Login Logout Shortcode

it provides a shortcode for Login/Logout i.e.

[login-logout text_to_login=”Login” text_to_logout=”Logout”]

and we want to display the above shortcode result into sub-menu item.

  1. First step is to navigate to Admin Panel -> Left Menu -> Appearance -> Editor then open header.php

    Check the wp_nav_menu:

    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’,
    ‘walker’ => new tishonator_Description_Walker,

    ‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s”>%3$s’.tishonator_additional_menu_icons().'</ul>’,
    ) ); ?>

    If there is tishonator_additional_menu_icons included, it’s ok and no need to add anything.

    In case it’s missing, the the following line:

    ‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s”>%3$s’.tishonator_additional_menu_icons().'</ul>’,

  2. Open functions.php, find function tishonator_additional_menu_icons() {, and below $result = ”;

    Insert the following code (marked in bold):
    function tishonator_additional_menu_icons() {

    $result = ”;

    $result .= ‘<li><a href=”#”>Custom Item</a>’;
    $result .= ‘<ul class=”sub-menu”><li>’;

    $result .= do_shortcode(‘[login-logout text_to_login=”Login” text_to_logout=”Logout”]’);

    $result .= ‘</li></ul></li>’;

    You can replace the Shortcode code ( [login-logout text_to_login=”Login” text_to_logout=”Logout”] ), with your shortcode code.

About the Author

Tihomir Ivanov is a WordPress and Salesforce Commerce Cloud (SFCC) developer, founder of tishonator.com, a fan of Linux and Open Source, Minimalism (in Design and Life), Sci-fi, Fantasy, Classic and History books :)

Leave a Reply