WordPress guidelines

Posts

Posts are used for informational, timely content, such as news, case studies, blog posts and ‘from the field’ updates. The majority of new content created on the site will be in the form of posts.

URLs for posts contain the month and year that the content was published, while pages do not.

Posts are also labelled with tags and categories. These tell WordPress what sort of content the post contains, enabling it to be displayed on other relevant pages around the site.

Pages

Pages are the main building blocks of the site that are used to host other content. They are generally reserved for static content, and usually don’t change too much, such as the ‘About us’ page.

Unlike posts, pages don’t use tags or categories, but can have a hierarchy, which means they can be nested under other pages by making one the ‘parent’ of the other, thus creating a group of pages.

The parent page will also appear in the page’s URL. For example, here the ‘Protecting sight’ page is the parent page: www.sightsavers.org/protecting-sight/what-are-cataracts

If you want to create a new page, think about where it will sit on the site, and what its parent page will be – don’t just hang it off the home page (this is bad for SEO and navigation).

When building a news story or blog, use the relevant template in WordPress by cloning the relevant news template or blog template for the site you’re working on.

These posts are set up with all the correct modules and elements already in place. (Note: always make sure you clone the template – do not overwrite the original template!)

Once you’ve cloned your post, rename it and change the URL, then click ‘Save draft’. You’re now ready to build a post.

For full information and step-by-step guides, see the following Word documents:

• Uploading news stories
• Uploading blogs

Intro text

The first sentence of a news story or blog should be in Lead style, which is pre-set in the template. Make sure your intro isn’t too long – ideally no more than 25 words. Edit it if necessary. Don’t include links in the first sentence (move them to later in the story).

Additional elements

On .org, all news stories and blogs should also contain three modules after the main text:

• Share page module: The text reads ‘Share this story’. Leave the first ‘text’ field blank.
• Call to action (CTA) module: This directs the user to another relevant area of the site (for example: Want to read more about our work? > Sightsavers and eye health). Make sure the option to remove the bottom margin is selected.
• Discover more module: This displays a selection of related posts or pages. You don’t need to add a title.

All blogs need an author: this will be displayed under the heading, before the date.

If the author is a member of Sightsavers staff, select their name in the drop-down Author box in the CMS. (If you can’t see the Author field, scroll to the top of the WordPress window, select ‘Screen options’ and check that ‘Author’ is selected). If their name isn’t on the list, they’ll need to be added as a user. Ask a member of the web team to add them.

If the author is not a member of Sightsavers staff, use ‘Guest author’ as the author, then introduce the author (including their job title) in the first paragraph of the blog.
For example: ‘Dr Paul Lynch is a research fellow at the Visual Impairment Centre for Teaching and Research (VICTAR) at the University of Birmingham. Here he discusses an early childhood development and education training programme in Malawi for families with children who have visual impairments.’

Adding author bio box (photo and description)

All blogs written by staff should have an ‘Author bio’ box below the final text block and ‘Share’ module. (If the blog is ‘written’ by Sightsavers, you can use the Sightsavers logo in place of the author photo.)

Author

Joseph Mensah is Sightsavers’ technical adviser for civil society organisation grants and social movement. He is based in Ghana.

If you don’t have a headshot

1. Copy and paste the relevant HTML code below into a text block after ‘Share this story’ module.
2. Amend only the bits that are highlighted in bold. You may not want to display Twitter, Facebook and email, so delete as appropriate.
3. Review and publish page.

If you do have a headshot

1. Place photo into the template author-headshot.psd and export as PNG. (Ask web team for help if you’re unsure how to do this.)
2. Upload the PNG to media library.
3. Copy image URL and paste it into the relevant HTML code below.
4. Copy and paste the code into a text block after the ‘Share this story’ module.
5. Amend only the bits that are highlighted in bold. You may not want to display Twitter, Facebook and email, so delete as appropriate.
6. Review and publish page.

———————– The code ———————–

 
<div>
<strong>Author</strong>
<hr style=”display: inline-block; width: 100%;” />
</div>

<img style=”margin: 0px 30px 100px 0px;” src=”https://www.sightsavers.org/wp-content/uploads/2017/10/Sightsavers-Author-Placeholder.png” alt=”Put some alt text here” width=”120″ height=”120″ align=”left” /><b>Name</b>

