From e56046c38888a5a83099cd48c1fdb510d168492d Mon Sep 17 00:00:00 2001 From: Haseeb Nawaz Awan Date: Fri, 28 Feb 2025 22:02:37 +0500 Subject: [PATCH 1/6] Add nav menu field to scf --- docs/features/field/nav_menu/index.md | 17 ++ docs/features/field/nav_menu/tutorial.md | 18 ++ includes/fields/class-acf-field-nav-menu.php | 207 +++++++++++++++++++ secure-custom-fields.php | 1 + 4 files changed, 243 insertions(+) create mode 100644 docs/features/field/nav_menu/index.md create mode 100644 docs/features/field/nav_menu/tutorial.md create mode 100644 includes/fields/class-acf-field-nav-menu.php diff --git a/docs/features/field/nav_menu/index.md b/docs/features/field/nav_menu/index.md new file mode 100644 index 00000000..b1ac75b6 --- /dev/null +++ b/docs/features/field/nav_menu/index.md @@ -0,0 +1,17 @@ +# Nav Menu Field + +The Nav Menu Field field provides a way to select nav menus and output them. + +## Key Features + +- Different Return Value (Object, HTML, ID) +- Different Menu Container (nav, div) +- Ability to select no value + +## Settings + +- Return Value +- Menu Container +- Allow Null? + + diff --git a/docs/features/field/nav_menu/tutorial.md b/docs/features/field/nav_menu/tutorial.md new file mode 100644 index 00000000..a5d01b91 --- /dev/null +++ b/docs/features/field/nav_menu/tutorial.md @@ -0,0 +1,18 @@ +# Using the Nav Menu Field + +## Basic Setup + +1. Create a new Field Group +2. Add a Nav Menu field +3. Configure options: + - Set Return Value + - Set Menu Container + - Set of Allow Null is (true/false) + +## Common Use Cases + +1. Use to output wordpress menu anywhere + +## Tips + +- to add more Menu Container use ``wp_nav_menu_container_allowed_tags`` hook diff --git a/includes/fields/class-acf-field-nav-menu.php b/includes/fields/class-acf-field-nav-menu.php new file mode 100644 index 00000000..4ed42857 --- /dev/null +++ b/includes/fields/class-acf-field-nav-menu.php @@ -0,0 +1,207 @@ +name = 'nav_menu'; + $this->label = _x( 'Nav Menu', 'noun', 'secure-custom-fields' ); + $this->category = 'choice'; + $this->description = __( 'A dropdown list with a selection of menu choices that you can chose.', 'secure-custom-fields' ); + $this->preview_image = acf_get_url() . '/assets/images/field-type-previews/field-preview-select.png'; + $this->doc_url = 'https://developer.wordpress.org/secure-custom-fields/features/fields/nav_menu/'; + $this->tutorial_url = 'https://developer.wordpress.org/secure-custom-fields/features/fields/select/nav_menu-tutorial/'; + $this->defaults = array( + 'save_format' => 'id', + 'allow_null' => 0, + 'container' => 'div', + ); + } + + /** + * Renders the Nav Menu Field options seen when editing a Nav Menu Field. + * + * @param array $field The array representation of the current Nav Menu Field. + */ + public function render_field_settings( $field ) { + // Register the Return Value format setting + acf_render_field_setting( + $field, + array( + 'label' => __( 'Return Value', 'secure-custom-fields' ), + 'instructions' => __( 'Specify the returned value on front end', 'secure-custom-fields' ), + 'type' => 'radio', + 'name' => 'save_format', + 'layout' => 'horizontal', + 'choices' => array( + 'object' => __( 'Nav Menu Object', 'secure-custom-fields' ), + 'menu' => __( 'Nav Menu HTML', 'secure-custom-fields' ), + 'id' => __( 'Nav Menu ID', 'secure-custom-fields' ), + ), + ) + ); + + // Register the Menu Container setting + acf_render_field_setting( + $field, + array( + 'label' => __( 'Menu Container', 'secure-custom-fields' ), + 'instructions' => __( "What to wrap the Menu's ul with (when returning HTML only)", 'secure-custom-fields' ), + 'type' => 'select', + 'name' => 'container', + 'choices' => $this->get_allowed_nav_container_tags(), + ) + ); + + // Register the Allow Null setting + acf_render_field_setting( + $field, + array( + 'label' => __( 'Allow Null?', 'secure-custom-fields' ), + 'type' => 'radio', + 'name' => 'allow_null', + 'layout' => 'horizontal', + 'choices' => array( + 1 => __( 'Yes', 'secure-custom-fields' ), + 0 => __( 'No', 'secure-custom-fields' ), + ), + ) + ); + } + /** + * Get the allowed wrapper tags for use with wp_nav_menu(). + * + * @return array An array of allowed wrapper tags. + */ + private function get_allowed_nav_container_tags() { + $tags = apply_filters( 'wp_nav_menu_container_allowed_tags', array( 'div', 'nav' ) ); + $formatted_tags = array( + '0' => 'None', + ); + + foreach ( $tags as $tag ) { + $formatted_tags[ $tag ] = $tag; + } + + return $formatted_tags; + } + /** + * Renders the Nav Menu Field. + * + * @param array $field The array representation of the current Nav Menu Field. + */ + public function render_field( $field ) { + $allow_null = $field['allow_null']; + $nav_menus = wp_get_nav_menus( $allow_null ); + if ( current_theme_supports( 'menus' ) ) { + if ( empty( $nav_menus ) ) { + ?> +
+

