WPMU DEV Style Guide

So, you’re writing for the WPMU DEV Blog. That’s swell!

However, it’s not all WP skillz and quirky turns-of-phrase. In fact, it’s barely that at all because we want the below to be your bible.

So please study the guidelines. Make sure your post works within them all and we promise the goodness will come — and if you don’t follow these rules to the letter we’ll just refer you back here, so you’re gonna have to read them at some point . :)

Go…

Posting Checklist for Bloggers

  • Headlines/Titles — Well-written / catchy / click-inducing / short / literal / non-BS headlines.
  • Focus Your Title — If your topic is very precise, then use targeted phrases that represent it (either use the regular title box for this, or use the Infinite SEO box) – 70 characters max. (details below)
  • WordPress Related Title — While catchy, your title should still include at least one word that is “WordPress Related” — i.e. WordPress, BuddyPress, Themes, Plugins, Multisite, etc.
  • Category — Choose category (max of three, though you might only have one).
  • Tags — Five tags max.
  • Featured Image — Insert featured image (MIN. of 800px wide and a MAX. of 300px in height); leave photo credit at end of post. (details below)
  • WordTwit Pro — add #wordpress hash tag and “by @yourtwitterhandle”
  • Custom Excerpt — Create a custom excerpt that will draw visitors in on social media sites. (details below)
  • WPMU DEV Ads — Control them manually. (details below)
  • Style and Grammar — We follow U.S. English. We also follow the Yahoo Style Guide (check this if you have questions about style or grammar). (details below)
  • Google+ – Make sure your Google+ profile is connected to WPMU.org (details below)
  • Related Posts – Check that the related posts are relevant and select new ones if they are not (details below)
Quick Image Reference Guide
  • Vary Image Styles — Use all image styling options lavishly. Use captions wherever you can. Make your posts beautiful.
  • Image Widths — Supersize – 800px | Large – 700px | 4:1 – 600px | 3:2 – 470px | 2:3 – 340px | 1:4 – 210px (details below)
  • Make Images Accessible — Give image files descriptive names. Fill out “Alternative Text” box. (details below)
  • Supersize Images — Use only one Supersize (800px) per post near the top of the post (after 1-3 paragraphs typically)
  • Annotating Screenshots – Use yellow boxes or circles for highlighting screenshots. Do NOT use arrows or shadows. (details below)
  • Inserting Videos – Use iFrame when embedding videos. (details below)

* Placing code in posts: for PHP, use the following …

{ code type = php } put code here { / code }


Focus Your Title

If you don’t write your regular title to be more accessible to search engines (under 70 characters with the main phrase at the front of the title), you can insert an optimized title into the “Infinite SEO” box.

Focus your title and make it reader-friendly.

You should have access to that section directly below the Write/Edit section. You will probably need to click on it to expand it.

The Infinite SEO section is for putting in more search engine accessible titles – we want to make sure Google users get the best possible experience. Search engines will see that title as will search engine users. So make it both accessible and extremely reader-friendly as well.

The Original Title

Your original  title (not the one in the Infinite SEO box) will be seen on the site itself, but also in RSS feeds, on Facebook, Google+, Twitter, etc. And so it’s important to make it very human readable. Try to entice readers into the post with this title.

While making your title accessible to search engines is less important in the original title, you should also try to include your keywords in it if possible (or variations of your keywords — write for humans first). Search engines will pick up links from that title out on social media sites, and so it’s important to tell them what the post is about. It’s also important that this title has at least one word in it that is WordPress related, such as WordPress, BuddyPress, Multisite, plugins, themes, etc. This will help people who are looking for WordPress info to identify your post as something WordPress related.

(Go Back to Top)


Featured Images

Types of Images: We typically use images with a Creative Commons “Commercial” license with a width of at least 800px and maximum height of 300px. (Leave photo credit at the bottom of the post.)

Try to choose a featured image that will grab someone’s eye in a thumbnail size. These images go onto social media sites such as Facebook and Google+, and so a thumbnail size is all we get. Try to stay away from screenshots as much as possible (for featured images).

An image of two tin cans tied together with string might be a good image for the theme of communication. A screenshot of a WordPress menu, on the other hand, would not make for a good featured image.

Where to Find Images: The following sites have photos available for use. You may know of other good places as well. As long as they are CC-licensed for commercial use, or are otherwise tagged as free to use for a commercial site, then that’s fine.

Please read the fine print for EACH photo to make sure it’s available for use. 

Creative Commons Search - Search a number of sites via the Creative Commons site.

Flickr - Make sure to search for images to use commercially.

Compfight - This is a Creative Commons search engine for Flickr. You will need to make sure you also filter results for commercial use. Even though this is a search engine for Flickr, it will sometimes show you different results from what you get with Flickr’s in-house search engine.

Photo Pin – Another Flickr search engine.

Every Stock Photo

Freerange Stock Photos

Stock.Xchng

(Go Back to Top)


Insert a Custom Excerpt

You should have access to the excerpts box. If not, please check the “Screen Options” panel that pulls down from the top of the page to make sure the Excerpt box is checked.

Entice readers with your excerpt. It’s one of the most important pieces of text you can write because it’s seen on social media sites.

The custom excerpts are extremely import because they help pull in readers on social sites like Facebook, Twitter, and Google+. Make them as enticing as possible.


WPMU DEV Ads

WPMU DEV Ads are the internal ads we run on our posts (except when we’re writing about a WPMU DEV product). They are the blue boxes with the dotted edge. Here’s an example off to the side.

Make sure you manually insert WPMU DEV ads to control the look of your post.

You can manually insert these ads into your posts. If you don’t manually insert them, then the system will insert them randomly, and this can break up your post in odd ways.

Typically, you will want to insert the first ad about 2-3 paragraphs into the post (at the natural end of a section – as in the screen shot above). Then insert another ad after a few more paragraphs (again, at the end of a section), etc. Some posts may also have a lot of images, and so this will make the post physically longer. Take that into account as well. You’ll also want to insert one last ad at the very end, and then place the photo credits after it.

These are just very basic guidelines. You will need to “eye” your post to see what’s right. You don’t want to overwhelm the post with ads, but the ads are also what ultimately pay the bills.

As a rough estimate, you may want about three to four ads for every 1,000 words. Again, this all depend on how physically long your post is once images are included.

The following graphic shows you how to insert the ads manually. When the window pops up to choose an ad, you can just choose “Insert blank …” and it will choose one randomly.

(Go Back to Top)


Post Styling

Remember to break up your post into smaller chunks for easier web reading. Keep in mind that people often scan text on the web.

You can break posts up in a number of different ways. Use the following:

  • images (with captions when appropriate)
  • subheads
  • bullet points or numbered lists
  • bold or italicized text
  • quotations
  • short paragraphs

People are used to reading much shorter paragraphs on the web than they are on paper. Therefore, don’t be afraid to break a traditional paragraph up into several smaller paragraphs of a 1-3 sentences.

Also please see our guide for including images.

(Go Back to Top)


Images in Post

Make liberal use of images. Position them in different ways too.

Make sure to use images in your posts whenever possible, either for instructional purposes or to break up the text and to provide a more interesting reading experience.

It’s usually a good idea to place a Supersize image (800px) near the top of your post after the first paragraph or two. This should be the only Supersize image in your post.

After that, you will want to have a mix of image sizes and positions if possible.

If you are trying illustrate something important, you will probably want to use a Large sized image (700px). You might also use a Large sized image for a “decoration” image, but only if the image is very impressive. If it’s not an overly impressive image, you might choose to make it much smaller and wrap text around it as illustrated at the top of this section. You’ll notice it also includes a caption. Instructional/Screenshot images often will not have a caption, but other images should.

Using WPMU’s Custom Media Uploader

You will notice that WPMU’s media uploader is not exactly like the default WordPress uploader you’re probably used to. You will notice that the bottom of the media popup screen looks like the following.

In the top row you will see the Image Variation field. This determines where you want the image to appear. Supersize (800px) and Large (700px) images are always centered. Captions for both appear under the image. And so each of those is pretty straight forward.

When you choose to align an image to the left or to the right, however, you are offered a number of other choices.

Position and Image-to-Text Options

The first choice is the image-to-text ratio.

You can see a little icon beside each ratio to give you an idea of what it means. In the first icon on the left (the 1:4 ratio), you can see an icon with a tiny blue box and lots of lines to the right. This represents an image that takes up 1/5 of the space in the column. The other 4/5 of the column is occupied by text.

The next choice you’re offered is whether to place the caption directly under the image or to the side of the image.

If you choose to place the caption directly under the image, then 1/5 of the column will be occupied by the image with the caption underneath it. And the other 4/5 of the column will be occupied by the text of  your blog post.

This is an example of the 3:2 ratio in action with the caption underneath. You can see that the image takes up 3/5 of the column, and the text from the post wraps around it and takes up the remaining 2/5 of the column.

If you choose to place your caption to the side of the image, however, then 1/5 of the column will be occupied by your image, and the other 4/5 of the column will be occupied by your caption (NOT the text from your blog post). Let’s see an example of how that looks.

And of course the aligned left position works the same way, except reversed.

OK, so to recap. You have three basic alignment positions as normal:

  • centered
  • aligned left
  • aligned right

