Skip to content

Commit d856aae

Browse files
authored
Version bumber v4.3.0
Update/v4.3.0
2 parents 26a280a + 5d39044 commit d856aae

4 files changed

Lines changed: 76 additions & 65 deletions

File tree

.travis.yml

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,14 @@ php:
1515
- 7.0
1616
- 7.1
1717
- 7.2
18+
- 7.3
1819
- nightly
1920

2021
env:
2122
- WP_VERSION=latest WP_MULTISITE=0
2223
- WP_VERSION=latest WP_MULTISITE=1
2324

2425
matrix:
25-
include:
26-
- dist: precise
27-
php: 5.3
28-
env: WP_VERSION=latest WP_MULTISITE=0
2926
allow_failures:
3027
- php: nightly
3128

CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
#CHANGELOG
22

3+
## [4.3.0]
4+
- Added an `aria-current` item.
5+
- Added `.nav-item` for the `<li>` and `.nav-link` for the `<a>` in fallback function.
6+
- Some escape improvements.
7+
- Don't pass `$attributes` to element closing function as it's ignored anyway.
8+
39
## [4.2.0]
410
- Fix typo in function name 'seporate'->'separate' (private function, no need to add back-compat).
511

README.md

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ This is a utility class that is intended to format your WordPress theme menu wit
1818

1919
*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.
2020

21-
### UPGRADE NOTES ###
21+
### Upgrade Notes
2222

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>
2424

2525
Here is a list of the most notable changes:
2626

2727
- 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`
3030
- Icon and link modifier handling is now done through the `CSS Classes` menu item input instead of the `Title` input.
3131
- Icon only items are possible using icon classes in combination with the `sr-only` classname.
3232

@@ -37,78 +37,84 @@ Place **class-wp-bootstrap-navwalker.php** in your WordPress theme folder `/wp-c
3737
Open your WordPress themes **functions.php** file - `/wp-content/your-theme/functions.php` - and add the following code:
3838

3939
```php
40-
// Register Custom Navigation Walker
41-
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
40+
/**
41+
* Register Custom Navigation Walker
42+
*/
43+
function register_navwalker(){
44+
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
45+
}
46+
add_action( 'after_setup_theme', 'register_navwalker' );
4247
```
4348

4449
If you encounter errors with the above code use a check like this to return clean errors to help diagnose the problem.
4550

4651
```php
4752
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
48-
// file does not exist... return an error.
49-
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' ) );
5055
} else {
51-
// file exists... require it.
52-
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
56+
// File exists... require it.
57+
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
5358
}
5459
```
60+
5561
You will also need to declare a new menu in your `functions.php` file if one doesn't already exist.
5662

5763
```php
5864
register_nav_menus( array(
59-
'primary' => __( 'Primary Menu', 'THEMENAME' ),
65+
'primary' => __( 'Primary Menu', 'THEMENAME' ),
6066
) );
6167
```
68+
6269
## Usage
6370

6471
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.
6572

6673
```php
6774
wp_nav_menu( array(
68-
'theme_location' => 'primary',
69-
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
70-
'container' => 'div',
71-
'container_class' => 'collapse navbar-collapse',
72-
'container_id' => 'bs-example-navbar-collapse-1',
73-
'menu_class' => 'navbar-nav mr-auto',
74-
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
75-
'walker' => new WP_Bootstrap_Navwalker(),
75+
'theme_location' => 'primary',
76+
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
77+
'container' => 'div',
78+
'container_class' => 'collapse navbar-collapse',
79+
'container_id' => 'bs-example-navbar-collapse-1',
80+
'menu_class' => 'navbar-nav mr-auto',
81+
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
82+
'walker' => new WP_Bootstrap_Navwalker(),
7683
) );
7784
```
7885

7986
Your menu will now be formatted with the correct syntax and classes to implement Bootstrap dropdown navigation.
8087

81-
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.
8289

8390
```php
8491
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
8592
<div class="container">
86-
<!-- Brand and toggle get grouped for better mobile display -->
87-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
88-
<span class="navbar-toggler-icon"></span>
89-
</button>
90-
<a class="navbar-brand" href="#">Navbar</a>
91-
<?php
92-
wp_nav_menu( array(
93-
'theme_location' => 'primary',
94-
'depth' => 2,
95-
'container' => 'div',
96-
'container_class' => 'collapse navbar-collapse',
97-
'container_id' => 'bs-example-navbar-collapse-1',
98-
'menu_class' => 'nav navbar-nav',
99-
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
100-
'walker' => new WP_Bootstrap_Navwalker(),
101-
) );
102-
?>
103-
</div>
93+
<!-- Brand and toggle get grouped for better mobile display -->
94+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
95+
<span class="navbar-toggler-icon"></span>
96+
</button>
97+
<a class="navbar-brand" href="#">Navbar</a>
98+
<?php
99+
wp_nav_menu( array(
100+
'theme_location' => 'primary',
101+
'depth' => 2,
102+
'container' => 'div',
103+
'container_class' => 'collapse navbar-collapse',
104+
'container_id' => 'bs-example-navbar-collapse-1',
105+
'menu_class' => 'nav navbar-nav',
106+
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
107+
'walker' => new WP_Bootstrap_Navwalker(),
108+
) );
109+
?>
110+
</div>
104111
</nav>
105112
```
106113

107114
To change your menu style add Bootstrap nav class names to the `menu_class` declaration.
108115

