How to write a blog post – Part II

Time to save the world - alternate version

Time to save the world

This is the second part of my instructional blog post about…errr…blog posts. You can find the first one over here: How to write a blog post, and just to re-cap: this is mainly for the guys (friends and colleagues) that I have recently installed WordPress blogs for, and who maybe not are entirely used to writing for an online audience. If this is not you, and you don’t have a blog, you will probably not find this overly interesting.

So, with that out of the way, what can this blog do? Quite a few things actually, however, for any post you add you only need to keep track of a few things:

  1. Paragraphs
  2. Headlines
  3. Images
  4. Where the “Read More” link goes

If we start from the top:

1. Paragraphs

HTML Superscript and Subscript Handling


These should be the main bulk of your content. Even if you only post a YouTube video, add a few paragraphs on the reasons why you find it blog-worthy or interesting. It doesn’t have to be a full on bible you need to write, but something is a lot better than nothing.

For text based posts I would recommend you just sit down and type stuff in paragraphs and “go with the flow” of typing. Don’t concentrate on anything else just yet apart from getting the meat of the post in place, which should be paragraphs.

When you think you are done, either for the day or completely with that post, spend some time reading it. Over and over again. Save it as a draft and read it again tomorrow. Use the “Preview” button at your top right. Ask yourself:

  • Does it read well?
  • Are you mentioning something that you can link to? If you talk about Google Maps, or about a specific article on Mashable, make sure you are also linking to it.
  • Are you mentioning something that require prior knowledge? Provide a link to Wikipedia or wherever the reader can read in more depth about your topic.
  • Are the paragraphs broken apart from each other to allow the readers eyes some breathing space? Can the readers eyes latch on to natural breaks or breakers in the text? Or is it one huge mass of text?

When you link ensure you are selecting enough text to provide context for users who use link extractors (this is about Accessibility and best practices). Don’t use “Click Here”, as people with link extractors will not know the difference between 15 “Click Here” links. Also, when creating links, make sure you don’t select “open in new window” etc. No bloggers do, and it breaks “best practice”. If your blog post is good enough they will find their way back. If the users are web savvy in the slightest they know to hold CTRL whilst clicking the link which opens it up in a new tab in their browser.

Also use the “B“(old) and the “I“(talics) buttons where appropriate to emphasize context.

1.1 External Text Tools

MS Word feature set

Don’t use MS Word for blog texts

I would strongly recommend that you do NOT use Word as your editor for posts. The reason for that is that when you select all your text in Word and then copy/paste it into the blog, Word adds a million lines of crap code (slightly exaggerated for effect here…). Word is not good at HTML. WordPress is. You are better off typing your text in Notepad (Win) or Textpad (Mac) than you are typing it in Word. Just don’t do it. Trust me on this.

2. Headlines

Anti-Coal Poster v0.1 #3


When you think your paragraphs are flowing and are all linked up, have a think about where you can insert headlines. Headlines serve two purposes:

  1. They make it easier for the readers to latch on to with their eyes, and makes the text much more “scannable”.
  2. Headlines carry more weight for Search Engine Optimisation purposes.

Headlines is also where you can go a bit creative. Make the headlines fun. Make them enticing to ensure the reader reads more. Make them memorable.

To add a headline, just move a paragraph down a few steps in the editor and plonk in your text for your headline in the space in between two paragraphs. Then you select that text. Now, if you look in the editor toolbar you’ll see a droplist that has the text “Paragraph” written into it. You rarely will need to use “Paragraph” as such, as the system does them automatically, but you do need to look a little further down in that list, until you find “Heading 2”. Not 1. Not 3. Heading 2 is what you want. This isn’t complicated, so moving on to:

3. Images

This theme is based on having one large image as the start of the post, and then it also handles smaller content based images well. The large “post hero image” should preferably come from Flickr. There are many reasons for that, but “Most Linked” is one, “using social networks to their fullest” is another, “lowering server load” is a third. The fact that Flickr has a couple of standard sizes is probably one of the best ones though, as we then know the width of the image quite certainly.

To add images to your Flickr account you would need to acquire the login details, or set up a new account. You then upload your images/screenshots to Flickr. So far so good. Back in this blog, in the editor toolbar, you will find an image at the far right (in the toolbar) with Flickr’s blue/pink circles on top of an image. Click that button.