This is where you need to write a short description.<br><a href=”http://www.twitter.com/sightsavers” target=”_blank” rel=”noopener”>Twitter</a>   <a href=”mailto:[email protected]?Subject=Hello%20again” target=”_top”>Email</a>   <a href=”https://www.linkedin.com/company/sightsavers” target=”_blank” rel=”noopener”>LinkedIn</a>

———————– End of code ———————–

Call to action modules give visitors a specific action to perform (usually donate or read related content).

There are three different options:

• Basic CTA modules (with no image) are a single bar of text with a button. They should be limited to approximately 10 words, so they fit on a single line. The margin below the call to action should normally be removed, unless it’s followed by a plain text block.
• CTA modules with image are displayed as a larger box with a side heading and a button. They should be limited to approximately 25 words of text.
• Signposting CTA modules with image are displayed as a larger box with side heading, description and button. They should be limited to approximately 60 words of text, plus a heading.

For all CTA modules, the following rules apply:

• Make sure the text isn’t too repetitive.
• Make sure the button text is descriptive and tells people what they’re clicking on. Avoid ‘Read more’, ‘Find out more’ etc. (Instead of: ‘Want to read more about our work? > Read more’, try: ‘Want to read more about our work? > Sightsavers and eye health’)
• Always preview the CTA to make sure the text looks neat, headings/text aren’t too long etc.

Donate buttons on CTA modules

These are always orange (select ‘Donate’ as the option in the CTA box and WordPress will change the colour automatically).

Text on donate buttons should read DONATE (upper case).

If the buttons need to link to a custom funnel, use the ‘Donate CTA override’ box in WordPress to specify the funnel’s source code (not the full URL). This will direct all donate links on the page to the specified funnel. Note: any changes to the donate funnels should only be made in consultation with the digital fundraising team.

The Discover More module uses tags to pull in related content, giving visitors the option to read more about Sightsavers.

You can set the content you want to display by selecting one or more tags, and choosing whether the content should include either or all the tags.

You can also choose specific stories to display, although this is discouraged: this content won’t be automatically updated, so will go out of date very quickly.

In almost all cases, the module should be limited to three items.

• Content type: choose by tags
• How many posts to show: 3
• Choose one or two closely related tags (ie the country, the specific condition)
• Avoid choosing wide-ranging tags (ie news, eye health) – this will pull in a lot of unrelated content.
• If placed at the bottom of a page, make sure the margin below is switched off.

We also have an updated Discover More 2.0 module, which is more flexible. For instructions on how to use it, see the separate sheet ‘How to use Discover More 2.0’.

Donation modules are overseen by the digital fundraising team (DFT) to ensure they are effective, accurate and suitable for the page on which they appear.

They can be used as a side panel (alongside a text block), or at the foot of the page (as a larger full-width block).

If you want to add donation modules to a page or post, speak to the digital fundraising team for guidance on wording, amounts and how the modules should be built.

For more details, see our donation module guidelines Word document.

For security and compliance reasons, all supporter data from email sign-up forms must go through Adestra, our email client.

There are two ways of adding an email signup form to a page.

1. Use the ‘email sign-up block’ module in WordPress. You’ll need to include the correct Adestra list ID (see below).
2. Within a text block using a short code – this means the form can be placed anywhere that text can be written. To insert the form, write the following within square brackets [ ]: EmailSignup=k/the_path_to_the_form_in_adestra

For more detailed info about email forms, see the document entitled Email Signup_How it Works.

Current email list IDs

• UK/Global welcome journey: k/Sightsavers/web_subscribers_2021_uk
• IRE welcome journey: k/Sightsavers/web_subscribers_2021_ie
• USA welcome journey: k/Sightsavers/web_subscribers_2021_us
• ITALY welcome journey: k/Sightsavers/italy_website_signup_box_new_may_18
• Inclusive Futures: k/Sightsavers/web_subscribers_inclusive_futures

Please note any new list ID created in Adestra will need to be added in Cloudflare for it to work within the email module. Please contact Amber and Pete in the web team for guidance.