109116
Review options in the Bootstrap docs for more information on [nav classes](https://getbootstrap.com/components/#nav).
110117

111-
112118
### Displaying the Menu
113119

114120
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.
@@ -119,12 +125,13 @@ There has been some interest in making this walker the default walker for all me
119125

120126
```php
121127
function prefix_modify_nav_menu_args( $args ) {
122-
return array_merge( $args, array(
123-
'walker' => WP_Bootstrap_Navwalker(),
124-
) );
128+
return array_merge( $args, array(
129+
'walker' => WP_Bootstrap_Navwalker(),
130+
) );
125131
}
126132
add_filter( 'wp_nav_menu_args', 'prefix_modify_nav_menu_args' );
127133
```
134+
128135
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.
129136

130137
### Menu Caching
@@ -133,31 +140,32 @@ On some sites generating a large menu that rarely ever changes on every page req
133140

134141
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.
135142

136-
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/>
137144

138145
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.
139146

140147
See also:
141-
- https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
142-
- https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php
148+
149+
- <https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/>
150+
- <https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php>
143151

144152
### Extras
145153

146154
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).
147155

148156
#### Icons
149157

150-
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`.
151159

152160
#### Icon-Only Items
153161

154162
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.
155163

156164
#### Disabled Links
157165

158-
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._
159167

160-
#### Dropdown Headers, Dropdown Dividers & Dropdown Item Text.
168+
#### Dropdown Headers, Dropdown Dividers & Dropdown Item Text
161169

162170
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._
163171

class-wp-bootstrap-navwalker.php

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
<?php
22
/**
3-
* WP Bootstrap Navwalker
3+
* WP Bootstrap Navwalker.
44
*
55
* @package WP-Bootstrap-Navwalker
6-
*/
7-
8-
/*
9-
* Class Name: WP_Bootstrap_Navwalker
6+
*
7+
* @wordpress-plugin
108
* Plugin Name: WP Bootstrap Navwalker
119
* Plugin URI: https://github.com/wp-bootstrap/wp-bootstrap-navwalker
1210
* Description: A custom WordPress nav walker class to implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in menu manager.
1311
* Author: Edward McIntyre - @twittem, WP Bootstrap, William Patton - @pattonwebz
14-
* Version: 4.1.0
12+
* Version: 4.3.0
1513
* Author URI: https://github.com/wp-bootstrap
1614
* GitHub Plugin URI: https://github.com/wp-bootstrap/wp-bootstrap-navwalker
1715
* GitHub Branch: master
1816
* License: GPL-3.0+
1917
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
20-
*/
18+
*/
2119

2220
/* Check if Class Exists. */
2321
if ( ! class_exists( 'WP_Bootstrap_Navwalker' ) ) {
@@ -74,7 +72,7 @@ public function start_lvl( &$output, $depth = 0, $args = array() ) {
7472
// with pointer at end of array check if we got an ID match.
7573
if ( end( $matches[2] ) ) {
7674
// build a string to use as aria-labelledby.
77-
$labelledby = 'aria-labelledby="' . end( $matches[2] ) . '"';
75+
$labelledby = 'aria-labelledby="' . esc_attr( end( $matches[2] ) ) . '"';
7876
}
7977
$output .= "{$n}{$indent}<ul$class_names $labelledby role=\"menu\">{$n}";
8078
}
@@ -198,6 +196,8 @@ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0
198196
}
199197
}
200198

199+
$atts['aria-current'] = $item->current ? 'page' : '';
200+
201201
// update atts of this item based on any custom linkmod classes.
202202
$atts = self::update_atts_for_linkmod_type( $atts, $linkmod_classes );
203203
// Allow filtering of the $atts array before using it.
@@ -245,7 +245,7 @@ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0
245245
}
246246

247247
/** This filter is documented in wp-includes/post-template.php */
248-
$title = apply_filters( 'the_title', $item->title, $item->ID );
248+
$title = apply_filters( 'the_title', esc_html( $item->title ), $item->ID );
249249

250250
/**
251251
* Filters a menu item's title.
@@ -264,7 +264,7 @@ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0
264264
*/
265265
if ( in_array( 'sr-only', $linkmod_classes, true ) ) {
266266
$title = self::wrap_for_screen_reader( $title );
267-
$keys_to_unset = array_keys( $linkmod_classes, 'sr-only' );
267+
$keys_to_unset = array_keys( $linkmod_classes, 'sr-only', true );
268268
foreach ( $keys_to_unset as $k ) {
269269
unset( $linkmod_classes[ $k ] );
270270
}
@@ -277,8 +277,8 @@ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0
277277
* correct element depending on the type of link or link mod.
278278
*/
279279
if ( '' !== $linkmod_type ) {
280-
// is linkmod, output the required element opener.
281-
$item_output .= self::linkmod_element_close( $linkmod_type, $attributes );
280+
// is linkmod, output the required closing element.
281+
$item_output .= self::linkmod_element_close( $linkmod_type );
282282
} else {
283283
// With no link mod type set this must be a standard <a> tag.
284284
$item_output .= '</a>';
@@ -363,7 +363,7 @@ public static function fallback( $args ) {
363363
if ( $menu_class ) {
364364
$fallback_output .= ' class="' . esc_attr( $menu_class ) . '"'; }
365365
$fallback_output .= '>';
366-
$fallback_output .= '<li><a href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '" title="' . esc_attr__( 'Add a menu', 'wp-bootstrap-navwalker' ) . '">' . esc_html__( 'Add a menu', 'wp-bootstrap-navwalker' ) . '</a></li>';
366+
$fallback_output .= '<li class="nav-item"><a href="' . esc_url( admin_url( 'nav-menus.php' ) ) . '" class="nav-link" title="' . esc_attr__( 'Add a menu', 'wp-bootstrap-navwalker' ) . '">' . esc_html__( 'Add a menu', 'wp-bootstrap-navwalker' ) . '</a></li>';
367367
$fallback_output .= '</ul>';
368368
if ( $container ) {
369369
$fallback_output .= '</' . esc_attr( $container ) . '>';

0 commit comments

Comments
 (0)