Best Practices for Creating Content

🌟 Today I am at WordCamp Sacramento 2016 speaking on Best Practices For Creating Content or as I like to call it, Why You Shouldn’t Copy and Paste From Microsoft Word. I’m doing a 10-minute lightning talk and have a lot of content to cover, so this blog post acts as a companion to my presentation.

Why You Shouldn’t Copy & Paste from Microsoft Word into the WordPress Editor

When I was working at my last job prior to Three29, I was the lead designer and in more of a project management role. Clients would come to me with problems or bugs in their site, and most of those issues stemmed from populating content. Several times I noticed they’d break their site somehow due to them copying and pasting content from Microsoft Word directly into the WordPress editor. When this happened, I’d usually go into their site, clean up the code, tell the client their site was fixed and to not directly copy and paste from Word to WordPress, and everyone would continue on their merry way.

I had one client in particular who was, shall we say, challenging to work with, and had difficulty adjusting to how things worked on the web. One day I got an email from her regarding a broken page and through troubleshooting came to the conclusion it was because she had directly copy and pasted from Word into the WordPress editor. But why? That was the questioned pushed back to me. Now, this was the type of client you couldn’t just tell them “this is the way it is” – you basically had to write a 10-page persuasive essay complete with 3-5 credible sources.

However, through her frustration, I saw an opportunity to learn and to educate. I took two hours researching and composing an email explaining why she shouldn’t use Word and what she could do instead. After I spent all that time researching and writing up that email, I felt more people needed to know about this since it was such a common problem and there was very little information on it.

Many of you have either fallen into the roll of the person populating the content or the person managing the person populating content, and you have most likely run into this same situation. That is why today I am covering best practices for creating content and why using a traditional word processor, such as Microsoft Word, is not the best approach.

1. Don’t Use a Word Processor to Create Your Content

Hidden Formatting

If you have ever copy and pasted from a Word doc to the WordPress Editor you’ve noticed how it almost never looks how you expected it to. If you’ve ever switched from the Visual Editor to the Text Editor you have might notice some funky looking code that shouldn’t be there.

When you copy text to your clipboard from any Microsoft product (post Office ’97), you are copying all of the invisible Microsoft XML formatting that goes with the text. In other words, you’re essentially copying HTML. When you paste that text HTML into your web-based editor, you get the whole block of it…the text, the markup, and all the inline formatting for every. single. piece. of. text.

– Ctrl+WTF? How to paste from Word without wrecking your web page

This code that copies over is what causes your content to look funky and/or break your site.

Inconsistent Styling

When you directly copy and paste from a word processor you’re bringing over styles that aren’t always consistent with your site. This means styles from your word processor are competing with the styles set in your stylesheet. And it can get ugly. Here’s an example:

Can you tell which font is the correct one? My point exactly.

Formatting Isn’t Guaranteed

Because of the shenanigans that come with copying and pasting, the way you format your content isn’t guaranteed. Things like spacing, images, tables, bulleted lists, etc. have trouble coming over properly. Not to mention there’s some formatting that doesn’t get recognized by WordPress.

If you create headings in Word, they will not be recognized as headings in WordPress, which isn’t good news for SEO. If you anticipate having a lot of headings in your post, it may be best to type the post with the headings in normal text, and change them to headings once you’ve pasted into WordPress.

– How to Copy from Microsoft Word into WordPress

Now you know why you shouldn’t use a word processor to populate your content. Let’s talk about what you can use instead.

2. Use the Right Tools for the Job

There are several methods and tools you can use to bring content over into your WordPress site.

Use the WordPress Editor

Did you know that WordPress has an amazing editor built in where you can edit and format your content? Yup, and the best part is when you create and format your content there you won’t break anything!

Also worth noting:

• Drafts are autosaved and now saved locally with WordPress 4.6 so nothing gets lost.
• The new Distraction Free Writing Mode makes it easy to focus on your content.
• WordPress has desktop and mobile apps for editing on-the-go

Copy and paste with no formatting and format in editor

I understand there might be situations where you don’t have access to your WordPress site yet but you need to create content. Or you don’t have internet access but want to write. What do you do?

You can use your preferred program for writing up content, but when it comes time to put it into WordPress, you copy it over with no formatting and format in the WordPress Editor. You can do this by:

• Keyboard shortcuts. If you know that the shortcut to paste is CTRL+V (Windows) or Command+V (Mac), then holding down the shift key will paste as plain text.
  Mac: Command ⌘ + Shift ⇧ + V
  Windows: CTRL + Shift + V
• Copy and paste your text into a text editor like Notepad, Sublime Text, etc. and from there copy and paste into the WordPress Editor.
• Use the Paste as text button in the Kitchen Sink.

