You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+49-46Lines changed: 49 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,15 +18,15 @@ This is a utility class that is intended to format your WordPress theme menu wit
18
18
19
19
*This walker is fully compliant with all Theme Review guidelines for wordpress.org theme submission.* It requires no modification to be compliant but you can optionally replace the `wp-bootstrap-navwalker` text domain (which appears twice in the `fallback` function) with the text domain of your theme.
20
20
21
-
### UPGRADE NOTES ###
21
+
### Upgrade Notes
22
22
23
-
Between version 3 and version 4 of the walker there have been significant changes to the codebase. Version 4 of the walker is built to work with Bootstrap 4 and has not been tested for backwards compatibility with Bootstrap 3. A separate branch for Bootstrap 3 is maintained here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v3-branch
23
+
Between version 3 and version 4 of the walker there have been significant changes to the codebase. Version 4 of the walker is built to work with Bootstrap 4 and has not been tested for backwards compatibility with Bootstrap 3. A separate branch for Bootstrap 3 is maintained here: <https://github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v3-branch>
24
24
25
25
Here is a list of the most notable changes:
26
26
27
27
- The filename has been changed and prefixed with `class-` to better fit PHP coding standards naming conventions.
28
-
- New Name: `class-wp-bootstrap-navwalker.php`
29
-
- Old Name: `wp-bootstrap-navwalker.php`
28
+
- New Name: `class-wp-bootstrap-navwalker.php`
29
+
- Old Name: `wp-bootstrap-navwalker.php`
30
30
- Icon and link modifier handling is now done through the `CSS Classes` menu item input instead of the `Title` input.
31
31
- Icon only items are possible using icon classes in combination with the `sr-only` classname.
32
32
@@ -50,70 +50,71 @@ If you encounter errors with the above code use a check like this to return clea
50
50
51
51
```php
52
52
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
53
-
// file does not exist... return an error.
54
-
return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
53
+
// File does not exist... return an error.
54
+
return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
You will also need to declare a new menu in your `functions.php` file if one doesn't already exist.
61
62
62
63
```php
63
64
register_nav_menus( array(
64
-
'primary' => __( 'Primary Menu', 'THEMENAME' ),
65
+
'primary' => __( 'Primary Menu', 'THEMENAME' ),
65
66
) );
66
67
```
68
+
67
69
## Usage
68
70
69
71
Add or update any `wp_nav_menu()` functions in your theme (often found in `header.php`) to use the new walker by adding a `'walker'` item to the wp_nav_menu args array.
70
72
71
73
```php
72
74
wp_nav_menu( array(
73
-
'theme_location' => 'primary',
74
-
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
Your menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation.
85
87
86
-
Typically the menu is wrapped with additional markup, here is an example of a `fixed-top` menu that collapse for responsive navigation at the md breakpoint.
88
+
Typically the menu is wrapped with additional markup, here is an example of a `fixed-top` menu that collapse for responsive navigation at the md breakpoint.
To change your menu style add Bootstrap nav class names to the `menu_class` declaration.
113
115
114
116
Review options in the Bootstrap docs for more information on [nav classes](https://getbootstrap.com/components/#nav).
115
117
116
-
117
118
### Displaying the Menu
118
119
119
120
To display the menu you must associate your menu with your theme location. You can do this by selecting your theme location in the *Theme Locations* list while editing a menu in the WordPress menu manager.
@@ -124,12 +125,13 @@ There has been some interest in making this walker the default walker for all me
Simply updating the walker may not be enough to get menus working right, you may need to add wrappers or additional classes, you can do that via the above function as well.
134
136
135
137
### Menu Caching
@@ -138,31 +140,32 @@ On some sites generating a large menu that rarely ever changes on every page req
138
140
139
141
The biggest drawback to caching nav menus with this method is that it cannot easily apply the `.current-menu-item` or the `.active` class to the currently active item as WP decides what is currently active on page load - and since the menu is cached it only knows the active page that it was cached on originally.
140
142
141
-
You can decide yourself if you want to put up with those drawbacks for the benefit of removing the menu generation time on most page loads. You can follow this article by Dave Clements to see how we cached nav menus that were generated by this walker: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
143
+
You can decide yourself if you want to put up with those drawbacks for the benefit of removing the menu generation time on most page loads. You can follow this article by Dave Clements to see how we cached nav menus that were generated by this walker: <https://www.doitwithwp.com/use-transients-speed-wordpress-menus/>
142
144
143
145
Be sure to set the `echo` argument to FALSE in `the wp_nav_menu()` call when doing this so that the results can be stored instead of echoed to the page.
This script included the ability to use Bootstrap nav link mods in your menus through the WordPress menu UI. Disabled links, dropdown headers and dropdown dividers are supported. Additionally icon support is built-in for Glyphicons and Font Awesome (note: you will need to include the icon stylesheets or assets separately).
152
155
153
156
#### Icons
154
157
155
-
To add an Icon to your link simply enter Glypicons or Font Awesome class names in the links **CSS Classes** field in the Menu UI and the walker class will do the rest. IE `glyphicons glyphicons-bullhorn` or `fa fa-arrow-left` or `fas fa-arrow-left`.
158
+
To add an Icon to your link simply enter Glyphicons or Font Awesome class names in the links **CSS Classes** field in the Menu UI and the walker class will do the rest. IE `glyphicons glyphicons-bullhorn` or `fa fa-arrow-left` or `fas fa-arrow-left`.
156
159
157
160
#### Icon-Only Items
158
161
159
162
To make an item appear with the icon only apply the bootstrap screen reader class `sr-only` to the item alongside any icon classnames. This will then hide only the text that would appear as the link text.
160
163
161
164
#### Disabled Links
162
165
163
-
To set a disabled link simply add `disabled` to the **CSS Classes** field in the Menu UI and the walker class will do the rest. _Note: In addition to adding the .disabled class this will change the link `href` to `#` as well so that it is not a followable link._
166
+
To set a disabled link simply add `disabled` to the **CSS Classes** field in the Menu UI and the walker class will do the rest. _Note: In addition to adding the .disabled class this will change the link `href` to `#` as well so that it is not a follow-able link._
#### Dropdown Headers, Dropdown Dividers & Dropdown Item Text
166
169
167
170
Headers, dividers and text only items can be added within dropdowns by adding a Custom Link and adding either `dropdown-header`, `dropdown-divider` or `dropdown-item-text` into the **CSS Classes** input. _Note: This will remove the `href` on the item and change it to either a `<span>` for headers or a `<div>` for dividers._
0 commit comments