Sometimes you choose a member for the front line of your WordPress site that just ends up not playing well.
As alluded to in Swapping Out Sputtering SPLOT Plugins a plugin I suggested for the two calling card themes I developed this year, WP-Dimension and WP-Big Picture turned out to be a bad player.
I wanted an easy way for people to create icon-based menus for their social media links. This was designed into the original HTML5 Up Big Picture template in the footer. It was not in the original Dimension template, but since Font-Awesome was already in the theme, in my only hand rolled version, it was easy to add a row of icon media links to the front of my own calling card site.
Of course, in a WordPress theme, it needs to be done in a means that does not involve writing HTML. It was natural to do this via adding a WordPress menu to the theme (I see it in other themes). Via a menu, people can add their social media links, and re-arrange the order in the men editor interface. But how to add icons to them?
I found the Customizer Social Icons plugin which did the trick via the Customizer. It provided a long list of social media sites, plus some visual features for picking the color, size, and spacing of the icons.
Visual editing of menu icons
The only downside was you were limited to social media sites offered by the plugin, you could not have an icon/link to your blog.
All was fine, and people are using the themes.
Well, until about 6 weeks ago, I went into one of my sites using this theme, and when I opened the customizer, I got a lot of nothing:
Hey! Where did my customizer go?
Sporting my investigation mode hat, I looked at the web inspector console, and found a JavaScript error related to the core WordPress load-scripts.php:
Uncaught TypeError: Cannot read property 'replace' of undefined
at Function.m.template (load-scripts.php:25)
at HTMLHeadingElement. (load-scripts.php:28)
at HTMLHeadingElement. (load-scripts.php:3)
at Function.each (load-scripts.php:2)
at a.fn.init.each (load-scripts.php:2)
at Ha (load-scripts.php:3)
at a.fn.init.replaceWith (load-scripts.php:3)
at f.attachEvents (load-scripts.php:9)
at Object. (load-scripts.php:3)
at i (load-scripts.php:2)
But I had no clue what was triggering it. Something in a WordPress Update?
Then it was time to begin the standard process of finding a conflict- turning off plugins one at a time until I found the one that made this happen.
Yup it was the Customizer Social Icons plugin. When I deactivated it, my Customizer worked.
Armed with the information, I left a message in the support forums for the plugin (complete with a typo).
Six weeks ago.
No response.
Time for an end around.
I remembered a slightly different plugin I used in other projects, Font Awesome 4 Menus. If you are not familiar with Font Awesome that’s okay. It’s probably been inside a theme or a web site template you used elsewhere. It’s basically a low bandwidth way to add icons to web sites using CSS classes and a font set. There’s more than 400 icons available.
What the Font Awesome 4 Menus plugin does is offer a way to add icons to a WordPress menu. Once activated, when you go to the menu editor, the first thing you want to do is click the Screen Options tab in the top right, and when the drawer opens, check the box for CSS Classes.
Opening the Screen Options in the menu editor to enable use of the CSS classes form field
You only need to do this once; WordPress will remember from now on. This adds another form entry box to the menu item editor. To add an icon to a menu, you enter the Font Awesome Class Name, like fa-twitter or fa-youtube or fa-github:
The theme is set to only display the icon represented by the class name; but it’s a good idea to include the name of the site as a label so you know what it is for.
If you download a version of the WP-Dimension or WP-Big Picture theme, it is all set to go. You just need to create a new menu, associate its location as social media, add custom links and the CSS classes as listed above.
If you have been using an earlier version of the themes, the icons will still work and your site is fine, but your Customizer cannot be accessed. What you should do is:
- Disable and delete Customizer Social Icons plugin. You will not lose your menus, they will just be plain text for now.
- Update the theme to the newest version. You will have to download from GitHub and ftp to your web site or use the Easy Theme and Plugin Upgrades plugin that allows you to update a theme by uploading the newer version as a Zip file.
- Install and activate the Font Awesome 4 Menus plugin.
- Edit your plugins to add the desired Font Awesome CSS class names as described above.
At least with this new plugin, you can add a link to any site you want AND you can use any of the 400+ icons.
And that’s how we sketch a play to get around a badly performing plugin. It happens.
Featured Image: Modified from Yost tackle over lea.jpg public domain image from Wikimedia Commons. Inverted colors for more contrast, changed “QB” in original to “WP”. Because I can (legally and technically).
