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

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

Alternatives to WP Menu Custom Fields

Top alternatives