For some time, I’ve wanted to update the social network icons on my primary blog to use icons that accurately represent the social networks concerned.

There have been many changes this year – not the least being Twitter’s change to X – plus the emergence of new social networks like Pebble, Bluesky, and Threads.

As my sites all run on WordPress, I use some pretty good free plugins for features such as linking to social networks, and sharing content with social networks. These are two separate functions.

Whatever the function, the presentation of each social network uses icons to indicate which network you want to visit or share content with. And all the plugins I’ve found, including the ones I use, are not up to date with social network icons. Some even still have Google Plus and the original Twitter icon!

Mastodon’s icon is now included in a number of WordPress plugins. X and Threads are gradually appearing on the web although I’ve not seen them in plugins yet.

So I decided to create my own plugins, starting with one for linking to my network profiles. This is for my blog’s home page and lets visitors go to one of the places where I have a presence. This is a common feature on most websites today.

I’ll explain how I did this but first, here’s the outcome:

You can see a row of small social icons beneath the photo of me at the top right on the home page. You may not be familiar with all of them, so here’s each from left to right: Pebble, X, Bluesky, Mastodon, Threads, LinkedIn, Facebook, and Instagram.

All up to date and future-proofed: I can easily update the icon if any changes. It all looks pretty smart to my eye!

These are my primary networks; as I’m on a few more, underneath those icons is a QR code that will take you to my full list of links at linktr.ee/nevillehobson.

As for how I created the plugin, I employed a skilled assistant, ChatGPT-4, that comes only with ChatGPT PLUS, the paid service. It’s rather good at writing code, in this case, PHP.

In simple terms, I told ChatGPT what I wanted it to do, where it should look for style references, and to create a full instruction guide on adding the plugin to my WordPress site and activating it.

While my little project would be regarded as extremely simple to a seasoned WordPress plugin developer, this was my first successful attempt at creating a plugin. For ChatGPT-4, it was a breeze aided, I like to think, by my well-crafted prompts :)

This is the PHP code the chatbot created and that I used as the foundation for what I needed:

<?php
/**
 * Plugin Name: Social Media Icons
 * Description: A plugin to display social media icons.
 * Version: 1.0
 * Author: Your Name
 */
 
 function display_social_media_icons() {
    $output = '<div class="social-icons">';
    $output .= '<a href="https://x.com/your_handle" target="_blank"><img src="path/to/x-icon.png"></a>';
    $output .= '<a href="https://pebble.com/your_handle" target="_blank"><img src="path/to/pebble-icon.png"></a>';
    $output .= '<a href="https://bluesky.com/your_handle" target="_blank"><img src="path/to/bluesky-icon.png"></a>';
    $output .= '<a href="https://mastodon.com/your_handle" target="_blank"><img src="path/to/mastodon-icon.png"></a>';
    $output .= '<a href="https://threads.com/your_handle" target="_blank"><img src="path/to/threads-icon.png"></a>';
    $output .= '</div>';
    echo $output;
}
add_shortcode('social_media_icons', 'display_social_media_icons');

function add_social_icons_css() {
    echo '<style>.social-icons img { margin-right: 10px; }</style>';
}
add_action('wp_head', 'add_social_icons_css');

?>

It made a couple of easily-corrected mistakes (wrong base URLs for all networks except X) but otherwise all was good. A quick test on the code by PHP syntax checker showed no coding errors.

I added a few more networks to the list of icons I wanted to display and some comment lines in the PHP file to explain each section.

I’d also prompted ChatGPT for CSS code for styling the new icons display, to match the style of the site and the specific location where I wanted to place them. I added that to the styles.css file of my child theme and removed all style references from the PHP file.

For the final steps, I uploaded the social icon .png files I’d created to the server along with the plugin PHP and CSS files. Then I activated the plugin.

And everything worked!

Using ChatGPT for a task like this saved me about half a day’s work and a lot of time.

If you’d like to use this code for a project like this, feel free to do so under the Creative Commons license terms that apply to content on this site.

Next, let’s build a plugin that enables a reader to share a post on their social networks! Undoubtedly, ChatGPT-4 will take this in its stride.

(Photo at top by Mariia Shalabaieva on Unsplash.)