Jeffrey Carandang

<p><strong>WordPress Mobile Menu Builder</strong> plugin is specially designed for mobiles. It is easy to use, customizable, and is highly flexible. It allows you to create a responsive menu that will boost the mobile user experience in your website through providing a simplified mobile navigation experience.</p>
<p><strong>Note that this plugin is currently on beta. Thanks!</strong></p>
<h3>A Short Preview on How the Plugin Works</h3>
<div class="embed-vimeo" style="text-align: center;"><iframe loading="lazy" src="https://player.vimeo.com/video/302380198" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<h3>WordPress Mobile Menu Builder: Better Mobile Navigation Experience</h3>
<p>WordPress Mobile Menu Builder allows users to easily navigate your website without compromising the loading time. Up to four main menu options can be set to simplify the mobile navigation of this responsive menu. Compatibility is not an issue since this WordPress mobile menu is designed to fit perfectly to any mobile screen dimension.</p>
<p>With this WordPress menu, you can work on a predesigned mobile menu theme and modify it according to your design preference. You can change the font, icon, and background styles and colors to perfectly match your website’s brand. This is applicable to any WordPress theme. Thus, plugin compatibility issue is never a problem.</p>
<h3>Specially designed for mobiles</h3>
<p>WordPress Mobile Menu Builder is particularly designed to perfectly match the interface of any mobile phone. This provides a better user experience since it is exclusively designed for mobile.</p>
<h3>Ease of modification</h3>
<p>Easily set the menu’s texts and icons based on the menu options that you want to feature in your site. You can choose to highlight important portions of your blog such as Home, Blog, Contact details, and main website menu. With this responsive menu, you have the complete control to choose whatever you want to display as menus depending on your website’s need.</p>
<h3>Easily match the style of your website brand</h3>
<p>Since you have the full control over the styling options, it will be easier for you to match the mobile menu design based on your website’s brand and style. You can easily modify the menu bar’s design to make it complementary to your website’s design and layout.</p>
<h3>Change menu bar placement</h3>
<p>The menu bar’s default position is at the bottom of the screen to make it easier for the user’s thumb to reach the menu options. But you can also place the menu bar at the top position if you want to mimic the placement of menu in desktop view.</p>
<h3>On User Scroll Animation</h3>
<p>You have the option to fix the menu bar or turn on the user scroll animation. Turning the user scroll animation on lets you hide and show the menu bar upon scrolling. This will help increase the screen space and maximize the user’s mobile view.</p>
<h3>Show more navigation options through a Popup menu</h3>
<p>The WordPress Mobile Menu Builder allows you to create an icon for pop-up contents where you can include more navigation options. You can integrate your existing widgets as selections to choose from. This WordPress menu is already widget-ready so can include as many as existing widgets as you like.</p>
<h3>Fast and optimized mobile experience</h3>
<p>WordPress mobile menu can be enabled without compromising your website’s performance on mobile.</p>
<p><em>Want to experience customizing your own WordPress Mobile Menu? Install the plugin now to give your users a great mobile experience by giving them the ease of navigating your website!</em></p>
<p><strong>More information</strong></p>
<ul>
<li>Follow the developer <a href="https://twitter.com/phpbits" rel="nofollow ugc">@Twitter</a></li>
<li>Visit <a href="https://menubuilderwp.com/" rel="nofollow ugc">Main Website</a></li>
</ul>


Mobile Menu Builder for WordPress

WordPress Mobile Menu Builder plugin is specially designed for mobiles. It is easy to use, customizable, and is highly flexible.

rtCamp

Gagan Deep Singh

vaishaliagola27

sid177

Kiran Potphode

Deepak Lalwani

Pradeep

devikvekariya

Shreyas Ikhar

Alvi Tazwar