+ +

+
+ + + + +
+

+ +

+
+ ID = $wp_menu_object->term_id; + $menu_object->name = $wp_menu_object->name; + $menu_object->slug = $wp_menu_object->slug; + $menu_object->count = $wp_menu_object->count; + + return $menu_object; + } elseif ( 'menu' === $field['save_format'] ) { + ob_start(); + + wp_nav_menu( + array( + 'menu' => $value, + 'container' => $field['container'], + ) + ); + + return ob_get_clean(); + } + + // Just return the Nav Menu ID + return $value; + } + } + + + // initialize + acf_register_field_type( 'Acf_Field_Nav_Menu' ); +endif; // class_exists check diff --git a/secure-custom-fields.php b/secure-custom-fields.php index ee186954..5374bfbe 100644 --- a/secure-custom-fields.php +++ b/secure-custom-fields.php @@ -327,6 +327,7 @@ public function init() { acf_include( 'includes/fields/class-acf-field-flexible-content.php' ); acf_include( 'includes/fields/class-acf-field-gallery.php' ); acf_include( 'includes/fields/class-acf-field-clone.php' ); + acf_include( 'includes/fields/class-acf-field-nav-menu.php' ); /** * Fires after field types have been included. From 453dab50e9460bdfc7d7d76b8807030974dd9c9a Mon Sep 17 00:00:00 2001 From: Brandon Kraft Date: Wed, 5 Mar 2025 11:41:49 -0600 Subject: [PATCH 2/6] Minor edits --- docs/features/field/nav_menu/tutorial.md | 2 +- includes/fields/class-acf-field-nav-menu.php | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/features/field/nav_menu/tutorial.md b/docs/features/field/nav_menu/tutorial.md index a5d01b91..ac37cedb 100644 --- a/docs/features/field/nav_menu/tutorial.md +++ b/docs/features/field/nav_menu/tutorial.md @@ -11,7 +11,7 @@ ## Common Use Cases -1. Use to output wordpress menu anywhere +1. Use to output WordPress navigation menu anywhere. ## Tips diff --git a/includes/fields/class-acf-field-nav-menu.php b/includes/fields/class-acf-field-nav-menu.php index 4ed42857..1198c029 100644 --- a/includes/fields/class-acf-field-nav-menu.php +++ b/includes/fields/class-acf-field-nav-menu.php @@ -3,7 +3,7 @@ * This is a PHP file containing the code for the acf_field_nav_menu class. * * @package wordpress/secure-custom-fields - * @since 6.4.1 + * @since 6.5.0 */ if ( ! class_exists( 'Acf_Field_Nav_Menu' ) ) : @@ -17,7 +17,7 @@ class Acf_Field_Nav_Menu extends acf_field { * * @type function * @date 5/03/2014 - * @since ACF 6.4.1 + * @since 6.5.0 */ public function initialize() { From a95c3bdec61434b022a1099094e8291a8536d903 Mon Sep 17 00:00:00 2001 From: Haseeb Nawaz Awan Date: Wed, 5 Mar 2025 23:54:19 +0500 Subject: [PATCH 3/6] update will the changes - hide field in post editor if there is no support - show notice in field group editor --- docs/features/field/nav_menu/tutorial.md | 77 +++++++++++--- includes/fields/class-acf-field-nav-menu.php | 104 ++++++++++++------- 2 files changed, 132 insertions(+), 49 deletions(-) diff --git a/docs/features/field/nav_menu/tutorial.md b/docs/features/field/nav_menu/tutorial.md index ac37cedb..68a8a6af 100644 --- a/docs/features/field/nav_menu/tutorial.md +++ b/docs/features/field/nav_menu/tutorial.md @@ -1,18 +1,71 @@ -# Using the Nav Menu Field +# **Using the Nav Menu Field** -## Basic Setup +## **Basic Setup** -1. Create a new Field Group -2. Add a Nav Menu field -3. Configure options: - - Set Return Value - - Set Menu Container - - Set of Allow Null is (true/false) +To get started with the **Nav Menu Field** in SCF, follow these steps to configure and display a WordPress navigation menu: -## Common Use Cases +### **Step 1: Create a New Field Group** -1. Use to output WordPress navigation menu anywhere. +First, create a new field group in **Advanced Custom Fields (SCF)**. This field group will hold your custom fields, including the **Nav Menu** field. -## Tips +1. Go to **Custom Fields > Add New** in your WordPress admin panel. +2. Title your field group and choose the location rules for where this field group should be displayed (e.g., on a specific page or post type). -- to add more Menu Container use ``wp_nav_menu_container_allowed_tags`` hook +### **Step 2: Add a Nav Menu Field** + +Once you've created a new field group, add a new field of type **Nav Menu**. This field will allow users to select a navigation menu from the available menus on your site. + +1. Click **Add Field** within the field group. +2. Set the **Field Type** to **Nav Menu**. +3. Configure the necessary field options based on your needs. + +### **Step 3: Configure Options** + +Configure the field options for the **Nav Menu** field to tailor it to your needs. + +- **Return Value:** Choose how you want the selected menu to be returned: + - **Menu ID:** The ID of the selected menu. + - **Nav Menu HTML:** The raw HTML of the selected menu. + - **Nav Menu Object:** The complete menu object, including properties like the menu name and term ID. + +- **Menu Container:** This option determines the wrapper tag for the menu when the **Nav Menu HTML** return format is selected. Common options include `div`, `nav`, or `none`. You can also add additional container tags using the `wp_nav_menu_container_allowed_tags` filter. + +- **Allow Null:** Set this option to **true** or **false** to allow or disallow a **null** value (i.e., no menu selected). When **true**, an empty option will be available for the user to select. + +### **Code Example: Basic Setup** + +Here's how you can implement the **Nav Menu Field** in a template file: + +```php +// Check if the Nav Menu Field has a value +$menu_id = get_field('your_nav_menu_field_name'); + +if ($menu_id) { + // Get the menu object or HTML based on your configuration + $menu_html = wp_nav_menu(array( + 'menu' => $menu_id, // Use the menu ID + 'container' => 'nav', // Use a 'nav' container + 'echo' => false, // Don't output directly; return the HTML + )); + + echo $menu_html; // Output the menu HTML +} +``` + +## **Common Use Cases** + +1. **Use to Output WordPress Navigation Menu Anywhere:** + The **Nav Menu Field** allows you to output a WordPress navigation menu in custom locations across your site, such as in custom templates, widgets, or shortcodes. + +## **Tips** + +- **To Add More Menu Containers:** + Use the `wp_nav_menu_container_allowed_tags` hook to add additional allowed container tags for the Nav Menu field. This will enable more flexibility in the menu's wrapper tag. + + Example: + ```php + function my_custom_menu_container_tags($tags) { + $tags[] = 'section'; // Adds 'section' as an allowed container tag + return $tags; + } + add_filter('wp_nav_menu_container_allowed_tags', 'my_custom_menu_container_tags'); diff --git a/includes/fields/class-acf-field-nav-menu.php b/includes/fields/class-acf-field-nav-menu.php index 1198c029..94717835 100644 --- a/includes/fields/class-acf-field-nav-menu.php +++ b/includes/fields/class-acf-field-nav-menu.php @@ -34,6 +34,8 @@ public function initialize() { 'allow_null' => 0, 'container' => 'div', ); + + add_filter( 'acf/field_wrapper_attributes', array( $this, 'nav_menu_field_wrapper_attributes' ), 10, 2 ); } /** @@ -42,6 +44,33 @@ public function initialize() { * @param array $field The array representation of the current Nav Menu Field. */ public function render_field_settings( $field ) { + $allow_null = $field['allow_null']; + $nav_menus = wp_get_nav_menus( $allow_null ); + if ( current_theme_supports( 'menus' ) ) { + if ( empty( $nav_menus ) ) { + ?> +
+
+

