This plugin adds custom fields on menu item's edit screen of wp-admin.
Author: rtCamp
Contributors: rtcamp, sid177, kiranpotphode, devikvekariya, vaishuagola27, deepaklalwani, alvitazwar052, pradeep1308, shreyasikhar26, gagan0123
Tags: Navigation Menu, Navigation Menu Custom Fields
Requires at least: 5.4
Tested up to: 6.0.3
Requires PHP version: 7.0
Stable tag: 1.1
License: GPLv2 or later (of course!)
License URI: http://www.gnu.org/licenses/gpl-2.0.html
This plugin adds custom fields on Appearance -> Menus page of wp-admin (see screenshots) and supports only 1-level menu configuration.
It uses wp_nav_menu_item_custom_fields
hook added in WordPress 5.4 release to add custom fields.
Below is the list of custom fields added by this plugin.
Notes:
/wp-content/plugins/
directory in your WordPress installation.[video]
and [audio]
shortcode.Custom fields added under Appearance -> Menus:
Menu on frontend of your website:
wp_menu_custom_fields_image_html
Filter[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
)
wp_menu_custom_fields_shortcode_html
Filterwp_menu_custom_fields_image_html
.[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
)
wp_menu_custom_fields_custom_markup_html
Filterwp_menu_custom_fields_image_html
.[selected-feature] => html
[html] => Array
(
[custom-html] => <em><strong>This is custom HTML</strong></em>
)
wp_menu_custom_fields_custom_text_html
Filterwp_menu_custom_fields_image_html
.[custom-text] => This is a custom text
wp_menu_custom_fields_fields_html
Filterwp_menu_custom_fields_image_html
.
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
)
)
## Styling mega menu ##
A theme developer can add stylings for the custom fields added by this plugin by referring to the below sample HTML code.
- Image & Custom text
- Sample HTML code
<div class="rt-wp-menu-custom-fields-wrapper" style="padding-top: 10px; padding-right: 20px; /* Dynamic stylings added via JavaScript. */">
<div class="rt-wp-menu-custom-fields-image-wrapper">
<a href="https://github.com/rtCamp/wp-menu-custom-fields/blob/master/{ Image Link }">
<img class="rt-wp-menu-custom-fields-image" src="https://github.com/rtCamp/wp-menu-custom-fields/raw/master/{ Selected Image }">
</a>
<span class="rt-wp-menu-custom-fields-image-caption">{ Image Caption }</span>
</div>
<span class="rt-wp-menu-custom-fields-custom-text">{ Custom Text }</span>
</div>
```
- If **Image Link** is entered, then `img` tag will be wrapped inside `a`.
- Custom text will be displayed below the feature's HTML.
<div class="rt-wp-menu-custom-fields-shortcode-wrapper">
<div class="rt-wp-menu-custom-fields-shortcode">
{ Shortcode }
</div>
<span class="rt-wp-menu-custom-fields-shortcode-caption">{ Shortcode Caption }</span>
</div>
<div class="rt-wp-menu-custom-fields-custom-html">{ Custom HTML }</div>
Before creating a new issue, do browse through the existing issues for resolution or upcoming fixes.
If you still need to log an issue, making sure to include as much detail as you can, including clear steps to reproduce your issue if possible.
Want to contribute a new feature? Start a conversation by logging an issue.
Once you're ready to send a pull request, please run through the following checklist:
Browse through the existing issues for anything related to what you want to work on. If you don't find any related issues, open a new one.
Fork this repository.
Create a branch from develop
for each issue you'd like to address and commit your changes.
Push the code changes from your local clone to your fork.
Open a pull request and that's it! We'll with feedback as soon as possible (Isn't collaboration a great thing? 😌)
Once your pull request has passed final code review and tests, it will be merged into develop
and be in the pipeline for the next release. Props to you! 🎉