FBJILI Com download.Claim Your Free 999 Pesos Bonus Today

Reply To: 2021 Social Icons

MaxD — Wed, 07 Apr 2021 12:34:21 +0000

Hi,

For the 2021 theme the filter names have changed. It looks like you are just missing some “_” characters.

The filters from class Twenty_Twenty_One_SVG_Icons are as follows:

twenty_twenty_one_svg_icons_ui
twenty_twenty_one_svg_icons_social
twenty_twenty_one_svg_icons_
twenty_twenty_one_social_icons_map

E.g. Change:
twentytwentyone_social_icons_map
to
twenty_twenty_one_social_icons_map

Do this for all your filters and see if the changes work.

Reply To: 2021 Social Icons

robertwinter — Thu, 08 Apr 2021 08:29:00 +0000

@max-dayala Absolute legend! Works perfectly now. ??

Reply To: 2021 Social Icons

robertwinter — Thu, 08 Apr 2021 09:03:55 +0000

@max-dayala One follow-up question if I may. Is it possible to assign an icon to a page? For example, everything is at the domain level, e.g. social.winter.ink. But is it possible to set one icon for social.winter.ink/privacy/ and another for social.winter.ink/disclaimer/

Reply To: 2021 Social Icons

MaxD — Thu, 08 Apr 2021 13:57:48 +0000

I don’t think that will work for a child theme since the code only supports matching on a domain. (For a full theme you could rewrite the appropriate bit of code so that it works with a domain and path.)

Hence, if you need to show both icons on the same wordpress page it won’t work.

I guess that if you only need to show one of the two icons on each WP page then in theory you could adapt your filter functions to do just that.

Reply To: 2021 Social Icons

robertwinter — Fri, 09 Apr 2021 23:02:10 +0000

@max-dayala many thanks for the reply.

After a bit of experimenting, I worked out it is even easier than having to program the changes in a new theme. It seems you just need to use the slug for the url. For example, I can create an icon for my privacy page by adding:

function mychildtheme_twenty_twenty_one_social_icons_map( $icons ) {
    $icons['privacy'] = array(
        'privacy',
    );

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

function mychildtheme_twenty_twenty_one_svg_icons_social( $icons ) {
    $icons['privacy'] = '';

    return $icons;
}
add_filter( 'twenty_twenty_one_svg_icons_social', 'mychildtheme_twenty_twenty_one_svg_icons_social' );

Reply To: 2021 Social Icons

amanda blum — Tue, 07 Sep 2021 21:50:26 +0000

Any idea why the above code would sub the svg icons correctly but NOT pull new height/width? In twenty twenty-one, I’m subbing the plus/minus in the main nav with an up/down carot. Sidenote: this was coded to a custom plugin, not to the functions file in the theme.


/* CHANGE PLUS MINUS ICONS IN MAIN NAV
================================================== */
function clitheme_twenty_twenty_one_svg_icons_ui( $icons ) {
    $icons['plus'] = '';
	  $icons['minus'] = '';
 
    return $icons;
}
add_filter( 'twenty_twenty_one_svg_icons_ui', 'clitheme_twenty_twenty_one_svg_icons_ui' );

Note the new height/width in the code above, but the rendered output on front end still shows 18px height/width, which comes from the original svg file in classes.

svg[Attributes Style] {
    width: 18;
    height: 18;
}

Reply To: 2021 Social Icons

MaxD — Thu, 30 Sep 2021 16:14:49 +0000

Hi,

In this case it looks like the CSS declaration has a higher precedence than the svg height and width attributes.

I can think of a couple of things to try.

The first would be to add a class attribute to the svg element and then add some CSS to override the svg[Attributes Style] declaration.

A second approach might be to set an inline style attribute in the svg element. I think this would have a higher precedence than the value in the style sheet, although without trying it I’m not 100% certain of that.

Anyway, a couple of things to try if you haven’t already solved it.

Reply To: 2021 Social Icons

MaxD — Fri, 01 Oct 2021 11:22:45 +0000

What I would also say is that you shouldn’t be trying to set the size in the svg element in the first place since the size is added later on.

For the menu you have this in menu-functions.php that sets the height to 18:

/**
 * Add a button to top-level menu items that has sub-menus.
 * An icon is added using CSS depending on the value of aria-expanded.
 *
 * @since Twenty Twenty-One 1.0
 *
 * @param string $output Nav menu item start element.
 * @param object $item   Nav menu item.
 * @param int    $depth  Depth.
 * @param object $args   Nav menu args.
 *
 * @return string Nav menu item start element.
 */
function twenty_twenty_one_add_sub_menu_toggle( $output, $item, $depth, $args ) {
	if ( 0 === $depth && in_array( 'menu-item-has-children', $item->classes, true ) ) {

		// Add toggle button.
		$output .= '';
	}
	return $output;
}

If I look at a menu the code is like this:

Hence, I would say that your best bet would be to resize your svg image to be the “correct” size you want it to be in your drawing package, rather than try and tweak it with the rendered size in the browser. If you try and change just the one svg character with CSS then you might have alignment issues to sort out as well.

Another point is that you should copy the start of the svg tags exactly as they are in the original code, unless you have a good reason to change them.

An interesting point that follows on from this is that there looks to be a bug with the social icons because they specify the height and width. This results in the height and width attributes appearing twice in the svg string once it has been processed… but that is a separate issue.