Skip to content

Commit a95c3bd

Browse files
haseebnawaz298haseebnawaz298
committed
update will the changes
- hide field in post editor if there is no support - show notice in field group editor
1 parent d102ec6 commit a95c3bd

File tree

2 files changed

+132
-49
lines changed

2 files changed

+132
-49
lines changed

‎docs/features/field/nav_menu/tutorial.md

+65-12
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,71 @@
1-
# Using the Nav Menu Field
1+
# **Using the Nav Menu Field**
22

3-
## Basic Setup
3+
## **Basic Setup**
44

5-
1. Create a new Field Group
6-
2. Add a Nav Menu field
7-
3. Configure options:
8-
- Set Return Value
9-
- Set Menu Container
10-
- Set of Allow Null is (true/false)
5+
To get started with the **Nav Menu Field** in SCF, follow these steps to configure and display a WordPress navigation menu:
116

12-
## Common Use Cases
7+
### **Step 1: Create a New Field Group**
138

14-
1. Use to output WordPress navigation menu anywhere.
9+
First, create a new field group in **Advanced Custom Fields (SCF)**. This field group will hold your custom fields, including the **Nav Menu** field.
1510

16-
## Tips
11+
1. Go to **Custom Fields > Add New** in your WordPress admin panel.
12+
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).
1713

