WordPress Database Encoding & the Case of Disappearing Widgets

Recently I was updating the widgets on my homepage to promote the new WP in One Month. I decided to do so with the logo and a caption, making Jetpack’s Image Widget the perfect candidate. I uploaded the logo, added a title, then copy and pasted the text from the website’s ‘Jumbotron’ area for the caption. I clicked ‘Save’ and something strange happened: all of the Image Widgets, everywhere on my site, disappeared. I tried to do the same thing with a Text Widget, thinking maybe there’s a bug in Jetpack’s Image Widget or it doesn’t allow certain text/markup. After going through the same steps and clicking ‘Save’ every Text Widget on the site disappeared. I decided (really, was forced) to do some investigating.

[TL;DR] Here’s the reason: Depending on how your WordPress database is encoded, certain character types will break widgets. The font (Lato) I was using is apparently the culprit, which I figured out with the help of WP Engine Support. There have been lengthly discussions on this.

Here is what I tried and why I thought these steps would resolve the issue. In each, I copy and pasted text directly from WP in One Month’s site:

• Remove all HTML markup from the caption in Jetpack’s Image Widget, then slowly add certain elements back in. I thought perhaps there was broken markup or the Image Widget got rid of some markup.
• Do the same thing for the Text Widget: remove all HTML markup and slowly add it back in, for the same reason as above.
• Try creating the widget on my staging site & locally to rule out it being an issue specific to my live site or WP Engine. I was able to recreate the issue.
• Create a completely different Text Widget with nothing but plain text. This worked. It was around this time I decided I would completely abandon using Jetpack’s Image Widget for this task.
• Create a  Text Widget with some HTML markup.  This and everything below worked.
  • Add more HTML markup.
  • Add an image.
• Copy and Paste the text from WP in One Month into a Plain text editor and then from the plain text editor into the Text Widget. That worked.
  • Add markup and an image to that text. This also worked.

During this time I was communicating back and forth with WP Engine’s Support team while they ran their own tests, including some of what’s above. When I told  them about the last step, they told me it was likely the font compounded with a database encoding issue native to WordPress. I can’t stress how helpful they were, and during a particularly rough week for them too.

For what it’s worth:

• This was the first time in 12 years using WordPress I ran into this issue.
• I am using Lato by Google Fonts on WP in One Month. That’s the font of the text I was trying to copy/paste.
• I plan on copying text from other areas of the site and pasting it into Text Widgets to see what happens.

I’m still a little fuzzy on if there is an actual resolution in place. My site has been on WordPress for years now – I’m not sure if new, clean WordPress installs still have an encoding problem. There are instructions on how to convert Database Character Sets on the Codex. I did not try this, but might on my staging site when I have some time. If you have any more information, feel free to leave it in the comments!