Resources:

• Press Ctrl+Shift+V to Paste Text Without Formatting in Google Chrome
• 5 Ways to Strip the Formatting When You Copy & Paste Text

Use tools made for blogging

You can also use an app made just for blogging! Here are a handful of ones I’ve stumbled upon:

• WordPress.com app – Desktop and mobile, free (this is the one I use)
• Ulysses – Mac and iOS only, $44.99 for Mac and $24.99 for iOS with free demo available
• Blogo – Mac and iOS only, free with paid options available
• Desk PM – Mac only, $19.99 with other more affordable versions available
• Blogjet – Windows only, $35.95 with free demo available
• ZenWriter – Windows only, $19.95 with free trial available

Now let’s say you’re in a project management position or you’re the developer on the site. What can you do to prevent future problems?

3. Take Preventive Measures on Your Site

Luckily there are a handful of things you can do to prevent copy/paste problems with future clients.

Paste as Plain Text Plugin

This fabulous plugin does one simple thing: forces the WordPress editor to paste everything as plain text. No matter where you are copying/pasting from, no matter how much you’ve formatted your content, this will strip the formatting and paste as plain text. This is great for those clients that forget about the whole “copying and pasting from Word is bad” or those that choose to ignore your advice.

One thing to note: as of WordPress version 3.9 there is now built-in support for pasting from Microsoft Word. Although this is a great leap forward, it doesn’t hurt to have this plugin installed just in case. Think of it as insurance.

Style the Editor

Another thing you can do is style the WordPress editor to match the front-end of your site as close as possible. One of the things I learned with my difficult client was that part of the reason she was creating her content in Word was because it was easier for her to visualize when formatting. When I styled the editor to match her site, it helped her out tremendously. Because of this, I always try to do this for every client. It’s the little things like this that go a long way.

Here’s an example of what mine looks like on my own website:

Styling the editor is really easy. All you have to do is add a simple function to your functions.php file to activate the editor stylesheet. From there you can use the inspector to get the necessary CSS classes.

Tip: I recommend creating a private page/post called “Style Guide” and populating it with content from WPFill.Me. This will populate all the possible content a user could add into the editor and will allow you to see everything you need to style for.

Resources:

• The Five Minute Guide to Add Editor Style
• WPFill.Me
• Custom Stylesheet for the WordPress Editor

Part of being a great WordPress theme developer is making sure you’re handing over a finished project. Delivering a great looking theme (maybe even up-selling a maintenance plan) with a back-end that the client can use to easily update their content is important.

– Custom Stylesheet for the WordPress Editor

Make the Admin User Friendly

I personally believe that a client should be able to populate content on their WordPress site without knowing any code. You can achieve this in multiple ways by using things like…

• The Theme Customizer. Anthony Skelton did an awesome talk earlier today about setting this up in the backend.
• Custom Fields. Although WordPress has basic custom fields built-in, I prefer to use Advanced Custom Fields (ACF). You can add custom fields to basically every aspect of your WordPress site. We use it at Three29 to allow clients to create content blocks so they can integrate their content without worrying about messing it up on the front end.
• Widgets. Like custom fields, you can use widgets throughout your site to manage content, features, and functionality.

Resources:

• The WordPress Theme Customizer: A Developer’s Guide
• Rediscovering Theme Settings With The Customizer
• Advanced Custom Fields
• The Guide to Adding Widget Areas to WordPress Websites

Educate Your Client

When you get ready to hand off a site to a client, make sure they not only know how to use it but feel comfortable doing so. This might be the very first time your client is managing a site, let alone using WordPress, so it can be very overwhelming for them. Conduct a training session or two with your client.

Training is super important because you’re setting the expectations. Make sure they understand the WordPress editor, and give them advice so they know the dos and don’ts for populating content. At the very least make sure they know about the Paste as Text button in the WordPress Kitchen Sink.

Remember, clients don’t know what they don’t know. You have a duty to educate them.

In Conclusion

Education and communication are key to solving problems. Not only did I solve the initial problem with my client, which was what was causing her site to break, but I also was able to further educate my client in a way that empowered her. I learned why my client felt the need to compose her content in a Word doc first and then copy paste, and it helped me deliver better customer service while educating me at the same time.

Additional Reading

• Using Microsoft Word with WordPress.com
• Ctrl+WTF? How to paste from Word without wrecking your web page
• 9 Ways to Protect Users and Clients from Breaking Their WordPress Site
• Why Microsoft Word is the enemy of your WordPress website
• Clippy.JS ?

Slides

And if you thought my slides were just so wonderful and great, here they are on SlideShare: