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!
Like what you're reading? Sign up for my weekly newsletter for more great articles. And as a bonus, you'll also get a lesson from one of my online courses, totally free, once a month.