Removing WordPress Funk
In “I Can Smell Your CMS,” Phil Hawksworth explains how well meaning CMS’s can add all sorts of funk to the code we’ve worked so hard to craft.
Today, I want to share a few simple things you can do to remove CMS funk from WordPress sites.
This post was updated on April 23, 2013 with additional funk-removing techniques.
WordPress Funk
I manage the PAWS New England website, but volunteers manage the blog.
The WordPress visual editor makes it really easy for them to share news about the organization on the site. It also adds lots of inline styling that overrides default design choices, and empty paragraphs and spans that clutter up the HTML. These things don’t just look ugly. They hurt site performance and impact Google search rankings.
It’s not the volunteers’ fault. It’s the CMS’s.
The Funk Fix
Fortunately, there’s a few simple things you can do to remove CMS funk from WordPress.
The following snippet of PHP will remove inline styling, font tags, and empty p and span elements from the CMS content. Add it to your functions.php.
/* ======================================================================
* Disable-Inline-Styles.php
* Removes inline styles and other coding junk added by the WYSIWYG editor.
* Script by Chris Ferdinandi - https://gomakethings.com
* ====================================================================== */
add_filter( 'the_content', 'clean_post_content' );
function clean_post_content($content) {
// Remove inline styling
$content = preg_replace('/(<[^>]+) style=".*?"/i', '$1', $content);
// Remove font tag
$content = preg_replace('/<font[^>]+>/', '', $content);
// Remove empty tags
$post_cleaners = array('<p></p>' => '', '<p> </p>' => '', '<p> </p>' => '', '<span></span>' => '', '<span> </span>' => '', '<span> </span>' => '', '<span>' => '', '</span>' => '', '<font>' => '', '</font>' => '');
$content = strtr($content, $post_cleaners);
return $content;
}This script doesn’t actually remove those elements from the content in the database. Instead, it filters them out as it renders the content into an HTML page.
Only Removing Post Funk
For the PAWS site, I use use inline span elements to apply classes on other pages (things like .text-tall or .text-small). The code above would remove those tags on pages, too.
Here’s the code I use instead to only remove funk from blog posts:
/* ======================================================================
* Disable-Inline-Styles.php
* Removes inline styles and other coding junk added by the WYSIWYG editor.
* Script by Chris Ferdinandi - https://gomakethings.com
* ====================================================================== */
add_filter( 'the_content', 'clean_post_content' );
function clean_post_content($content) {
// For individual posts and the index page
if ( is_single() || is_home() ) {
// Remove inline styling
$content = preg_replace('/(<[^>]+) style=".*?"/i', '$1', $content);
// Remove font tag
$content = preg_replace('/<font[^>]+>/', '', $content);
// Remove empty tags
$post_cleaners = array('<p></p>' => '', '<p> </p>' => '', '<p> </p>' => '', '<span></span>' => '', '<span> </span>' => '', '<span> </span>' => '', '<span>' => '', '</span>' => '', '<font>' => '', '</font>' => '');
$content = strtr($content, $post_cleaners);
}
return $content;
}Auto-Linking Image Funk
By default, WordPress wraps images added with the editor in a link to the image source. If someone accidentally clicks on the image, it can be a jarring user experience.
You can disable this pretty easily in the editor itself, but people using the visual editor don’t always know to do so. You can teach them how, but having to do that for everyone who uses the site can be a bit annoying.
Add this snippet to your functions.php file to change the default. It doesn’t disable linking entirely - users can still add links manually later if they want to.
/* ======================================================================
* Image-URL-Default.php
* Overrides default image-URL behavior
* http://wordpress.org/support/topic/insert-image-default-to-no-link
* ====================================================================== */
update_option('image_default_link_type','none');Funk fixed!