I’ve been thinking about writing a post like this one for a long, long time, because it’s the kind of post that would make my life as a custom WordPress theme designer so much easier. These are not groundbreaking tips or anything, just 8 common sense tips for people who are not very familiar with how the WordPress editor works. If you’re an experienced WordPress user, you might as well skip this post.

If you’re a WordPress theme designer or a web designer using WordPress as CMS in your client projects, then I think you should really bookmark this post and keep it somewhere safe, because you’ll need it! It will be so much easier to give your clients the link and encourage them to read this post, rather than explaining why their blog posts look bad or why their WordPress theme breaks, even though the theme you designed works fine.

Table Of Contents

  1. The right way to use copy / paste in WordPress editor
  2. Using simple styling in your blog posts
  3. Adding images to your blog posts
  4. A few tips on linking to other pages / blogs
  5. The easy way to add a Read more link
  6. How to structure your posts using headings
  7. The reason why Text color is a bad idea
  8. How to clean up a post when things go wrong

1. Copy / Paste

This is where most non experienced WordPress users manage to really mess up their blog. And it’s so easy for them to do so! :) All it takes is the wrong kind of copy / paste: simply copy / pasting text from Word or from another web page will most likely add a lot of unnecessary (and sometimes harmful) CSS styles and HTML tags. It’s what I call “garbage”. Based on the source you copy from, there can be a lot of garbage!

If you’re used to writing your posts directly in the WordPress editor, you won’t have this problem. But in some occasions, you do need copy / paste. So in order to avoid this issue, there are a couple of things you could do:

  • Click the Kitchen Sink button to show more options, click Paste as Plain Text (Paste from Word removes only some of the garbage) then paste your text there. You will loose simple styling such as bold text or links, but this is not necessarily a bad thing. Just read below to see why.
  • If you have Dreamweaver (other WYSIWYG editors might work too), just paste the text in Design View, then go in Code View and copy the text. Click the HTML tab in the WordPress editor and paste the text there. This will remove all garbage, but keep simple styling.

2. Simple styling

While using clean text is a great way to start a blog post, you still need to properly structure that post in order to hook users into reading the full post and ultimately transforming just another blog post into a succesful blog post.

The WordPress editor offers a wide range of styling options, but my advice is to keep it simple:

  • Use Bold and Italic to make a point, to highlight something. If you use Bold for 75% of your text, the users will not only miss the point, but will find the text difficult to read.
  • Lists are great! I love lists! I think 99% of Internet users love list, for obvious reasons. This doesn’t mean you have to make a list out of everything, but if you have “list material”, do use them! Don’t let your cool content fade away between your paragraphs.
  • There’s a reason why the WordPress guys added a special button for quotes. It’s because quotes are important! Whether it’s a testimonial, a press release or “something cool a guy said”, that particular paragraph must stand out! So using the Blockquote button along with a nice CSS style (your theme should have that built in) will do precisely that for your quote.
  • Unless you’re writing in a language that reads text right-to-left, I see no reason why you should use anything else other than Left align. Period!

3. Adding images

There are many reasons for using images in your posts and since it’s easier now to find free images for your blog, it would be a shame not to do it. My favorite source for images is flickr Creative Commons and I sometimes buy images from iStockphoto as well, cause they’re very cheap.

Here are a few tips for adding images to your blog posts:

  • First, the obvious: don’t use copyrighted images and carefully read the licensing before using / purchasing an image.
  • Don’t link the image source to an external URL. That image might not be there tomorrow.
  • Don’t use a high resolution version of the image. Instead, resize the image to fit your content width, using an image editor (lots of free ones out there).
  • Click the place where you want your image to be and use the Add an Image button to add the image to the WordPress Media Library. That way you can set various image attributes and also use the same image in a future post.
  • Once the image is uploaded, add a title (good for SEO too), click None for Link URL (in most cases you don’t need links on images), align the image Left or Right if it’s a portrait image (you will save some page real estate and also make the post look nice and compact) and select Full size (you did resize the image, right?).

There is one other thing: when you choose the image alignment, this doesn’t actually float the image left or right, it just adds some CSS classes to your image, based on your option. Themes usually have the right styles defined and things should work out of the box. But in case you choose alignment and the images are not aligned, you can open style.css in Design > Theme Editor and add the following lines somewhere:

img.alignleft { float: left; margin: 0 25px 15px 0; }
img.alignright { float: right; margin: 0 0 15px 25px; }

4. Linking

If you followed my advice on how to copy / paste, there’s a chance you “lost” the links. This is where we’ll put them back. I always thought that it’s better to add the links yourself, one by one. This allows you to double check that the URL is correct and also allows you to set a couple of other attributes.

