menus – Trying to add a custom social icon to a Twenty Twenty-One child theme

Question

I am trying to add an icon to the Twenty Twenty-One social icons, but having trouble registering it.

This support article refers to a Themes field guide for WordPress 5.5 which gives instructions on how to add a custom icon and hook it in so that it appears when the relevant url is typed in as a menu item custom link.

I copied the function from the Field Guide, changing the hook to match 2021 theme rather than 2020 (since the hook in twentytwentyone/classes/class-twenty-twenty-one-svg-icons.php is twenty_twenty_one_svg_icons_social).

Here are the functions I added to functions.php: (apologies — including full svg vectors in case they are causing the error)

function mychildtheme_twenty_twenty_one_social_icons_map( $icons ) {
    $icons['rhs-calendar'] = array(
        'rhs-1.test',
        'rhs-1.test/events/list/',
    );

    return $icons;
}
add_filter( 'twenty_twenty_one_social_icons_map', 'mychildtheme_twenty_twenty_one_social_icons_map' );

// add the calendar icon
function mychildtheme_twenty_twenty_one_svg_icons_social( $icons ) {
    $icons['rhs-calendar'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill-rule="evenodd" d="M 6.75,0 C 7.1642136,0 7.5,0.33578644 7.5,0.75 V 3 h 9 V 0.75 c 0,-0.99999957 1.5,-0.99999957 1.5,0 V 3 h 2.75 c 0.966,0 1.75,0.784 1.75,1.75 v 16 c 0,0.966498 -0.783502,1.75 -1.75,1.75 H 3.25 C 2.2835017,22.5 1.5,21.716498 1.5,20.75 v -16 C 1.5,3.784 2.284,3 3.25,3 H 6 V 0.75 C 6,0.33578644 6.3357864,0 6.75,0 Z M 21,7.9375 H 3 V 20.75 C 3,20.888 3.112,21 3.25,21 h 17.5 C 20.888071,21 21,20.888071 21,20.75 Z" id="path833" sodipodi:nodetypes="ssccsscsssssssscssccssssc" />
      <path d="m 7.2944571,17.386715 h 4.1851359 v 1.803463 H 4.9127844 v -0.743412 q 0,-0.75718 0.2546876,-1.356039 0.2546875,-0.605744 0.6401605,-1.080702 0.3854731,-0.481841 0.8397806,-0.846664 0.4611909,-0.371706 0.8741978,-0.667694 0.4336571,-0.309755 0.7571791,-0.591976 0.3304055,-0.282222 0.5506758,-0.55756 0.2271538,-0.282221 0.3372889,-0.564442 0.1101352,-0.289105 0.1101352,-0.612627 0,-0.633277 -0.3579393,-0.956799 -0.3579392,-0.323522 -1.0944681,-0.323522 -1.2734377,0 -2.4367402,1.011866 V 9.9870092 q 1.2872046,-0.8328971 2.9048146,-0.8328971 0.7502958,0 1.3422722,0.19962 0.5988599,0.1927365 1.0118669,0.5575592 0.413007,0.3648227 0.626394,0.8879647 0.22027,0.516258 0.22027,1.156419 0,0.681461 -0.213387,1.211487 -0.206503,0.530025 -0.557559,0.963682 -0.344173,0.433657 -0.7984801,0.79848 Q 9.4696264,15.287263 8.9809016,15.624552 8.6504962,15.85859 8.3407411,16.092627 8.0378694,16.31978 7.8038322,16.546934 7.569795,16.767205 7.432126,16.980591 7.2944571,17.193978 7.2944571,17.386715 Z" />
    <path d="m 12.97644,18.93549 v -1.85853 q 1.011866,0.61951 2.154518,0.61951 0.860431,0 1.342273,-0.406123 0.488724,-0.413007 0.488724,-1.115119 0,-1.466174 -2.071917,-1.466174 -0.764063,0 -1.762163,0.117018 l 0.371707,-5.5067572 h 5.224536 v 1.7759292 h -3.565626 l -0.137669,1.975549 q 0.530026,-0.0413 0.915499,-0.0413 1.521242,0 2.381672,0.79848 0.860431,0.79848 0.860431,2.147635 0,1.493708 -1.025633,2.443624 -1.025634,0.943032 -2.780913,0.943032 -1.424873,0 -2.395439,-0.426774 z"/>
  </g>
    </svg>';
    return $icons;
}

add_filter( 'twenty_twenty_one_svg_icons_social', 'mychildtheme_twenty_twenty_one_svg_icons_social' );

The new functions and filters throw this error:

Warning: preg_match(): Unknown modifier 'v' in C:laragonwwwrhs-1wp-contentthemestwentytwentyone
classesclass-twenty-twenty-one-svg-icons.php on line 243

The relevant line in class-twenty-twenty-one-svg-icons.php:

242 foreach ( $regex_map as $icon => $regex ) {
243         if ( preg_match( $regex, $uri ) ) {
244             return self::get_svg( 'social', $icon, $size ) . '<span class="screen-reader-text">';
245         }
246     }

Now, the instructions in this answer include the icon in the “icons_map” function in a completely different way, should I be doing it like that?

Secondly, per that answer, I’m not sure I understand if and why I would have to unhook the parent theme social icons?

Third, am I pushing my luck if I also want to use this icon in the Gutenberg “Social Icons” block, or is there some other way to include the social icons (secondary) menu as a Gutenberg block?

0
Rickmakeitquick 1 month 2021-07-02T18:07:55-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse