Style guide

Editing blog posts

The editor is simply for working on a single blog posts. Just add a title to start work on a new post.

the editor has two modes, a rich text WYSIWYG editor or a plain text version that supports Jetpack markdown. It’s also possible to work in a full screen mode for distraction free writing.

You can save your post and preview it from the editor.

Managing blog posts

A list of all your published and draft blogs are in ‘my profile’. Here you can edit older blogs, publish drafts, turn published posts to drafts and use the trash features.

Trashed posts can be restored. They can also be deleted permanently. There’s no “are you sure” check for this but only posts already in the trash can be erased.

Titles and introduction

Keep blog titles to 65 characters or fewer, so they are easier to share via Twitter and so that Google displays the whole title, making your blog more discoverable.

Make titles as specific as possible, so that readers scanning the homepage will understand the point of each post at a glance.

The first 50-60 words of your blogpost will be displayed on the OPF homepage. To maximise click-throughs, introductions should summarise the topic  and purpose of the blog post.

End your blog post with a conclusion that highlights the key point(s) made in the post and gives the reader a clear call to action (e.g. ‘Share your thoughts in the comments section below’).

Headings

There are 4 main pre-set headings as below:

Heading 1

All blog titles will automatically be created in Heading 1. Please do not use Heading 1 for headings within the body of your blog.

Please use Heading 2, 3, and 4 within the body of your blog:

Heading 2

Heading 3

Heading 4

Adding an image

To add an image to your blog, use the ‘add media’ function to upload or link to your image. Please fill in the image description and attribution as appropriate in the right side bar and then choose the size and position for your image.

Image size and resolution

For best results your images should be:

  • A maximum of 600 pixels wide
  • Set to a resolution of 72 dpi

Adding a document or PDF

You can use the following html classes to create icons and links to PDFs and documents.

PDFs

<a class=”download pdf” class="external" href=”link to PDF”>title of PDF</a>

See the example on our Vision, Mission and Strategy page.

Documents

<a class=”download doc” class="external" href=”link to document”>title of document</a>

Code formatting

Code formatting in blog posts is provided using https://highlightjs.org/, but you’ll need to follow these instructions.

Other

Author Biographies

Bios are now supported for the author pages, you can add yours from the update profile page.

Avatar support

We’re not currently supporting uploaded images for authors. Instead we’ve opted to use Gravatar, a service that links images to email addresses. Register the email address associated with your account at Gravatar, associate an image with the address, and it’ll show up on the site.