Problem Description
- When visiting a cached page (using WP Rocket, Super Cache, or any other such plugin), characters like apostrophes and emoji appear as seemingly random accented characters or symbols
- This does not occur when viewing the page while logged in, or upon first view prior to cache creation for the page
- You have checked the wp-config.php file to ensure the DB_CHARSET and DB_COLLATE values are already set correctly
Problem Resolution
This has historically been an issue when viewing any page (regardless of logged in status) if the charset isn't configured to match your database character set in the wp-config. Details on that issue here.
However if your DB_CHARSET and DB_COLLATE values are already set correctly in wp-config.php AND this issue only occurs when viewing a cached page, the issue occurs because our caching performance layer can't assume output character encoding as UTF-8. It does it this way because it can't know/enforce that all types of output are encoded in the same manner.
To fix this, simply ensure that your WordPress theme header specifies the correct encoding. This ensures that the browser is able to interpret the characters correctly. Here's how:
- In the WordPress admin go to Appearance > Theme Editor and select Header (header.php) or edit the theme files via the File Manager by going to wp-content/themes/YOUR_THEME/header.php
- Between the head tags add the charset value: <meta charset="utf-8" />
Now clear the cache site-wide and you should find the issue resolved.
Most themes already do this automatically, but if you have a custom theme, your developer may have forgotten to do this.