This shouldn’t be such a difficult task, when you have only a couple of links in your blog post. If you’re thinking “do I have to do this for all 76 links from my post?”, then you’re doing it all wrong! There is such thing as “too many links in a post”, you know! It’s bad for both SEO and for your user’s focus.

The next tips might not seem relevant to the subject of this post, but I think they are worth mentioning. So here’s how I add my links:

  • I rarely link to Wikipedia, especially ever since I read Alister Cameron’s arguments. The article gives some common sense advice, that I really think you should read at some point.
  • I select the Open link in new window option, just to make sure users stick around. If they do leave my blog, it should be a decision they took themselves.
  • If you follow my first advice and link to a cool resource (especially one that’s still under the radar), why not show some appreciation by adding a title to your link? You’ll help them a bit with SEO and make that resource available to more people. I’m not saying to do their SEO work, just use their title. If they did their homework, you’ll do them a favor. The least you could get in return is some good blogging karma. ;)

5. Read more links

I’m often amazed by the number of people who ask me to include a Read more functionality in their custom WordPress theme. I’m not sure why they miss the obvious feature from the WordPress editor, but I have a feeling it has something to do with the label: Insert More tag, instead of Insert Read more link or something else, more obvious for every user.

So here are the very simple steps to adding a Read more link to your blog posts and increasing that Pageviews number (cause that’s what it’s all about for most people, right?):

  • Click the place where you want your content to split (for example if you want to show two paragraphs, click just after the second paragraph).
  • Click the Insert More tag button and hit Save. That’s it! Easy, huh?

Of course you can later customize the More tag in any way you want: you can simply change the text or change the look and feel of the link.

6. Headings

Headings are a great way to organize a blog post. Before actually writing a post, you can write down a couple of subtitles for your post. They can be a break down of your main topic into subtopics, or maybe a list (yes, a list is more powerful when using headings).

Most bloggers don’t use headings too much, but there are also those who feel they should really dissect a subject, so they split the subsections many times. From my experience as a blogger, you won’t need more than two headings, even for longer articles. You may feel that you’re making your content easier to read, but at some point things will get confusing for your users.

Since Heading 1 is usually reserved for the page title, what you will ever need to structure a blog post is Heading 2 and in some cases Heading 3. Combine this with the power of simple styling described above, throw in a couple of images and what you’ll have is one kick ass article! Well… at least from a visual point of view.

7. Text color

This one is the shortest tip I can give you: don’t do it! I won’t even show you where the button is. The less you know, the better of you and your WordPress theme will be. :)

Now seriously: there is no real reason why you should use color, when you have all the other styling options at your disposal. No need to make your blog look like a Christmas tree, right? If you do need some custom styling in your WordPress editor, just throw in some quick CSS in your styles.css (or hire someone to do it).

8. Clean up

If you’re reading this article and thinking “Man… wish I knew all these things 5 months ago!”, then this last tip is for you. Worst case scenario: if you click HTML, instead of plain, clean text, what you see is a lot of that garbage I was telling you about and also inline styles (like style=”blahblahblah”).

Inline styles are bad, because even though your WordPress theme’s CSS says “text is dark gray”, the style in your post says “nah! it’s red and sometimes green”. It’s why I told you NOT to use Text color. Text color adds inline styles and doesn’t allow you to change your mind about the look and feel, unless you go back to every post and remove the colors. Think about how that’s gonna feel like 342 posts later. ;)

Fixing all this can be time consuming if you have many posts, but I think it’s worth it. So here’s what you should do:

  • Go to Manage > Posts and click the nasty looking post.
  • Select all the content and click the Remove formatting button. This should remove most of the garbage, but sometimes it’s not quite enough.
  • Click the HTML tab and do one last check for funny HTML tags (stuff like div, span, even br) and inline styles. The only acceptable tags should be the ones for links (a), headings (h2, h3), images (img) and lists (ul, ol and their li).

Conclusions

This is probably one of the longest post I ever wrote. Maybe the lack of writing on this blog made a mark on my writing style? Nah… Don’t worry, I won’t bore you with such long posts any time soon.

I know some of the topics I covered don’t have much to do with writing a clean post and they are more about good blogging habits, but I just went with the flow and hopefully, created a nice mix for people who are just starting out with WordPress. Actually… if you think about it, this whole post is about clean blogging, visually and content wise.

P.S. Yes, that’s a Mr. Clean version of myself. I had some fun in Fireworks. Maybe I’ll write a nice tutorial about photo manipulation sometime. ;)