Single post

Best practices for content creation

A quick overview of WordPress content structure

WordPress is a free, open-source application that runs nearly half of all websites online today. The content (text, images, etc.) is held in a database made up of tables and columns, kind of like a giant spreadsheet. This database contains most of this content in a single table. As an Administrator or Editor, you will most frequently be dealing with Pages and Posts. You will not typically be creating new categories, (and in some cases, not even Pages), menus or adding plugins without consulting with your theme developer, since these are usually major structural decisions and might require theme changes or new templates. It’s a good idea to ask before adding new structural elements.

A Post or a Page?

For this tutorial, we are talking about creating in WordPress, but the basic guidelines apply to any CMS or web platform you might be using. As a hierarchical rule of thumb, Pages tend to contain static information (your biography, contact information, a list of services). Posts are most often employed for chronological information or to contain content for multiple items that are similar (news, products, artist roster, videos). The editor itself is pretty much the same (but Pages don’t use categories).

A tour of the Editor

When you create a new Post, you’ll see a whole bunch of “meta-boxes” (fields, basically) that contain options or await input. You’ll generally be dealing with : Title, Content, Excerpt, Category, Publish status, Publish date, Tags and Featured Image. In the Post content area (the biggest empty block with styling choices and icons at the top), at the top right, you’ll notice two tabs – Visual and Text. The Visual tab is usually open by default and lets you edit as if you were using your favourite text editor (all the same shortcuts work, by the way). The Text tab shows you the “back end” of the content you have added, including some of the styling you may have applied (bold, italics, titles, etc.).

Don’t “design” in the editor

