I’m trying to change the svg of the ellipses for the mobile menu. It’s called in this file: template-functions.php so I did a hook on my child theme functions.php to replace it, like so:
function replace_ellipses() {
if ( function_exists('twentynineteen_add_ellipses_to_nav') ) {
remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 );
}
function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {
if ( 'menu-1' === $args->theme_location ) :
$nav_menu .= '<div class="main-menu-more">';
$nav_menu .= '<ul class="main-menu">';
$nav_menu .= '<li class="menu-item menu-item-has-children">';
$nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
$nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
$nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );
$nav_menu .= '</button>';
$nav_menu .= '<ul class="sub-menu hidden-links">';
$nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
$nav_menu .= '<button class="menu-item-link-return">';
$nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
$nav_menu .= esc_html__( 'Back', 'twentynineteen' );
$nav_menu .= '</button>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</div>';
endif;
return $nav_menu;
}
add_filter( 'wp_nav_menu', 'twentynineteen_add_new_ellipses_to_nav', 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'replace_ellipses', 0 );
I then changed the line: $nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );
to reference the new one: $nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );
The function works, however the svg is not being loaded. The icons are defined as svg code in the file class-twentynineteen-svg-icons.php inside classes folder. I thought in replicating the classes folder in my child theme with the new svg code, doesn't work.
There is also in Twentynineteen the file inc/icon-functions.php with the function:
function twentynineteen_get_icon_svg( $icon, $size = 24 ) {
return TwentyNineteen_SVG_Icons::get_svg( 'ui', $icon, $size );
}
Do I need to hook to this function?
I’m trying to change the svg of the ellipses for the mobile menu. It’s called in this file: template-functions.php so I did a hook on my child theme functions.php to replace it, like so:
function replace_ellipses() {
if ( function_exists('twentynineteen_add_ellipses_to_nav') ) {
remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 );
}
function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {
if ( 'menu-1' === $args->theme_location ) :
$nav_menu .= '<div class="main-menu-more">';
$nav_menu .= '<ul class="main-menu">';
$nav_menu .= '<li class="menu-item menu-item-has-children">';
$nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
$nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
$nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );
$nav_menu .= '</button>';
$nav_menu .= '<ul class="sub-menu hidden-links">';
$nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
$nav_menu .= '<button class="menu-item-link-return">';
$nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
$nav_menu .= esc_html__( 'Back', 'twentynineteen' );
$nav_menu .= '</button>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</div>';
endif;
return $nav_menu;
}
add_filter( 'wp_nav_menu', 'twentynineteen_add_new_ellipses_to_nav', 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'replace_ellipses', 0 );
I then changed the line: $nav_menu .= twentynineteen_get_icon_svg( 'arrow_drop_down_ellipsis' );
to reference the new one: $nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );
The function works, however the svg is not being loaded. The icons are defined as svg code in the file class-twentynineteen-svg-icons.php inside classes folder. I thought in replicating the classes folder in my child theme with the new svg code, doesn't work.
There is also in Twentynineteen the file inc/icon-functions.php with the function:
function twentynineteen_get_icon_svg( $icon, $size = 24 ) {
return TwentyNineteen_SVG_Icons::get_svg( 'ui', $icon, $size );
}
Do I need to hook to this function?
Share Improve this question asked Apr 1, 2019 at 9:45 Duarte NunesDuarte Nunes 637 bronze badges1 Answer
Reset to default 3Ok, this is what I did: First, I replicated classes/class-twentynineteen-svg-icons.php to the child theme. Renamed to class-mytheme-svg-icons.php.
Added a extend with my New_SVG_Icons class:
class New_SVG_Icons extends TwentyNineteen_SVG_Icons {
/**
* Gets the SVG code for a given icon.
*/
public static function get_svg( $group, $icon, $size ) {
if ( 'ui' == $group ) {
$arr = self::$ui_icons;
} elseif ( 'social' == $group ) {
$arr = self::$social_icons;
} else {
$arr = array();
}
if ( array_key_exists( $icon, $arr ) ) {
$repl = sprintf( '<svg class="svg-icon" width="%d" height="%d" aria-hidden="true" role="img" focusable="false" ', $size, $size );
$svg = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
$svg = preg_replace( "/([\n\t]+)/", ' ', $svg ); // Remove newlines & tabs.
$svg = preg_replace( '/>\s*</', '><', $svg ); // Remove white space between SVG tags.
return $svg;
}
return null;
}
/**
* User Interface icons – svg sources.
*
* @var array
*/
static $ui_icons = array(
'new_drop_down_ellipsis' => /* custom – ao_drop_down_ellipsis */ '
<svg xmlns="http://www.w3/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M2 2v20h20V2H2zm4 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
</svg>',
);
}
Back to the functions.php of the child theme I added the path for the replicated file:
function include_extra_svg() {
require_once get_theme_file_path( 'classes/class-mytheme-svg-icons.php' );
}
add_action( 'wp_enqueue_scripts', 'include_extra_svg' );
Then I reference this function and class on the one I had before:
function replace_ellipses() {
if ( function_exists('twentynineteen_add_ellipses_to_nav') ) {
remove_filter( 'wp_nav_menu', 'twentynineteen_add_ellipses_to_nav', 10, 2 );
}
function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) {
function mytheme_get_icon_svg( $icon, $size = 24 ) {
return New_SVG_Icons::get_svg( 'ui', $icon, $size );
}
if ( 'menu-1' === $args->theme_location ) :
$nav_menu .= '<div class="main-menu-more">';
$nav_menu .= '<ul class="main-menu">';
$nav_menu .= '<li class="menu-item menu-item-has-children">';
$nav_menu .= '<button class="submenu-expand main-menu-more-toggle is-empty" tabindex="-1" aria-label="More" aria-haspopup="true" aria-expanded="false">';
$nav_menu .= '<span class="screen-reader-text">' . esc_html__( 'More', 'twentynineteen' ) . '</span>';
$nav_menu .= mytheme_get_icon_svg( 'ao_drop_down_ellipsis' );
$nav_menu .= '</button>';
$nav_menu .= '<ul class="sub-menu hidden-links">';
$nav_menu .= '<li id="menu-item--1" class="mobile-parent-nav-menu-item menu-item--1">';
$nav_menu .= '<button class="menu-item-link-return">';
$nav_menu .= twentynineteen_get_icon_svg( 'chevron_left' );
$nav_menu .= esc_html__( 'Back', 'twentynineteen' );
$nav_menu .= '</button>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</li>';
$nav_menu .= '</ul>';
$nav_menu .= '</div>';
endif;
return $nav_menu;
}
add_filter( 'wp_nav_menu', 'twentynineteen_add_new_ellipses_to_nav', 10, 2 );
}
add_action( 'wp_enqueue_scripts', 'replace_ellipses', 0 );
et voilà! I'm not sure if it's the best approach, however it's working.