<p>This plugin adds custom fields on the menu item’s edit interface of wp-admin and supports only 1-level menu configuration.<br />
Below is the list of custom fields this plugin adds.</p>
<ul>
<li>Custom text</li>
<li>Image selection with link and caption</li>
<li>Shortcode with caption</li>
<li>Custom HTML with TinyMCE editor</li>
</ul>
<p><strong>Notes:</strong></p>
<ul>
<li>This plugin works with default themes. In order to use it with custom themes, please add the necessary styling in your theme/child theme to override the plugin’s CSS.</li>
<li>The custom fields from this plugin should be used in the submenu for well-structured and responsive UI.</li>
<li>Currently, this plugin is not supported with FSE themes.</li>
</ul>
<h3>Usage</h3>
<ol>
<li>After installing and activating this plugin, goto Appearance -> Menus of your WordPress admin. Create a menu if you haven’t already and add menu items according to your need.</li>
<li>When you expand any menu item, you’ll see the custom fields added here (see screenshots below). You can see <strong>Custom Field</strong> and <strong>Select Feature</strong> options.</li>
<li>Along with Custom Text field, you can choose to use either Image, Shortcode or Custom HTML feature for a particular menu item.</li>
<li>You can click on the option you want to use and the input fields of that option will be visible.</li>
</ol>
<h4>Using Custom Text field</h4>
<ul>
<li>You can enter any text here and it’ll be displayed with this menu item.</li>
<li>This field can be used by all menu items along with any other feature.</li>
</ul>
<h4>Using Image</h4>
<ul>
<li>By clicking on <strong>Select Image</strong> button, WordPress’ media gallery window will be opened up. You can choose 1 image from already uploaded images or you can upload a new one and select that.</li>
<li>The selected image will be shown below <strong>Select Image</strong> button after you select and close the media gallery window.</li>
<li>To remove already selected image, click on <strong>Select Image</strong> button and deselect the already selected image. You can change the selected image by selecting any other image.</li>
<li>You can enter a URL in <strong>Image Link</strong> text field. On front-end, clicking on the image will lead to this URL.</li>
<li>You can enter a caption text in <strong>Image Caption</strong> field and it’ll be displayed below the image on the front-end.</li>
</ul>
<h4>Using Shortcode</h4>
<ul>
<li>You can add a shortcode in <strong>Shortcode</strong> field. We’ve added some stylings to handle WordPress’ default <code>[video]</code> and <code>[audio]</code> shortcode.</li>
<li>You can enter a caption text in <strong>Shortcode Caption</strong> field and it’ll be displayed below the shortcode on the front-end.</li>
</ul>
<h4>Using Custom HTML</h4>
<ul>
<li>TinyMCE editor is used to add custom HTML here.</li>
<li>From the <strong>Visual</strong> tab, you can enter text and format it using tools given in toolbar.</li>
<li>You can switch to <strong>Text</strong> tab to see/change HTML code of the text you entered.</li>
</ul>
<h3>Hooks</h3>
<h4>wp_menu_custom_fields_image_html Filter</h4>
<ul>
<li>Allows to change HTML generated for image feature.</li>
<li>There are 3 parameters. <code>$html</code> (Generated HTML), <code>$data</code> (Custom fields data), <code>$item_id</code> (Menu item ID).</li>
<li>
<p>Example:</p>
<pre><code>    [selected-feature] => image
    [image] => Array
        (
            [media-id] => 11
            [media-type] => image
            [media-link] => https://google.com/
            [media-caption] => This is image caption
            [media-url] => http://example.com/wp-content/uploads/2020/03/92d43b978cbcdc7b33e3596d131d5256.jpg
        )