Design is the job of the designer. If you are creating a Post, you are a content creator. If you are unsatisfied with the size, colour, placement, etc. of some Post element, the site designer may need to edit the CSS (stylesheet document contained in the WordPress theme that defines the site structure and look. Always use a minimum of means to emphasize content in a Post – use italics or bolded text sparingly and NEVER USE ALL CAPS. Never center images or text. Never, ever make a header bold – headers have their own unique styling applied at the stylesheet level and that is the only place style should be changed for them. Use bulleted or numbered lists, or possibly indentation to set text areas apart.

Create a good title

Your Post title should convey information but it doesn’t necessarily need to mention the site name; that is already showing up in a search by default. Example : “FamGroup artists rake in the awards at the 2021 Junos”. NEVER WRITE TITLES IN ALL CAPS FOR ANY REASON and don’t end with an exclamation point! If your site needs titles in all caps, that goes into the stylesheet. Post titles count toward good search engine ranking.

Create a good permalink

This mainly applies to Posts, since Pages are usually somewhat static (planned ahead, not created on a whim). In WordPress, the permalink is called a “slug” and it is the URL for the page. If your site uses a typical permalink structure, it will likely have the year and month following the domain name, but after that, it should either match or reflect the title and be informative. The main reason for a permalink structure that uses year/month is to show search engines how fresh the content is and to avoid accidentally using the same title twice – which is very easy to do over time! The value of the permalink is also important to search engines looking to serve up the most appropriate content to those looking for it.

A good permalink would look like this :

https://famgroup.ca/2021/03/famgroup-artists-clean-up-at-juno-awards

Pasting text

The number one thing to remember. Let’s say you are working on your Post content outside of your website, in a text editor like Word or Pages, or you have copied some text from an online source. If you copy and then paste that text directly into your freshly created Post, you may not realize that you have just pasted a whole pile of proprietary code along with it. You can click on the Code tab in the Editor window (Visual and Code tabs are at top right of the Editor area) to see if you’ve accidentally added extra code, like HTML “tags” that look like <strong> (bold), <h1> (Title 1), <em> (italic) or commonly extra <span> and <div class="some-class"> elements (Word often adds these). Those bits of code shouldn’t be there and in some cases, can even break your site design or make it invalid (bad HTML).

But there’s a way to avoid this from the start – before pasting anything into the Editor, first click on the little icon that looks like a T – if you hover over it you’ll see the title Paste as text appear. Once you activate that, you can paste and all the nasty styling will be stripped out. You will have to manually add any link that you may have copied. You will also have to make proper paragraph returns (“hard returns”, or Shift-Return). If you want sections or lines of text to cling together, you can use Shift-Return to do a “soft return” – it’s surprising how many people who’ve used word processors (Word, Pages, Google Docs, etc.) for decades don’t know about this!

Adding media

Naming conventions

Before you add an image, PDF or audio file, please name it properly so that you can find it five years down the road. For example, a photo should be named like Heidi-at-BBQ-2019.jpg or Rebeccalooking_hot.png. Avoid spaces in media titles and never use punctuation or ampersands (commas, periods, &, ?, /, etc.). Underscores are okay, as are dashes-between-words, or try using CamelCaseToMakeItReadable. The reason is that some characters are reserved for web and code use and may be misinterpreted by the browser. Especially resist adding a period anywhere, because it indicates that what follows is the file type (.jpg). If you add an image with a title that already exists, a number will be added to the name automatically to differentiate it, so it is always better to create semantic media titles.

File types

Web images need to use RGB (red, green, blue) colour palettes. A CMYK (cyan, magenta, yellow, black) image is for printed material and not web-compatible. It’s unlikely you will have to deal with this but just a heads-up because occasionally someone may give you a JPG file that is actually CMYK without realizing it. The file types you’re most likely to upload may include : JPG, PNG, PDF, DOCX, RTF, XLSX, MP3 or OGV. The only type that will display on a web page are JPG or PNG (images) and MP3 (audio) or OGV (video) files; the others will have to be downloaded or opened via links. There are a few other file types (SVG, WEBP) that are in use on the web, but for our purposes, you won’t be dealing with them.

Placing images

When adding an image via the Add Media button, first put your cursor where you want it to be (saves time later). In WordPress you can actually add an image without even clicking on the button, by simply dragging it into your page. Because your website is most likely “responsive” to the size of the device viewing it, be conscious of not “floating” (aligning left or right) large images in a Post. A better approach is to either start or finish a Post with a large image with no alignment. Save floated images for small ones in large bodies of text. Be aware that any “floating” will likely be cancelled out by a CSS media query (special CSS rules) at responsive sizes of 320 to 767 pixels wide.

Image and file accessibility

It will soon be illegal for sites not to be accessible. In Canada, Ontario is the first province to make accessibility the law (and make an effort to enforce it). While much of the content you add to WordPress will be accessible by default, you can ensure that images and files you add are, too. To help a visitor using a text-to-speech reader you should always add “alt-text” to it. The “alt-text” tag will appear to the right when you Add Media and select the image or file you just added. Describe the image or file in the alt-text field, for example “Woman petting cute, large dog”. Do not add a Title, too because the text-to-speech reader will read it, as well, making for a lot of annoying repetition, especially if you have given the image a good title itself. If you are adding and linking to a file (PDF, etc.) the same applies.

Featured image

Be sure the image you will upload is big enough to begin with. You probably shouldn’t be uploading any images that are less than 1280 px wide (or wider than 2000 px). When you upload to WordPress, a variety of sizes are created automatically based on settings (and theme functions). If the image is large enough, you’ll end up with a Thumbnail, Medium and Large size. If you need to crop the thumbnail for it to appear the way you like, you can do so directly in WordPress – just be sure to select “for Thumbnail only” unless you want all the image sizes to be cropped that way (this is another tutorial). The featured image should be as compelling as possible (not always an option) – don’t publish Posts without a featured image if your home page uses them. If you don’t have one handy for the content you are creating, use a service like unsplash.com to find something interesting. Never use an image from an unknown source that may be copyrighted. Be sure to give credit to the image owner by adding that information to either the image title, title tag and/or alt-text tag.

Excerpt

An Excerpt is the little bit of text about the Post that is frequently seen on the home page or in a category page (like all news). It is a handmade summary of what is in the Post. If your Post doesn’t have much content, you can make it a simple sentence rather than a paragraph. There is no styling of any kind in excerpts so don’t bother with line breaks. Excerpts may also appear on a page of search engine results, so make it informative to get it a higher rating. If you don’t see the Excerpt meta-box beneath the main Editor window area on your screen, look at the top right corner of your page for Screen Options and click on it; you may have to tick the box for Excerpts to make it appear. The excerpt is also often shown by search engines so you want it to be informative.

Publishing

Publish date

Did you know that you can create content in advance and set the Publish date to go live on a particular day and time?

Post status

The only two statuses you should ever be using are Published and Draft. Private is pretty useless as it shows the Post but without the content and with a title that states Private, which is never what you want – and that empty Post is visible to search engines. If you are not ready to Publish, set the Post to Draft mode. It is then hidden from search engines, as well.

Past posts

By default, Posts are chronological. The settings on your website, and possible the custom query your web developer may have created, control the number of Posts that are visible on the front end (visitor view) of the site. You should never put a published Post into Draft mode unless there is some important reason why nobody should ever see it again. Doing so can create broken backlinks (links to your site) and is search engines that have indexed that Post will then designate it as a 404 or “not found” page, which is not good for your SEO. Just leave old posts to move over as new ones come along.

General style tips

You are in your own website, so don’t sign any Posts (i.e. – The Company) and if possible, keep chatty text to a minimum! Stick to the simplest, cleanest content possible to get your message across.
Be aware that floating an image near a bulleted or numbered list can have varying results on different size devices. It’s safer to float right if you must do it at all.
Check and recheck spelling – the spellchecker is on by default in the WordPress Editor
Don’t abbreviate in content text; that is for note taking!
Minimize styling using italic, bold, blockquote, text indents, etc. Don’t use italic and bold on the word. If you find that there are not enough options, talk to the site designer.
Stick to the information hierarchy – Title 2 for the first subtitle level, Title 3 for the next (if there is one). Don’t use header levels for design purposes – they are only there to convey information hierarchy.
If you have outgoing links in your content, be sure to set their target to open in another window (click on the cog icon when selecting the linked text to see that option).
It’s usually best to make galleries the first or last item in a Post to play it safe for layouts on multiple device sizes.
If you are publishing to a bilingual site, don’t forget the second language!

Never, ever…

Paste from elsewhere without clicking the Paste as text option first. This is the most important rule of all.
Add extra returns to increase space between paragraphs or images – call the designer to adjust spacing in the stylesheet if necessary
Add bold or italic (or otherwise style) headers (Title 1, Title 2, etc.). The CSS takes care of that. Ask your designer if you need them bigger, bolder or otherwise styled.
Center images or text (that is “designing” and not your job). Centering is best reserved for advertising, not readable, editorial-type text.
Use images from unknown sources – they may be subject to copyright
Use punctuation in media filenames – periods, commas, &, /, spaces or you may run into display issues
Use ALL CAPS IN YOUR CONTENT OR TITLES. You will go straight to you-know-where if you do. Capitalization is uniquely for acronyms.
End a title with an exclamation! There are very few exceptions to this golden rule.
Use emojis in a professional website (unless you know for sure your target market will love this)

Content creation checklist

Before you hit Publish :

Create an informative title
Create an informative slug (permalink)
Choose the right category (avoid multiples in most cases)
Handcraft an excerpt for the home page and search engines
Add good tags if you’re into that or using them for queries (but don’t overdo it)
Use a well-cropped, interesting featured image that is big enough to have multiple sizes
Add alt-text to images and files for accessibility
Review/preview for spelling, context and SEO best practices