anoktear

That’s it @edge22 , thank you so much.
What a great support experience for a WordPress theme.

• This reply was modified 3 years, 3 months ago by anoktear.

Hi @ejcabquina,

I would like to change this line on that function:

$mobile_menu = apply_filters( 'generate_mobile_menu_media_query', $mobile );

to another media query value:

$mobile_menu = apply_filters( 'generate_mobile_menu_media_query', '(max-width:1920px)' );

I didn’t want to change in /inc/theme-functions, I understand that is best to place in the child theme functions.php.

I tried using the if function_exists, but I must be doing it wrong.

Thanks

Update: Some more tests by using the Material plugin. I added a material form to a page, it works. However, when adding the form to Widgets, it won’t apply the floating labels. So the problem is front-end.js not being applied inside widgets?

Hello @pbearne

It’s a strange behaviour, front-end.js is added to the footer of the child theme using the plugin. However, floating labels won’t work.

If I turn off the plugin and enqueue front-end.js and the quickstart CDN in functions.php of the child theme, then it works fine.

functionmaterial_enqueue_style() {

wp_enqueue_style( 'material-style', 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css');

wp_enqueue_script( 'material-script', 'https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js', array(), null, true);

wp_enqueue_script( 'material-front-end', get_stylesheet_directory_uri().'/assets/js/front-end.js', array(), null, true);

}

add_action( 'wp_enqueue_scripts', 'material_enqueue_style' )

Conclusion, floating labels won’t work just by turning on the material plugin. I have this same behaviour in all default WordPress themes. Attention that my form is inside a custom plugin, is this relevant?

I checked what the Material theme was doing and copied the Material theme front-end.js into the GeneratePress child theme, enqueued the script on functions.php and it works.

Questions: Is the JS file provided by the Material plugin not enough without using the Material theme? Or was it because I have the form in a plugin? Food for thought.

Well @leohsiang the Twenty series were giving the same problem.

However, I checked what the Material theme was doing and copied the Material theme front-end.js into the GeneratePress child theme, enqueued the script and it works.
I guess this front-end.js is more complete than the one provided.

HI @leohsiang.

I also tested by using the Material Design theme included in the plugin and it works. However, I’m using GeneratePress and it doesn’t, isn’t this a theme issue?

Yes, I tried asking on their support, but no answer.

Without using the plugin and just linking the CDN quick start on the functions.php I have the same result. Can you help me instantiate the JavaScript on the child theme?

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="https://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.

• This reply was modified 5 years, 7 months ago by anoktear.

The question for me is how to reference the classes/class-twentynineteen-svg-icons.php in the child theme.

Hi @whonickedmyname .
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:
$nav_menu .= twentynineteen_get_icon_svg( 'new_arrow_drop_down_ellipsis' );

new_arrow_drop_down_ellipsis is the svg code that I am calling for the icon.
The icons are defined as svg code in the file class-twentynineteen-svg-icons.php inside classes folder.
What I did was recreate this folder and file in my child theme and place the svg code for the new icon with the new_arrow_drop_down_ellipsis id.

The function works, however the svg is not being loaded…

Hi Andrew,
After more testing, this issue seems to be related to my local hosting setup.

Thank you for pointing it out Fabian. Great plugin.

Hello Alex @seville76,
Sorry for the late reply, it’s for a custom plugin that I am trying to build, called Event Manager.

The problem is that when I’m in the event that behaves like a post, the language switcher won’t link to the translated post.

Getting the same error since yesterday.

This is the 3rd reply I post that gets erased …
Well, I will just keep posting until we get an answer.