Now, you can either use the images from your own account, in which case you just add that user to the overlay window that will have popped up. You will then be able to browse all images from that Flickr user (so yes, it can be any Flickr user, more on that below though).

An added benefit with that Flickr button is that you can add others images that you actually are allowed to use as well. If you in the search box put in your search term, for example “carrot”, it will list all images that you can use royalty free, hopefully with carrots in them. When I say “royalty free” that usually means “with attribution to the photographer, including link to original image”, as per the rules of Flickr and the Creative Commons Licence.

Regardless of where on Flickr you get your image from in the button above, for the hero image, you want the “medium” size. Nothing else. The reason for that is that a medium image is 500 pixels wide at the most, which is nice for this theme. If you pick a larger size it will break the layout of the page, as all text will also try to fit that larger size. If you pick anything smaller it will look wonky. It should be noted that visually, horizontal images make for the best Hero images, as portraits will be 500 pixels high, not wide.You do NOT have to select anything in the droplist that says “alignnone” as far as the Hero image is concerned. Basically that means it will be centered. The other options in that list is “left” and “right” and you want them for the images described below.

As for captions, it defaults into having the checkbox for “automatic captions” checked. That means you either settle for what is suggested, which should be the title of the image and a link to the photographers Flickr account (as per the Creative Commons Licence). If you think that text isn’t suitable, or if you’d like to write something yourself as a caption, make sure you uncheck that box and instead use the field for custom captions below.

In the field for “custom caption” (after having unchecked the box above) you basically type in the text you would like to sit under the image. Keep it short, you don’t want to create line breaks in there (I have, on purpose, illustrated with images in this post what that looks like), and if you want to write longer texts you should do so as a text paragraph, not a photo/image caption. The image will still link to the original image on Flickr.

For images that support your text I would recommend you do as above, but instead of “medium” select “small” (with a maximum width of 240 pixels). On the Small images you do want to ensure it doesn’t have “alignnone” in the droplist for alignment. Instead you really do want “left” or “right” as that will make the image go to the side you’ve selected, with the correct padding between the text and the image as well. As for captions, which we should have on any and all images, the same as above is still true to read that paragraph again if unsure.

3.1 Image placement

So for the smaller images I normally put down the cursor to the left of the first paragraph after a headline and click the Flickr button. After having selected my image as per above I then go to “Preview” to ensure it all looks good.

horse jumps

Not Rocket Science

If you did that the image will be on exact level with the paragraph, and that sounds good, but at times it can look strange (depending on context, text layout etc). If it looks weird, just undo what you did and pick another location for the image. This isn’t rocket science by any means, nor is there any “right or wrong”. It is what you find look best that is the correct way of doing it.

4. Where the “Read More” link goes

Men's natures wrangle with inferior things (and free jpeg presets, too)

Blogg Bliss

Now, if you’ve done all of the above you are almost done. It is time to think about the fine details of things. One of those is to figure out where the “Read More” link will be placed, and this affects the readability of the home page. I would say you place it after the first 1-2 paragraphs (if they have 2-5 lines of text) below the Hero image, as that gives just enough information to make things interesting, whilst being able to see more than one post on most screens at any time on the homepage, to encourage further exploration.

The End

Yes, well, that is about it. Again, I have to stress that all of the above applies to this specific theme, which also is the theme applied to the blogs I have created of late. In reality it is a “child theme” to the awesome Thematic Theme Framework and based on the Thematic Power Blog Theme, which is extremely powerful right out of the box. Both are made by Ian Stewart, who is doing a great job.

I have then modified it (mainly CSS) and enabled a set of plug-ins that they all use. I have also hacked a few plugins, most notably the awesome Flickpress and added some JavaScript and some CSS to add a few options mentioned above. In following the GNU licence, under which both Thematic Power Blog as well as Flickpress are licenced I shall make those modifications available for download on this site in the near future.

As for the images, I have been a bit “free” in my thinking regarding attribution. This is mainly due to giving artistic freedom to the authors, combined with the fact some people give their images VERY long titles indeed. I have reasoned as such that if I still follow the Flickr guidelines, and ensure any externally used image still links back to the Flickr original image, we are probably fine, as that also attribution, even though it perhaps isn’t written out. It is most definitely clear if you click the image (or hover it for that matter).

Questions? Comments? Use the comment field below.