</code></pre>
</li>
</ul>
<h4>wp_menu_custom_fields_shortcode_html Filter</h4>
<ul>
<li>Allows to change HTML generated for shortcode feature.</li>
<li>Parameters are same as <code>wp_menu_custom_fields_image_html</code>.</li>
<li>
<p>Example:</p>
<pre><code>    [selected-feature] => shortcode
    [shortcode] => Array
        (
            [shortcode] => [video src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"]
            [shortcode-caption] => This is a shortcode caption
        )
</code></pre>
</li>
</ul>
<h4>wp_menu_custom_fields_custom_markup_html Filter</h4>
<ul>
<li>Allows to change HTML generated for custom HTML feature.</li>
<li>Parameters are same as <code>wp_menu_custom_fields_image_html</code>.</li>
<li>
<p>Example:</p>
<pre><code>    [selected-feature] => html
    [html] => Array
        (
            [custom-html] => <em><strong>This is custom HTML</strong></em>
        )
</code></pre>
</li>
</ul>
<h4>wp_menu_custom_fields_custom_text_html Filter</h4>
<ul>
<li>Allows to change HTML generated for custom text field.</li>
<li>Parameters are same as <code>wp_menu_custom_fields_image_html</code>.</li>
<li>
<p>Example:</p>
<pre><code>    [custom-text] => This is a custom text
</code></pre>
</li>
</ul>
<h4>wp_menu_custom_fields_fields_html Filter</h4>
<ul>
<li>Allows to change the final custom field’s HTML generated for a particular menu item.</li>
<li>Parameters are same as <code>wp_menu_custom_fields_image_html</code>.</li>
<li>
<p>Example:</p>
<pre><code>    Array
    (
        [custom-text] => This is a custom text
        [selected-feature] => image
        [image] => Array
            (
                [media-id] => 11
                [media-type] => image
                [media-link] => https://google.com
                [media-caption] => This is image caption
                [media-url] => http://example.com/wp-content/uploads/2020/03/92d43b978cbcdc7b33e3596d131d5256.jpg
            )

    )
</code></pre>
</li>
</ul>
<h3>Styling mega menu</h3>
<p>A theme developer can add stylings for the custom fields added by this plugin by referring to the below sample HTML code.</p>
<ul>
<li>
<p>Image & Custom text</p>
<ul>
<li>
<p>Sample HTML code</p>
<pre><code>    <div class="rt-wp-menu-custom-fields-wrapper" style="padding-top: 10px; padding-right: 20px;">
        <div class="rt-wp-menu-custom-fields-image-wrapper">
            <a href="https://google.com">
                <img class="rt-wp-menu-custom-fields-image" src="http://example.com/wp-content/uploads/2020/03/92d43b978cbcdc7b33e3596d131d5256.jpg">
            </a>
            <span class="rt-wp-menu-custom-fields-image-caption">This is an image caption</span>
        </div>
        <span class="rt-wp-menu-custom-fields-custom-text">This is a custom text</span>
    </div>
</code></pre>
</li>
<li>
<p>If <strong>Image Link</strong> is entered, then <code>img</code> tag will be wrapped inside <code>a</code>.</p>
</li>
<li>Custom text will be displayed below the feature’s HTML.</li>
</ul>
</li>
<li>
<p>Shortcode</p>
<pre><code>        <div class="rt-wp-menu-custom-fields-shortcode-wrapper">
            <div class="rt-wp-menu-custom-fields-shortcode">
                
            </div>
            <span class="rt-wp-menu-custom-fields-shortcode-caption">This is shortcode caption!</span>
        </div>
</code></pre>
</li>
<li>
<p>Custom HTML</p>
<pre><code>        <div class="rt-wp-menu-custom-fields-custom-html">Welcome to <strong>WordPress</strong>. This is your first post. Edit or delete it, then start <em>writing</em>!</div>
</code></pre>
</li>
</ul>
<h3>Important Links</h3>
<ul>
<li><a href="https://github.com/rtCamp/wp-menu-custom-fields" rel="nofollow ugc">GitHub</a> – Please mention your wordpress.org username when sending pull requests.</li>
</ul>
<h3>License</h3>
<p>Same <a href="http://www.gnu.org/licenses/gpl-2.0.txt" rel="nofollow ugc">GPL</a> that WordPress uses!</p>
<h3>See room for improvement?</h3>
<p>Great! There are several ways you can get involved to help make this plugin better:</p>
<ol>
<li><strong>Report Bugs:</strong> If you find a bug, error or other problem, please report it! You can do this by <a href="https://github.com/rtCamp/wp-menu-custom-fields/issues" rel="nofollow ugc">creating a new topic</a> in the issue tracker.</li>
<li><strong>Suggest New Features:</strong> Have an awesome idea? Please share it! Simply <a href="https://github.com/rtCamp/wp-menu-custom-fields/issues" rel="nofollow ugc">create a new topic</a> in the issure tracker to express your thoughts on why the feature should be included and get a discussion going around your idea.</li>
</ol>

WP Menu Custom Fields

This plugin adds custom fields on menu item's edit interface of wp-admin.

Mobile Menu Builder for WordPress vs WP Menu Custom Fields