For consistency and to ensure they display correctly, all images must be cropped to the following dimensions before being uploaded:

• 1500 x 843 px (16:9 ratio)
• 72dpi

This should be done in Photoshop, or using an online image editor such as Pixlr. If you don’t have access to image editing software, or aren’t sure how to use it, contact the web team for support.

All images uploaded to WordPress must follow the correct naming convention.

This is so images older than five years can be easily identified and archived, to ensure we comply with the ethical content policy.

• YYMM_descriptive-name-including-first-name-country-condition-or-job-title

For example: ‘2005_Sightsavers-yousuf-from-malawi-has-his-eyes-checked-for-trachoma’
(This image is from 05/2020)

The date, in YYMM format, must be the date the image was created (not the date it was uploaded to WordPress). This can be found in iVillage, either in the original image filename or in the image data.

All images should be credited with the name of the photographer.

Use the following text at the end of the image caption: © Sightsavers/photographer name

If the same photographer took all the images on the page, there’s no need to credit every image. Use a single credit in the final caption on the page: All images © Sightsavers/photographer name

Images without captions

If you’re unable to put credits in the captions (ie you’re using full-width parallax images, or the individual images don’t have captions), place the credit(s) at the end of the final text box, preceded by a horizontal rule.

To create the rule, use the following HTML pasted into the ‘Text’ view of the text block:
<div><hr style=”display: inline-block; width: 100%;” /></div> 

This will appear as follows:

All images © Sightsavers/photographer name

Hero images

If you need add a credit to the hero image but can’t use one of the methods above, use the hero CTA option in WordPress and add the credit in the ‘Hero CTA copy’ field.

If a sponsor or partner logo is needed on a page, post or case study, there are two ways to display it.

1. As an image in the side panel

Upload the logo as an image (in the standard dimensions), then position in the side panel alongside a text block.

2. At the end of the final text block on the page

The logo sits within the text, with accompanying text on the right.

To do this, first, upload the logo, cropped to the edges of the logo (no need to use 16:9 ratio – just crop neatly around the logo). Then paste the following code at the end of the final text block (you’ll need to switch to ‘Text’ view, rather than ‘Visual’ view on the top right of the module). Replace the text in bold with the relevant text/links as needed.

———————– The code ———————–

<div>

<hr style=”display: inline-block; width: 100%;” />

</div>

<img style=”margin: 0px 0px 5px 0px;” src=”URL of logo goes here” alt=”Alt text here” width=”135″ height=”135″ align=”left” />Accompanying text in here <a href=”Link URL if needed“>Link text if needed</a>

———————– End of code ———————–

This will display as follows:

Both the report and assessment are published on the Accountable Now website and our own. Read our latest report

Metadata literally means ‘data about data’. In this context, metadata is information that describes a page or post. This includes its title, description and preview image.

Software used by services such as search engines and social media platforms will use metadata to summarise a page’s content. Good metadata can increase the page’s visibility in search engines and the likelihood of someone clicking through to the content from social media.

While you can edit metadata after your page is published, it will take time for search engines and social media platforms to reflect these changes. There is no easy way or quick fix to force them to recognise your changes sooner. Therefore, it’s best to get it right first time!

When you make a page or post in WordPress, it will automatically be assigned metadata based on values that you enter elsewhere.

• The page title will be sourced from the page name. This is the page’s title within WordPress, not the hero heading that appears on the page itself.
• The description will be sourced from the excerpt field.
• The preview image on social media will be sourced from the featured image. You should ensure this is a high-quality image – our WordPress hero photo format (1500 by 827px) is fine.

You will probably want to edit this metadata, especially if you have cloned your page from an existing piece of content.

You can add and edit metadata using the Rank Math SEO tool in the WordPress editor. If you can’t see it, scroll to the top of the WordPress editor and click ‘Screen Options’, and then ensure ‘Rank Math SEO’ is selected.

On the Rank Math SEO tool, click ‘Edit Snippet’. This will bring up the Preview Snippet Editor, which is divided into ‘General’ and ‘Social’.

Begin by setting the values in the ‘General’ tab, which are usually used by search engines, and then move across to the ‘Social’ tab. This will pull through the values you’ve entered in the ‘General’ tab, but you should tweak them for Facebook and Twitter.