18-
- to add more Menu Container use ``wp_nav_menu_container_allowed_tags`` hook
14+
### **Step 2: Add a Nav Menu Field**
15+
16+
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.
17+
18+
1. Click **Add Field** within the field group.
19+
2. Set the **Field Type** to **Nav Menu**.
20+
3. Configure the necessary field options based on your needs.
21+
22+
### **Step 3: Configure Options**
23+
24+
Configure the field options for the **Nav Menu** field to tailor it to your needs.
25+
26+
- **Return Value:** Choose how you want the selected menu to be returned:
27+
- **Menu ID:** The ID of the selected menu.
28+
- **Nav Menu HTML:** The raw HTML of the selected menu.
29+
- **Nav Menu Object:** The complete menu object, including properties like the menu name and term ID.
30+
31+
- **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.
32+
33+
- **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.
34+
35+
### **Code Example: Basic Setup**
36+
37+
Here's how you can implement the **Nav Menu Field** in a template file:
38+
39+
```php
40+
// Check if the Nav Menu Field has a value
41+
$menu_id = get_field('your_nav_menu_field_name');
42+
43+
if ($menu_id) {
44+
// Get the menu object or HTML based on your configuration
45+
$menu_html = wp_nav_menu(array(
46+
'menu' => $menu_id, // Use the menu ID
47+
'container' => 'nav', // Use a 'nav' container
48+
'echo' => false, // Don't output directly; return the HTML
49+
));
50+
51+
echo $menu_html; // Output the menu HTML
52+
}
53+
```
54+
55+
## **Common Use Cases**
56+
57+
1. **Use to Output WordPress Navigation Menu Anywhere:**
58+
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.
59+
60+
## **Tips**
61+
62+
- **To Add More Menu Containers:**
63+
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.
64+
65+
Example:
66+
```php
67+
function my_custom_menu_container_tags($tags) {
68+
$tags[] = 'section'; // Adds 'section' as an allowed container tag
69+
return $tags;
70+
}
71+
add_filter('wp_nav_menu_container_allowed_tags', 'my_custom_menu_container_tags');

‎includes/fields/class-acf-field-nav-menu.php

+67-37
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ public function initialize() {
3434
'allow_null' => 0,
3535
'container' => 'div',
3636
);
37+
38+
add_filter( 'acf/field_wrapper_attributes', array( $this, 'nav_menu_field_wrapper_attributes' ), 10, 2 );
3739
}
3840

3941
/**
@@ -42,6 +44,33 @@ public function initialize() {
4244
* @param array $field The array representation of the current Nav Menu Field.
4345
*/
4446
public function render_field_settings( $field ) {
47+
$allow_null = $field['allow_null'];
48+
$nav_menus = wp_get_nav_menus( $allow_null );
49+
if ( current_theme_supports( 'menus' ) ) {
50+
if ( empty( $nav_menus ) ) {
51+
?>
52+
<div class="acf-field">
53+
<div class="acf-notice">
54+
<p>
55+
<?php esc_html_e( 'Warning: You don\'t have any menus created please visit', 'secure-custom-fields' ); ?> <a href="<?php echo esc_url( admin_url( 'nav-menus.php' ) ); ?>"><?php esc_html_e( 'this', 'secure-custom-fields' ); ?></a> <?php esc_html_e( 'link to create menus.', 'secure-custom-fields' ); ?>
56+
</p>
57+
</div>
58+
</div>
59+
<?php
60+
}
61+
} else {
62+
?>
63+
<div class="acf-field">
64+
<div class="acf-notice">
65+
<p>
66+
<?php esc_html_e( 'Warning: The theme does not support navigation menus, the field will not show.', 'secure-custom-fields' ); ?>
67+
</p>
68+
</div>
69+
</div>
70+
<?php
71+
72+
}
73+
4574
// Register the Return Value format setting
4675
acf_render_field_setting(
4776
$field,
@@ -111,45 +140,28 @@ private function get_allowed_nav_container_tags() {
111140
public function render_field( $field ) {
112141
$allow_null = $field['allow_null'];
113142
$nav_menus = wp_get_nav_menus( $allow_null );
114-
if ( current_theme_supports( 'menus' ) ) {
115-
if ( empty( $nav_menus ) ) {
116-
?>
117-
<div class="acf-notice" >
118-
<p>
119-
<?php esc_html_e( '⚠️ Warning: You don\'t have any menus created please visit', 'secure-custom-fields' ); ?> <a href="<?php echo esc_url( admin_url( 'nav-menus.php' ) ); ?>"><?php esc_html_e( 'this', 'secure-custom-fields' ); ?></a> <?php esc_html_e( 'link to create menus.', 'secure-custom-fields' ); ?>
120-
</p>
121-
</div>
143+
if ( ! current_theme_supports( 'menus' ) || empty( $nav_menus ) ) {
144+
return; // Don't render the field
145+
}
122146

147+
?>
148+
<select id="<?php esc_attr( $field['id'] ); ?>" class="<?php echo esc_attr( $field['class'] ); ?>" name="<?php echo esc_attr( $field['name'] ); ?>">
123149
<?php
124-
} else {
125-
?>
126-
<select id="<?php esc_attr( $field['id'] ); ?>" class="<?php echo esc_attr( $field['class'] ); ?>" name="<?php echo esc_attr( $field['name'] ); ?>">
127-
<?php
128-
if ( $allow_null ) {
129-
?>
130-
<option value="">
131-
<?php esc_html_e( '- Select -', 'secure-custom-fields' ); ?>
132-
</option>
133-
<?php
134-
}
135-
foreach ( $nav_menus as $nav_menu_name ) {
136-
?>
137-
<option value="<?php echo esc_attr( $nav_menu_name->term_id ); ?>" <?php selected( $field['value'], $nav_menu_name->term_id ); ?>>
138-
<?php echo esc_html( $nav_menu_name->name ); ?>
139-
</option>
140-
<?php } ?>
141-
</select>
142-
<?php
143-
}
144-
} else {
145-
?>
146-
<div class="acf-notice">
147-
<p>
148-
<?php esc_html_e( '⚠️ Warning: The theme does not support navigation menus.', 'secure-custom-fields' ); ?>
149-
</p>
150-
</div>
151-
<?php
152-
}
150+
if ( $allow_null ) {
151+
?>
152+
<option value="">
153+
<?php esc_html_e( '- Select -', 'secure-custom-fields' ); ?>
154+
</option>
155+
<?php
156+
}
157+
foreach ( $nav_menus as $nav_menu_name ) {
158+
?>
159+
<option value="<?php echo esc_attr( $nav_menu_name->term_id ); ?>" <?php selected( $field['value'], $nav_menu_name->term_id ); ?>>
160+
<?php echo esc_html( $nav_menu_name->name ); ?>
161+
</option>
162+
<?php } ?>
163+
</select>
164+
<?php
153165
}
154166

155167
/**
@@ -199,6 +211,24 @@ public function format_value( $value, $post_id, $field ) {
199211
// Just return the Nav Menu ID
200212
return $value;
201213
}
214+
/**
215+
* Hide Field if no support
216+
*
217+
* @param array $wrapper Wrapper array that contains all field main wrapper attributes.
218+
* @param array $field main field array will all field data.
219+
*/
220+
public function nav_menu_field_wrapper_attributes( $wrapper, $field ) {
221+
// Check if it's the nav menu field (or any other specific field type)
222+
if ( isset( $field['type'] ) && 'nav_menu' === $field['type'] ) {
223+
// Check if menus are available and the theme supports them
224+
if ( ! current_theme_supports( 'menus' ) ) {
225+
// Add inline CSS to hide the field if no menus are available
226+
$wrapper['style'] = 'display: none;'; // You can also add additional styles
227+
}
228+
}
229+
230+
return $wrapper;
231+
}
202232
}
203233

204234

0 commit comments

Comments
 (0)