+ +

+
+
+ +
+
+

+ +

+
+
+ -
-

- -

-
+ if ( ! current_theme_supports( 'menus' ) || empty( $nav_menus ) ) { + return; // Don't render the field + } + ?> + - - - - - - - -
-

- -

-
- + + + + + + Date: Thu, 6 Mar 2025 00:04:05 +0500 Subject: [PATCH 4/6] Update tutorial.md --- docs/features/field/nav_menu/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/field/nav_menu/tutorial.md b/docs/features/field/nav_menu/tutorial.md index 68a8a6af..bc21954d 100644 --- a/docs/features/field/nav_menu/tutorial.md +++ b/docs/features/field/nav_menu/tutorial.md @@ -6,7 +6,7 @@ To get started with the **Nav Menu Field** in SCF, follow these steps to configu ### **Step 1: Create a New Field Group** -First, create a new field group in **Advanced Custom Fields (SCF)**. This field group will hold your custom fields, including the **Nav Menu** field. +First, create a new field group in **Secure Custom Fields (SCF)**. This field group will hold your custom fields, including the **Nav Menu** field. 1. Go to **Custom Fields > Add New** in your WordPress admin panel. 2. Title your field group and choose the location rules for where this field group should be displayed (e.g., on a specific page or post type). From 7c18a6b8db2a3c7e7ed313d47143609fc87c8563 Mon Sep 17 00:00:00 2001 From: Haseeb Nawaz Awan Date: Wed, 19 Mar 2025 03:15:51 +0500 Subject: [PATCH 5/6] Update includes/fields/class-acf-field-nav-menu.php Co-authored-by: Brandon Kraft --- includes/fields/class-acf-field-nav-menu.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/fields/class-acf-field-nav-menu.php b/includes/fields/class-acf-field-nav-menu.php index 94717835..96fb8fb1 100644 --- a/includes/fields/class-acf-field-nav-menu.php +++ b/includes/fields/class-acf-field-nav-menu.php @@ -63,7 +63,7 @@ public function render_field_settings( $field ) {

- +

From 423d4be6807f758132971d9152d217f207ce4204 Mon Sep 17 00:00:00 2001 From: Haseeb Nawaz Awan Date: Wed, 19 Mar 2025 03:24:44 +0500 Subject: [PATCH 6/6] update no menu message --- includes/fields/class-acf-field-nav-menu.php | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/includes/fields/class-acf-field-nav-menu.php b/includes/fields/class-acf-field-nav-menu.php index 96fb8fb1..4e612e5b 100644 --- a/includes/fields/class-acf-field-nav-menu.php +++ b/includes/fields/class-acf-field-nav-menu.php @@ -52,7 +52,13 @@ public function render_field_settings( $field ) {

- + ' . esc_html__( 'the menu settings page', 'secure-custom-fields' ) . '' + ); + ?>