The page title can be approximately 60 characters in length before it will be truncated in search results. It also needs to end with “ | Sightsavers” (14 characters). This leaves around 46 characters for you to describe the content of your page in an interesting way. By default, the title will formatted using variables which you can safely overwrite.

The next field lets you set the permalink (basically, the URL) of the page. This is automatically set to a unique value based on your page name and shouldn’t usually need to change. If it does, please ask the Web, Design and Branding team for support via the Service Desk.

You are much more likely to need to edit the final field on this screen, ‘Description’. The maximum number of characters which will appear on search engines is approximately 155 to 160. There is no need to namecheck Sightsavers here, so you can use this full space to summarise your page in an interesting way that will encourage searchers to visits.

On the ‘Social’ tab, under ‘Facebook’:

• Remove “ | Sightsavers” from the end of the title. Because this is immediately after our domain ‘sightsavers.org’, there is no need to display it twice. It’s better to use this limited space to write the most enticing headline you can for your content.
• Cut down the description to one short sentence, using the preview above to help. Make sure this is a concise summary of the key content on your page.

Twitter has longer character limits than Facebook, closer to those for search engines. Therefore, it’s optimal to go to the Twitter tab and uncheck ‘Use Data from Facebook Tab’. You can then edit the title and description to be interesting and engaging.

Alt text is a simple text description of an image.

It’s particularly useful for people with visual impairments who use screenreading software: the software reads the alt text aloud so the user can understand the image without being able to see it.

The alt text should always consider the context in which the image is shown, to ensure screenreader users are able to benefit from the information being presented without being overloaded with too much info.

The alt text should give a brief description of the image. No need to write “Image of…” or “Picture of…”– the screenreader will do this automatically. Always end with a full stop.

For example:

• Aisha waits nervously for her cataract operation.
• Two young men smiling: one holds a white cane.

If the image already has a caption, avoid repeating exactly the same information in the alt text and the filename.

The screenreader will read out all of these, which can be very repetitive. Instead, vary them slightly so they complement each other.

For example:

• Caption: Majidul smiles as he sits with his parents following his cataract operation.
• Alt text: Majidul with his parents.
• Filename: Majidul from Bangladesh.jpg

For images that are purely decorative or background items, don’t use alt text.

Instead, use empty quote marks “”, which will instruct the screenreader to ignore the image.

If the image contains a graph, text or other numerical data, it’s best practice to include all the data in the alt text.

For example: A pie chart showing the causes of blindness worldwide, featuring the following statistics: cataracts 51%, glaucoma 8%, trachoma 8% and other 33%.

The wording for links should be descriptive and give an indication of what the link is about.

• For example: Sightsavers’ work on social inclusion.
• NOT: Read more

This is to ensure good accessibility. Screenreaders can be used to read out a list of links on a page – if all links are labelled ‘Read more’, it is impossible for users to know which one is which.

Avoid overly short hyperlink text (ie single words) – this can be inaccessible and hard to click on. Equally, avoid extremely long hyperlink text, which can look ugly and take up a lot of space.

Ideally, the hyperlink text itself will use three or four relevant, descriptive words to explain exactly what the link is about. For example: To learn more about our work, read our eye health strategy. (This is preferable to: To learn more about our work, read our eye health strategy here.)

• Don’t include any ellipses (…) or other symbols (>) after the link.
• Don’t change the font style of links (don’t use italics or change the colour, for example).
• Avoid adding hyperlinks in the first paragraph of a story: it can look odd when using the Lead style.
• If you want to use links anywhere else (ie in side panels or image panels), check with the web team: there are a few technical and UX points to consider.

External links (ie anything that’s not part of whichever website the user is currently visiting) should be set to open in a new tab.

This means people can easily switch tabs to get back to the site, rather than navigating away and not being able to find their way back.

To open a link in the new tab: when adding a link, click on the ‘Link options’ cog, then check the box labelled ‘Open link in a new tab’.

Wherever possible, CTA bars, buttons, promo blocks etc should be reserved for internal links only. Avoid using these buttons to link to external sites: this can be confusing for users, who may not know where they’re being directed to.

