1

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?

2

Ok, 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.org/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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.