6

I have 40 WordPress sites with 20-30 pages on each. Most of them have some inline css, like <p style="text-align: justify;"> in every single paragraph.

Is there a quick, mostly automated way to remove all those inline CSS at once? Even clicking through all those pages and posts will be a pain in the ass; I don't want to spend more than 3-4 clicks per page to remove those lines.

I know that I can give the stylesheet !important, but that's not enough - I need to totally remove those CSS lines.

7

There are a few ways I can think of to handle this:

  1. Do it once for all current posts
  2. Do it at runtime before displaying posts (either by filtering the_content, or with jQuery)
  3. Do it with important! in your CSS - as you mentioned

Each method is a legitimate way of tackling this and each carries pros and cons.

I usually take option 3 because it is the easiest way to ensure that post content copied in from elsewhere always looks as the theme intends it to look. I scope the CSS to just the container where the post content is going to be, and I just override those properties that cause the biggest issues - usually font-size, text-align, font-family and the like - with a value of inherit !important so it just works as the theme intended.

In your case you've already stated that that isn't going to cut it. I'm assuming this is because there's a wide range of CSS rules you're dealing with, and listing every CSS property known to man is way too cumbersome.

In this case the other two options above are going to depend on your goal: do you want to just adjust the current posts, and not affect any future posts that may be inserted on the site, or do you want to not actually touch the posts per se but just change how they are displayed - meaning any future posts will also be 'fixed'?

Doing it once for all current posts could be done with a direct SQL query to your database. Parsing HTML and making automated decisions on it can be dangerous, so I think the safest way to do this would be a find-replace on your wp_posts table where you actually just replace style=" with data-style=". That's still valid HTML5; it won't be read as a style attribute; and there's very little chance that you'll mess up something you didn't want to (unless of course you have posts that have code samples in them?).

There's many ways to do a search-replace on your DB; I would suggest using wp-cli's search-replace command:

wp search-replace ' style="' ' data-style="' wp_posts --include-columns=post_content

You'll need wp-cli installed to be able to do this, installation instructions are here (as an aside, if you're on Windows and having trouble following the instructions, let me know in the comments and maybe I could do a Q&A on that).

Doing it at runtime before displaying posts can be done with the the_content filter, and I'd probably take a similar tack to the above just for the same reasons that you don't want to accidentally replace something that you do need. Something like this:

add_filter( 'the_content', function( $content ){
  return str_replace( ' style="', ' data-style="', $content);
});

Finally, if you do have posts with code samples in them - or you just want to be absolutely sure you're only replacing what you actually want to, I'd probably resort to using jQuery on the page. Never the nicest way to deal with content when you could do it server-side, but I mention it for completeness:

jQuery( '.your_post_content_wrapper *' ).attr( 'style', '');
  • 1
    Interesting approach changing it to a data- attribute, should be simple and effective. An edge case would be if that data attribute already existed ;-) – birgire Aug 6 '16 at 9:34
  • 2
    @birgire Good point. Could always change it to data-fisjfodsfs-style or whatever one wants :) – Tim Malone Aug 6 '16 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.