Support » Theme: Twenty Twenty » How to add a custom social icon

  • Resolved yuta73

    (@yuta73)


    According to https://wordpress.com/support/menus/social-links-menu/
    WhatsApp is not supported. Customizing the menu, added a custom link to https://wa.me/<phone number> and it works perfectly well, but I get a LINK icon instead of a WHATSAPP icon.
    I have my .svg file ready, but I have no idea where to add the code Or where to put this file.

    If possible, I’d like a solution without having to implement a child theme. But if it’s the only option, I guess I’ll take that path anyway.

    • This topic was modified 1 year, 2 months ago by yuta73.
Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    The current version of Twenty Twenty does include WhatsApp: https://wordpress.org/support/article/twenty-twenty/#add-social-icons

    You’ll need to use the full whatsapp.com link, not the wa.me shortlink.

    Thread Starter yuta73

    (@yuta73)

    Sorry, but it didn’t work either.
    Apparently no TLD is declared for WhatsApp. Do you know where can I report it?.

    /**
    * Social Icons – domain mappings.
    *
    * By default, each Icon ID is matched against a .com TLD. To override this behavior,
    * specify all the domains it covers (including the .com TLD too, if applicable).
    *
    * @var array
    */
    public static $social_icons_map = array(
    ‘amazon’ => array(
    ‘amazon.com’,
    ‘amazon.cn’,
    ‘amazon.in’,
    ‘amazon.fr’,
    ‘amazon.de’,
    ‘amazon.it’,
    ‘amazon.nl’,
    ‘amazon.es’,
    ‘amazon.co’,
    ‘amazon.ca’,
    ),
    ‘behance’ => array(
    ‘behance.net’,
    ),
    ‘codepen’ => array(
    ‘codepen.io’,
    ),
    ‘facebook’ => array(
    ‘facebook.com’,
    ‘fb.me’,
    ),
    ‘feed’ => array(
    ‘feed’,
    ),
    ‘google’ => array(
    ‘g.page’,
    ),
    ‘lastfm’ => array(
    ‘last.fm’,
    ),
    ‘mail’ => array(
    ‘mailto:’,
    ),
    ‘pocket’ => array(
    ‘getpocket.com’,
    ),
    ‘tiktok’ => array(
    ‘tiktok.com’,
    ),
    ‘twitch’ => array(
    ‘twitch.tv’,
    ),
    ‘wordpress’ => array(
    ‘wordpress.com’,
    ‘wordpress.org’,
    ),
    );

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    That’s just an override for defaults:

    By default, each Icon ID is matched against a .com TLD.

    At line 257 in that file:

    'whatsapp' => '<svg width="24"

    That means that by default Twenty Twenty looks for whatsapp.com

    What version of Twenty Twenty are you using, and what is the full link you’re using?

    Thread Starter yuta73

    (@yuta73)

    I tried using your recomendation but it didn’t work. May be WhatsApp dropped support for that format.
    At least, is not listed in https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/.
    Never mind, I overrode full TwentyTwenty_SVG_Icons class in a child theme.
    Thanks for your support!
    This is my site: https://sembrado.com.ar/

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    What version of Twenty Twenty are you using, and what is the full link you’re using?

    Thread Starter yuta73

    (@yuta73)

    Versión: 1.4
    No necessary updates reported.

    I gave you the full link. You should be able to see it.

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    No, you gave me “https://wa.me/<phone number>”

    But anyway, I went to your site and found it there.

    You used https://wa.me/+541137818734 and as I mentioned almost 4 days ago https://wordpress.org/support/topic/how-to-add-a-custom-social-icon/#post-13043950 you needed to use https://whatsapp.com/+541137818734 instead. Which, without any modification to the theme’s code, works: https://d.pr/i/QIDjGe

    Thread Starter yuta73

    (@yuta73)

    James, I followed your suggestion and tryed using the https://whatsapp.com/+541137818734 format. But that format is not recognized by whatsapp, it just says that the page doesn’t exist.
    Even so, when I use the link you suggest, the WhatsApp icon is not shown. I tried. I don’t know why but it’s now shown. I leave it set like you suggest for a couple of days, so you can check it yourself.

    I’ve already solved my problem, I just want to report somewhere of the error/s.

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Hm, the link works just fine for me on WordPress 5.4.2 running Twenty Twenty 1.4, so that would suggest either:

    1. You’re not running Twenty Twenty 1.4.

    2. There’s a conflict elsewhere. Please attempt to disable all plugins. If the problem goes away, enable them one by one to identify the source of the problem.

    If you can install plugins, install Health Check. On the troubleshooting tab, you can click the button to disable all plugins for you, while you’re still logged in, without affecting normal visitors to your site.

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Whoops, forgot part 2, for the link try: https://api.whatsapp.com/send?phone=+541137818734

    Thread Starter yuta73

    (@yuta73)

    OK, using

    https://api.whatsapp.com/send?phone=+541137818734

    everything works as intented. Thanks for all your dedicated time.

    I had to disable the modification of TwentyTwenty_SVG_Icons class on the theme child, as it was the cause for the whatsapp icon not showing when using whatsapp.com as link.

    Nevertheless, I consider important to give support for

    wa.me

    as it’s the only documented mode on the official page.
    https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/

    Moderator James Huff

    (@macmanx)

    Volunteer Moderator

    Excellent, I agree and have filed it at https://core.trac.wordpress.org/ticket/50542 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to add a custom social icon’ is closed to new replies.