Tag: Wordpress

Add icons to Jetpack Social Menu

I have been looking around the net quite a lot to find a solution on how to add icons to the "social menu" in wordpress:

At first I thought this menu was a feature of the theme I am using, Independent Publisher 2. I only found a Github repo for the version 1 theme - tried all the hacks there - and finally found out that version 2 was bought by WordPress.com and customized. So all the hacks available for version 1 did not even work. Bummer.

I really wanted to finally have icons for Mastodon, Hackster, Keybase or the RSS feed - so I looked into the file system - and look and behold, I found the path which actually does all the "heavy lifting": 

wp-content/plugins/jetpack/modules/theme-tools/social-menu

Turns out, this menu is actually generated as part of the WordPress Jetpack and its Social Menu part.

To add to its library is very simple (even though not documented...):

  • Look up SVG icons, maybe from a free website like https://simpleicons.org/
  • Download the svg file and open in notepad or other editor, it will look like this:
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-[...]2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
  • You will need to change the "symbol" element to svg, set an name/id, remove role item and xmlns as well as the title. It will then look like this:
<symbol id="icon-mastodon" viewBox="0 0 24 24"><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-[...]2 1.81 1.012 3.12z"/></symbol>
  • Add this new object into the social-menu.svg before the closing </defs></svg> tag and save the file
  • Open the icon-functions.php and add some entries to the $social_links_icons array. The binding is basically URL Path/Matching => Icon ID in the social-menu.svg. so to add e.g. the Keybase.io, Mastodon (on chaos.social) and Hackster.io icons I added:
			'keybase.io'       => 'keybase',
			'chaos.social'       => 'mastodon',
			'hackster.io'       => 'hackster',
		);
  • Save and close the file, if you now add a new custom element/external link to your social bar e.g. containing keybase.io in the URL, it will show up as the newly added keybase icon.

Blog Defacement

While I am now hosting this blog for nearly 9 years - without any incident - problems tend to happen sooner or later. A lot of hassle and problems has been reduced due to the WordPress Auto Update system - so to update WordPress itself, as well as its plugins - and it works great. However, WordPress introduced - and enabled by default - a REST API - which has a great deal of security problems. And without me always checking each installed version - well, I did not know that... The REST API problems should be fixed by now, but - that came a bit too late for my blog. Nonetheless, I would recommend going to Jetpack -> Settings and disabling JSON API - especially if you're not using it... I learned it the hard way ^^'..

PS: If you disable it, WordPress.com won't be able to talk to your website anymore so... You're gonna have a bad time, if you need that :/. You'll need to decide for yourself...

Regards