On the rare occasion where you do need to use a CTA or button to link to an external site, use the text to make it clear to users where they’re going. For example: ‘Read on The Lancet website’.

This includes links to the Equal World campaigning site at https://campaigning.sightsavers.org, which should be referenced as ‘Read on our campaigns website’.

All documents uploaded to the site should, except in very rare cases, be in PDF format. Do not upload editable Word documents to the site without contacting the web team.

Rename the document to ensure the filename is professional and meaningful for users, ideally including ‘Sightsavers’. For example:

• Do use: Sightsavers-annual-report-2022.pdf
• Don’t use: JN_1427_Annual-report-v10-FINAL.pdf

Before uploading any documents, policies or PDFs to the WordPress media library, search the media library to see if the document you’re uploading is already on the site. The aim is to avoid duplicated documents.

Each document on the site should have its own post (this is beneficial for SEO), although you can still link directly to the document URL. However, if the document is subsequently updated, each link to the URL will need to also be updated.

For more information, refer to the ‘Uploading documents instructions’ Word doc.

Links to documents should be set to open in a new tab.

When linking to a document, the link or button should be worded as follows, with the type of document in brackets:

• View the report (pdf)
• View Sightsavers’ Global Eye Care Strategy (pdf)
• View Getty’s speech to the UN (presentation)

For more information, refer to the ‘Uploading documents instructions’ Word doc.

Sightsavers’ policies (ie privacy policy, child safeguarding etc) need to be carefully monitored on the site to ensure all links are up to date and link to the correct version of the policy.

Before uploading, check the spreadsheet (Global website page and post tracking > Policies tab) to ensure you’re not duplicating an existing policy. When adding a new policy, make sure it’s logged on this spreadsheet.

• All policies uploaded to the site must be in the latest Sightsavers template, with correct formatting. (If you have any queries, contact brand manager Natacha Toledo).
• All policies uploaded to the site should be in PDF format.
• Rename the PDF to ensure the filename is professional and meaningful for users, ideally including ‘Sightsavers’. For example:
  • Do use: Sightsavers-privacy-policy-2022.pdf
  • Don’t use: JN_1427_privacy-FINAL_KM.pdf
• When updating a policy, ensure all links are updated, as listed in the spreadsheet.

Categories appear above a post’s title. These can be assigned using the Categories pane on the right-hand side of the WordPress CMS. Make sure that the correct category (the type of content) is showing as ‘Primary’, and ensure the ‘Uncategorized’ option is deselected.

Every post should be given one of the following primary categories depending on the type of content:

• News
• Blogs
• Stories
• From the field

Every post should also be given a secondary category depending on its thematic area:

• Eye health
• Fighting disease [NTDs]
• Disability rights
• Education
• Fundraising

If a story or post could fit into two or more secondary categories, the following rules apply:

• For a story about children with disabilities going to school, disability rights should be selected (rather than education).
• For a story about trachoma, for example, fighting disease should normally be used as the category (rather than ‘eye health’). However, this can be decided case by case depending on the content of the story.

Every post on the site should feature relevant tags that relate to its content. This tells WordPress what the content is about, and enables the post to be pulled into Discover More modules when the relevant tags are selected.

There’s no limit to the number of tags that can be added to each story, but the key is to make sure they’re relevant. Tags should be chosen from the list of commonly used tags in WordPress. Please don’t add any new tags. If the tag you want to use isn’t in the list, speak to the web team.

For example, a news story about trachoma in Nigeria could include the following tags:

• News
• Africa
• Nigeria
• Trachoma
• Eye health
• NTDs

Make sure you always include the tag that matches the type of content you’re writing (ie news, blog, from the field or story). This will ensure your content shows up in the correct place on the website.

For the Swedish site, we only use ‘close’ quote marks (known as ‘99s’) for all quotations.

This is the common usage in Sweden.

For example: Sightsavers CEO Caroline Harper said: ”I want to save sight.”

Where possible, add your copy to WordPress using the text editor tab, rather than the visual editor tab.

This method avoids adding unnecessary HTML code and formatting into the website, which often originates from Word templates or programmes such as Grammarly.