In addition, however, you have the ability to place captions out the side of the image if it is aligned left or aligned right.

You might notice that the caption looks a little strange out to the side if you don’t have a lot of text, so you’ll want to take that into consideration.

Once again, see our guide for image positioning.

Image Sizes

Your images should be one of the following six sizes, depending on how you would like to align them.

  • Supersize — 800px … (always centered)
  • Large — 700px … (always centered)
  • 4:1 — 600px … (4/5 occupied by the image, and 1/5 occupied by text)
  • 3:2 — 470px … (3/5 occupied by the image, and 2/5 occupied by text)
  • 2:3 — 340px … (2/5 occupied by the image, and 3/5 occupied by text)
  • 1:4 — 210px … (1/5 occupied by the image, and 4/5 occupied by text)
This is an example of the 3:2 ratio with the caption out to the side. You’ll see in this example that the image takes up 3/5 of the column and the caption (NOT the blog post text) takes up the other 2/5 of the column. A layout like this typically works better if you have plenty to say in your caption.

(Go Back to Top)


Make Images Accessible

Make images easily accessible to text/screen readers with descriptive file names and alternative text.

File Name

Name your image files so they make sense. The name of your image file will also automatically become the title of your image in WordPress. Therefore, don’t name it something like “pic0000324987.” Name it something appropriate such as “youtube-featured-video-popup.”

Alternative Text

Alternative text, also known as “alt text,” is an opportunity for you to describe your image in a short sentence or phrase. When you do this, think of describing your image (in the context of your post) to someone who is visually impaired.

Here’s a look at an image from a post about WPMU DEV’s YouTube Featured Video plugin. You will see that the title (“youtube-featured-video-popup”) was taken from a descriptive file name. And then a short sentence describing the image (“A YouTube Featured Video popping up from sidebar area.”) was added to the Alternative Text box.

(Go Back to Top)


Screenshot Guide & Annotations

No doubt many of you will need screenshots in your posts. If you don’t have a tool to do this already, Jing is a free one you can use.

In order to highlight an area of a screenshot, please use a yellow outlined shape such as a yellow square or a yellow circle. Please DO NOT USE arrows or shadows.

While the Jing tool mentioned above captures screenshots, unfortunately all the shapes seem to include shadows (which we want to stay away from). So here’s another free tool you can use to create yellow shapes without shadows — Splashup.

Here’s a very short tutorial for annotating an image with shapes in Splashup.

1. Import your screenshot: File > Open

2. Set your color to yellow on the right hand side by filling in the color section with either:

A: 100 R:255 G234 B4  (then hit return)

or

#ffea04 (then hit return)

3. Switch the colors so that the yellow is now displayed in the background (left side).

4. Select the “+” from the layers palette (right side)

5. Select the “Box” or “Circle” tool from the Tools palette (left side)

6. Click and drag to draw out the rectangle. Once complete, choose File > Save Image.

(Go Back to Top)

Embedding Videos

Videos should be embedded in posts using iFrame. When embedding videos from Wistia, choose “iFrame” under embed type:

Wistia

(Go Back to Top)


Connect Google+ Profile to WPMUDEV.org

If you don’t have a Google+ profile, then please get one and connect it to premium.wpmudev.org/blog. Here’s the procedure for that:

In the premium.wpmudev.org/blog admin area, go to Users > Your Profile > Enter Your Google+ URL (for example, https://plus.google.com/100867129079471807437/posts).

In Google+ add premium.wpmudev.org/blog to your profile by going to Profile > Edit Profile > Contributor to > Add premium.wpmudev.org/blog

(Go Back to Top)


Ensure Related Posts Are Relevant

Related posts need to be, well, related. Unfortunately, YAARP doesn’t always pull up the best related posts and can list posts that have been 301-ed and no longer exist, so it’s important to check related posts that appear at the bottom of articles are appropriate and relatively fresh.

1. In the Post Editor, scroll down to the bottom to the Related Posts section and check out each of the posts that are listed.

YAARP

2. Uncheck any posts that are irrelevant, old or have been 301-ed.

3. Search Google for topics similar to what you have written about. For example, if your post is about popular post plugins, search for “site:premium.wpmudev.org/blog popular post plugins.”

Popular post plugins search

4. If any of the posts listed in Google search are a better match for your article, copy the post’s URL into the “Enter your post URL” text field and click “Add.”

5. Once you have three related posts you are confident are relevant and complement your post, click “Save and Publish This Selection.”

(Go Back to Top)

Image credits: Beautiful Sceneries in Photos on Green Field Background, Abstract Motion Blur Horse Race, and Washington DC Architectural detail of columns and marble steps from BigStock.