WordPress Comments, Cookies and Caching  ## Metadata - Author: [[Joost de Valk]] - Full Title: WordPress Comments, Cookies and Caching - Category: #articles - Document Note: --- tags: - #WordPress - #Commenting - #Cookies - #Caching - #WebDevelopment - #SEO - #OpenSource - #UserExperience Author: Joost de Valk Source: Yoast Blog Reference: [WordPress Comment Cookies and Caching](https://joost.blog/wordpress-comment-cookies-and-caching) date created: 2025-01-01 14:00 --- # Title: WordPress Comment Cookies and Caching ## Table of Contents: - [📝 Summary](#summary) - [📖 Main Content](#main-content) - [🗒️ Notes](#notes) - [⏰ Introduction & Overview](#introduction--overview) - [⏰ What Are Comment Cookies?](#what-are-comment-cookies) - [⏰ The Role of Caching in WordPress](#the-role-of-caching-in-wordpress) - [⏰ How Caching Affects Comments](#how-caching-affects-comments) - [⏰ Solutions to Commenting and Caching Issues](#solutions-to-commenting-and-caching-issues) - [⏰ Impact on User Experience](#impact-on-user-experience) - [📖 References](#references) - [🗣️ Paraphrase](#paraphrase) - [📰 Newsletter](#newsletter) - [✅ Action Items](#action-items) - [🧪 Hypotheses](#hypotheses) - [📊 Methodology](#methodology) - [❓ Questions](#questions) - [🔮 Future Research](#future-research) - [💡 Implications](#implications) - [🧠 Learning Styles Assessment](#learning-styles-assessment) - [📊 Accessibility Assessment](#accessibility-assessment) - [🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment](#deib-assessment) - [✅ Logical validity](#logical-validity) - [🔍 DARVO Analysis](#darvo-analysis) - [🔍 SEO Evaluation](#seo-evaluation) - [🎯 Conclusion](#conclusion) --- ### References: - Joost de Valk, "WordPress Comment Cookies and Caching," Yoast Blog, [Read Full Article](https://joost.blog/wordpress-comment-cookies-and-caching). --- ## 📝 Summary: This article by Joost de Valk provides an in-depth look at how comment cookies in WordPress interact with caching mechanisms, potentially causing issues with comment display and user experience. It explains the technicalities of how WordPress stores and retrieves comment-related cookies and how caching can lead to issues where users' comments are not displayed as expected. The article offers solutions to mitigate these issues, particularly for WordPress website owners using caching plugins, ensuring better performance without compromising the comment functionality. ## 📖 Main Content: The article breaks down the complex interaction between cookies and caching in WordPress comments. Here's an expanded view of the key sections. ### 🗒️ Notes: #### ⏰ [Introduction & Overview](https://joost.blog/wordpress-comment-cookies-and-caching#t=0) - The article begins by introducing the challenges faced by WordPress site owners regarding comment display, especially when using caching plugins. - **Main Concept**: WordPress uses cookies to track users who leave comments. Caching, however, can interfere with the proper display of comments, creating a mismatch between what users see and the website’s actual content. #### ⏰ [What Are Comment Cookies?](https://joost.blog/wordpress-comment-cookies-and-caching#t=60) - **Definition**: Comment cookies are small pieces of data stored on the user's browser when they leave a comment on a WordPress site. These cookies help prefill their name, email, and website information for future comments. - **Function**: These cookies ensure a personalized user experience by remembering the commenter’s data and allowing quicker future submissions. - **Challenges**: Sometimes, if caching isn’t correctly configured, the comment cookies may not be correctly recognized, leading to issues where the user’s comment does not appear immediately. #### ⏰ [The Role of Caching in WordPress](https://joost.blog/wordpress-comment-cookies-and-caching#t=120) - **Definition of Caching**: Caching is the process of storing static versions of web pages so they load faster for users. WordPress uses caching mechanisms to improve website performance. - **Benefits**: The primary benefit of caching is reducing server load, speeding up site load times, and improving overall performance, especially on high-traffic websites. - **Issues with Caching**: Caching can interfere with the dynamic content, such as user comments. If a page is cached with a particular set of cookies, that static version may be served to future visitors, causing comments to be outdated or not visible. #### ⏰ [How Caching Affects Comments](https://joost.blog/wordpress-comment-cookies-and-caching#t=180) - **Problem with Dynamic Content**: Since caching serves static content, any updates to dynamic elements, like comments, may not be displayed unless properly managed. - **Comment Visibility Issues**: Cached pages often display content without accounting for new comments, which may cause confusion for users who have left comments but cannot see them immediately. - **User Experience**: This can lead to frustration among users, as they may think their comment wasn’t submitted or is stuck in the moderation queue, even though it was actually added successfully but not reflected due to caching. #### ⏰ [Solutions to Commenting and Caching Issues](https://joost.blog/wordpress-comment-cookies-and-caching#t=240) - **Excluding Comment Sections from Caching**: One solution is to exclude the comment section of a page from caching. This ensures that comments are always up-to-date and visible for users. - **Using Cache Plugins that Handle Dynamic Content**: The article suggests using caching plugins that can intelligently manage dynamic content, ensuring that comment sections remain updated while the rest of the page benefits from caching. - **Optimizing Cache Expiration**: Adjusting the cache expiration time can also help by ensuring that cached versions of pages are refreshed frequently enough to avoid serving outdated comment data. #### ⏰ [Impact on User Experience](https://joost.blog/wordpress-comment-cookies-and-caching#t=300) - **User Frustration**: If comments aren’t displayed immediately due to caching issues, it can harm the user experience, causing confusion and potential disengagement. - **Trust Issues**: Visitors may begin to doubt the reliability of the website if they consistently experience issues with comment visibility, impacting the site’s credibility. - **Solutions for Better UX**: By implementing proper caching strategies and excluding the comment section from being cached, the user experience can be improved significantly. Visitors will see their comments appear instantly, leading to better engagement and trust. --- ## 📖 References: - Joost de Valk, "WordPress Comment Cookies and Caching," Yoast Blog, [Read Full Article](https://joost.blog/wordpress-comment-cookies-and-caching). ## 🗣️ Paraphrase: - **Original**: *"WordPress uses cookies to store comment data, and caching plugins help speed up websites, but sometimes the two don’t play well together. Cached pages may not show the latest comments, creating frustration for users."* - **Paraphrased**: *WordPress relies on cookies to remember comment information, while caching plugins enhance website speed. However, there’s a conflict: cached pages might not update to display new comments, which can lead to user frustration.* ## 📰 Newsletter: **Subject**: How Caching Affects WordPress Comments – Here's How to Fix It In our latest article, we dive into the often-overlooked issue of WordPress comment cookies and caching. While caching helps speed up your site, it can sometimes prevent new comments from showing, leaving visitors in the dark about their posts. We provide some actionable solutions, including caching exclusions and dynamic content management tips, so you can enhance the user experience while maintaining fast site performance. Be sure to check it out and share your thoughts with us on how you’ve managed caching on your own WordPress site! [Read More](https://joost.blog/wordpress-comment-cookies-and-caching). ## ✅ Action Items: - **Aligning with Open Source Advocacy**: This article can be used as an educational resource in your open-source WordPress development workshops. It addresses an important issue faced by many WordPress developers, offering technical solutions that help streamline user experience and improve we - Document Tags: [[Joost]] [[WordPress]] - Summary: Exploring the world of WordPress comment cookies and caching. Discover the challenges and solutions to comment cookies and caching. - URL: https://joost.blog/wordpress-comment-cookies-and-caching/ This post explains how WordPress uses comment cookies and why that is detrimental to your site’s caching. It then shows you how to fix this. When I wrote my previous post about [WordPress leadership](https://joost.blog/wordpress-leadership/), I had anticipated getting a lot of comments. It turned out there were even more than I expected. This led to some issues with my (admittedly rather aggressive) caching settings on my blog. When I approved a comment it didn’t clear my Cloudflare edge cache of my post, so people couldn’t see them. A few days after fixing that, I was alerted to the fact that Cloudflare was caching the details of the last commenter on a post. This led me down a rather deep rabbit hole. I was reading code that I’d not seen in quite some time, in the WordPress comment system. Now, this is all admittedly… A bit of the stuff that makes my kids call me a boomer. Because who does all this commenting on blogs? Right, not my kids. But still, a problem nonetheless. This is rather lengthy, so here’s a table of contents: #### How the WordPress comment system works When you leave a comment on a WordPress site, the process works as follows: 1. Your comment is submitted; 2. WordPress sets a cookie for each of your name, email address, and website URL; 3. Your comment is either held for moderation or immediately approved, based on several criteria. Then WordPress redirects you to a new URL and renders the post you commented on. The URL it redirects you to can be two things: * If your comment was immediately approved, it’s the URL you started on, with a `#comment-<comment-id>` anchor so that you’re shown your comment on the page immediately. * If your comment was held for moderation, by default, WordPress sends you to the URL you started on with a `unapproved` URL parameter + a `moderation-hash` parameter. It uses these to show your *unapproved* comment rendered where it *would* be rendered. It adds a message around it that your comment is held for moderation. When WordPress renders that page, and *every time after that* when it renders *any blog post* on the site for you, your browser sends your cookies to the server, and WordPress fills the data from those cookies into the comment form. So when that view, or a later view, is proxy cached (for instance by Cloudflare), your personal data gets cached along with it. This is of course highly undesirable on sites that have aggressive caching. On sites like that, you want every page render to be as similar to another one as possible. Even more important you certainly don’t want Personally Identifiable Information in those rendered pages. #### The solution: moving comment cookies to JavaScript space The solution to this is fairly obvious: there’s no reason why this would need to be done server side anymore, as we can do all of it in JavaScript. To do so, we have to take a few steps: 1. Set the appropriate cookies when you leave a comment (this is going to be in JavaScript); 2. Prevent WordPress from setting the comment cookies in the first place, as those might get cached; 3. Prevent WordPress from adding the content of those cookies to the rendered output on the page, as that would get it cached (this will be a few simple PHP functions); 4. Use JavaScript to read those cookies and fill the form fields. We *could* do this in 3 steps if we chose not to be backwards compatible: if we chose different cookie names, we could skip step 3, but I like to keep things backwards compatible. ##### 1. Set cookies when you comment We’ll start by setting the comment cookies on form submission. This assumes that you’re using the default WordPress comment forms, and thus have the `commentform` `id` attribute on your comment forms. We’ll update this code a bit later to add the functionality for step 4 as well. What this code does is fairly simple: it sets the 3 different comment cookies, with an expiry date of one year, when you submit the comment form. It sets them for `/` on your domain, so that they’re used on all the comment forms throughout a site. ``` // Function to set comment cookies. function setCommentCookies( name, email, url ) { const oneYear = 365 * 24 * 60 * 60 * 1000; const expiryDate = new Date( Date.now() + oneYear ).toUTCString(); // Set cookies for comment author data. This (slightly inefficient) cookie format is used for compatibility with core WordPress. document.cookie = `comment_author=${encodeURIComponent(name)}; expires=${expiryDate}; path=/`; document.cookie = `comment_author_email=${encodeURIComponent(email)}; expires=${expiryDate}; path=/`; document.cookie = `comment_author_url=${encodeURIComponent(url)}; expires=${expiryDate}; path=/`; } document.addEventListener( 'DOMContentLoaded', function () { const nameField = document.getElementById( 'author' ); const emailField = document.getElementById( 'email' ); const urlField = document.getElementById( 'url' ); // Set cookies on form submission. const commentForm = document.getElementById( 'commentform' ); if ( commentForm ) { commentForm.addEventListener( 'submit', function() { if ( nameField && emailField && urlField ) { setCommentCookies( nameField.value, emailField.value, urlField.value ); } }); } }) ``` ##### 2. Preventing WordPress from *setting* comment cookies To prevent WordPress from setting comment cookies, we should just unhook [the function](https://github.com/WordPress/WordPress/blob/275d202ae3baac4e674538fd5bc3bc660825d0e0/wp-includes/comment.php#L530-L572) that sets these: ``` remove_action( 'set_comment_cookies', 'wp_set_comment_cookies' ); ``` ##### 3. Prevent WordPress from *reading* comment cookies Next we want to prevent WordPress from adding the content from the comment cookies on the rendered pages. Since there is no way to prevent this functionality from running entirely, we just have to filter it to be empty: ``` /** * To prevent this data from being cached, we don't want to show it server side. * * @param array $commenter Ignored. * * @return array With empty values for all three keys. */ function ignore_comment_cookies_serverside( $commenter ) { return [ 'comment_author' => '', 'comment_author_email' => '', 'comment_author_url' => '', ]; } add_filter( 'wp_get_current_commenter', 'ignore_comment_cookies_serverside' ); ``` ##### 4. Fill the comment form with JavaScript To fill the comment form with JavaScript, we have to read the values from the cookies: ``` // Function to read cookies. function getCommentCookies() { const cookies = document.cookie.split( '; ' ).reduce(( acc, cookie ) => { const [key, value] = cookie.split( '=' ); acc[key] = decodeURIComponent(value); return acc; }, {} ); return { name: cookies['comment_author'] || '', email: cookies['comment_author_email'] || '', url: cookies['comment_author_url'] || '' } } ``` And now we update the `DOMContentLoaded` function we created in step 1 to add this: ``` document.addEventListener( 'DOMContentLoaded', function () { const nameField = document.getElementById( 'author' ); const emailField = document.getElementById( 'email' ); const urlField = document.getElementById( 'url' ); // Get the data from the comments. const cookies = getCommentCookies(); // Populate comment form fields with cookie data. if (nameField) nameField.value = cookies.name; if (emailField) emailField.value = cookies.email; if (urlField) urlField.value = cookies.url; // Set cookies on form submission. const commentForm = document.getElementById( 'commentform' ); if ( commentForm ) { commentForm.addEventListener( 'submit', function() { if ( nameField && emailField && urlField ) { setCommentCookies( nameField.value, emailField.value, urlField.value ); } }); } }) ``` I have combined all of these in [this gist](https://gist.github.com/jdevalk/2d4d4f6d055ceede40a68eeb21800ef4), for easy copy pasting. #### Aside: the SEO impact of the WordPress comment system The fact that WordPress redirects to a URL with an `unapproved` parameter is *incredibly* tricky in my eyes; I’m never a fan of URL parameters being added anywhere (as it usually busts the cache, and bloats the URL space), but here it also leads to potential SEO issues if people link to these parameterized URLs. I was able to find quite a few of these with [relatively simple Google search](https://www.google.com/search?q=inurl:unapproved+inurl:moderation-hash): * <https://poty-demolition.fr/bonjour-tout-le-monde/?unapproved=24737&moderation-hash=91fb997849f7f870c5abd153fb99a326> * <https://sekainoowari.jp/discography/2011/08/17/125/inori/?unapproved=11&moderation-hash=9a1bc2e1de3f9708df8a394c836bcc76> Since WordPress does not `noindex` these URLs by default, this is a perfectly sensible way of injecting links into a page and getting (usually `nofollow`, but still) links from domains that have no idea they’re linking to you, thinking they’ve not approved your comment. SEO plugins should take note and add `noindex` to every page that has these URL parameters on it, something I think WordPress core should do too. On my site, I have decided to just not let WordPress redirect to this parameterized URL entirely, something I have included in the gist as well., WordPress Comments, Cookies and Caching, Joost de Valk, 01jgh9y116ffd40ng77dp0nhfq.