WordPress editing tips

    Getting started

    The login page for your website will be your url with /wp-admin at the end (for example yourwebsite.com/wp-admin).

    Please note if your site is in development there will be a different URL to the final one when the site goes live. Your username and password will be the same.

    When you’re logged in, the first thing you will see is the Dashboard – this is a summary page for your WordPress installation. It can be customised, but by default it should show things like Recent Activity, and WordPress News.


    The most important part of the user interface (UI) is the bar on the left. This is the main navigation for the WordPress back-end. It will have a list of several sections, beginning with the types of content on your website. This will vary depending on your site. For example your site may have the following:

    • Posts
    • Pages
    • Events
    • Blog

    It then has links to WordPress settings, Appearance options, User settings, and custom plugin options. Be careful with changing settings. If you’re not 100% sure what something does, it may be best to leave it alone. Editing content is a lot more flexible and forgiving, there is very little you can ‘break’ just by editing content.

    Users

    Users are people who have access to the back-end or admin part of your website. If you do not see a specific option, bear in mind that only users who have a role of Administrator can change important settings. Users who are Editors can usually only edit content. This control is set up in Users, where new users can be added, and existing users can have their role changed, password changed, etc.

    Types of content (post types)

    It is important to have a good understanding of the available content types in your WordPress before making changes, or more crucially when adding new content. Almost every WordPress site we make has its own bespoke set of content types. The main default content types are Posts and Pages. The difference is sometimes a bit tricky to understand, aside from the name, but Pages are usually ‘static’ types of content that are are individual stand-alone resources, they do not usually share common data. General articles about your organisation will usually be set up as Pages. On the other hand, Posts are more flexible, but generally used for things like Blog pages and News items. Posts can also be highly customised, and may have much more going on than just an article of text. Posts can also have Tags and Categories, these are a type of Taxonomy, which is a fancy name for classification, or categorisation.


    In addition to Posts and Pages, your website may have custom post types set up. These are even more customised versions of Posts, so customised they have their own name and rules. They have different fields (places to add data) and are being used in specific and unique ways.


    Please note that the content types do not necessarily correspond exactly with the front-end navigation, i.e. posts of the same type may be output in different sections of your site on the front-end.


    Writing for the web

    • It is ideal to have a consistent tone of voice across all copy on a website. This creates continuity and prevents the content and organisation appearing fragmented. If there are a number of people with editorial rights to the site, you may like to have one or two central people to run copy through/sign it off to help maintain the organisation’s voice.
    • Use consistent formatting when laying out text (i.e. using headings, subheadings, making text bold etc) it is best to have a standardised way of doing this.

    Meet the user need

    • Always keep your audience in mind when creating copy for your website. Try to think about what they would want to get from the site and what tone of voice is suitable for them. Your writing will be most effective if you understand who you’re writing for.
    • To understand your audience you should know:
      – How they behave, what they’re interested in or worried about – so your writing will catch their attention and answer their questions
      – Their vocabulary – so that you can use the same terms and phrases they’ll use to search for content
    • When you have more than one audience, make your writing as easy to read as possible so it’s accessible to everyone.
    • Don’t publish everything you can online. Publish only what someone needs to know so they can complete their task. Nothing more.
    • People don’t usually read text unless they want information. When you write for the web, start with the same question every time: what does the user want to know?
    • Meeting that need means being:

      specific
      informative
      clear and to the point

      
    • Avoid ‘walls’ of text – break up your content into easily- digestible chunks, and use headings to create sections that humans can easily understand and take in. This is also great for search engine optimization (SEO) because headings (titles) and subheadings (summary) have greater importance than normal paragraph text for search engines. Try to think about what they contain and make the content meaningful and refer to key points of the paragraph text.
    • Good online content is easy to read and understand.
      It uses:

      short sentences
      sub-headed sections
      simple vocabulary

      
    • This helps people find what they need quickly and absorb it effortlessly.
      

    How people read content on the web

    • Users read very differently online than on paper. They don’t necessarily read top to bottom or even from word to word.
    • Instead, users only read about 20 to 28% of a web page. Where users just want to complete their task as quickly as possible, they skim even more out of impatience.
    • Remember that the pressure on the brain to understand increases for every 100 words you put on a page
    • Web-user eye-tracking studies show that people tend to ‘read’ a webpage in an‘F’ shape pattern. They look across the top, then down the side, reading further across when they find what they need.
    • What this means is: put the the most important information first. For example, say ‘Canteen menu’, not ‘What’s on the menu at the canteen today?’
    • Avoid the urge to always state the name of your organisation as the first word(s). This helps people identify the most important information to them as they scan quickly through the page and is good for SEO.
    • Following these guidelines will help head off the F shape reading pattern.

    Writing for specialists

    Research shows that higher literacy people prefer plain English because it allows them to understand the information as quickly as possible.

    For example, research into use of specialist legal language in legal documents found:

    80% of people preferred sentences written in clear English – and the more complex the issue, the greater that preference (eg, 97% preferred ‘among other things’ over the Latin ‘inter alia’) the more educated the person and the more specialist their knowledge, the greater their preference for plain English

    People understand complex specialist language, but don’t want to read it if there’s an alternative. This is because people with the highest literacy levels and the greatest expertise tend to have the most to read. They don’t have time to pore through reams of dry, complicated prose.

    Where you need to use technical terms, you can. They’re not jargon. You just need to explain what they mean the first time you use them.


    How to create accessible content

    When a website is designed with accessibility in mind and built correctly to be inclusive to everyone, users will have equal access to its information and functionality. A site that is not built accessibly will present barriers to people with disabilities that prevent them from accessing the content or using the site at all.

    Grid of different coloured box with icons to represent different abilities

    So when you’re creating content for a site – or updating a current website’s content – it’s useful to know what the most common barriers to access are, so you can avoid them.

    The following information is thorough and therefore we have included points that will be controlled by the coding of the website (e.g. the text size) but it is useful for you to be aware of.

    Eight Most Common Barriers to Access

    The Web Content Accessibility Guidelines (WCAG http://www.w3.org/TR/WCAG20/) has 65 checkpoints. Research has found that 82% of access problems are related to 8 of these points – some of which will affect the creation of content. We’ve included all 8 barriers here as they help to explain a little about how people with disabilities use the web:

    1. Divide blocks of information into more manageable units

      Check all the text and try to make it clear and concise and avoid long, wordy passages.

      You can divide the info up by adding photos and images, and organise it into subject areas and use headers. Breaking it down into smaller chunks will also make it easier to digest.

      WHY: adding headings and splitting the text into smaller chunks make content easier to understand. Many users (including those with reading difficulties such as dyslexia or those with visual impairments) will find long and wordy passages hard to wade through – breaking it down will help them and many others to understand what you’re trying to say.
    2. Add an overview to every page: add a short description at the start of each page saying what the section is about, to help give the user an idea of what the main content is and what their main options are. 

      WHY: some users can’t glance at or scroll around a page to get an idea of what’s there (e.g. if they’re a blind screen reader user or using adapted hardware due to restricted movement). One or two lines about what’s on this page will help clarify what’s coming up and decide whether to spend more time on the page or not. It’s a quick snapshot of what’s coming up in case they can’t see or process the visual information themselves, and will save them time and energy of having to move around slowly and work it out for themselves.
    3. Increase ‘leading’ (space between lines of text) – it’s harder to read blocks of text when the lines are close together.

      WHY: increased space between lines improves legibility for everyone.
    4. Ensure that foreground and background colours have sufficient contrast

      Contrast between text and background colours needs to be high to provide good contrast.

      Another point related to overall legibility (rather than colour contrast) is to ensure that a clear font is used throughout, and some effects such as italics are avoided – many partially sighted users find these effects harder to read.

      WHY: increased colour contrast and clear font choices makes it easier for users with reading difficulties to read. Conversely low contrast, such as grey text on a beige background, make it much harder to read.
    5. Avoid creating pop-ups and new windows without informing the user

      If any content opens in a new browser tab or window it’s polite to inform users this is about to happen so they know what to expect.

      WHY: if the user isn’t told that a new window is about to open up, they can get ‘lost’ within that window and not know how to get back to the original site. This is especially frustrating for some assistive technology users, e.g. a blind screen reader user won’t know that they’ve moved to a new window and might become stuck there or at least frustrated that they have to work their way back.
    6. Provide a text equivalent for every non-text element

      Add captions and descriptive alt text to all photos, images and maps used throughout the site.

      WHY: Adding information and alt text to every image makes visual content more accessible to partially sighted magnifier users and blind screen reader users as well as compatible with other assistive technologies. A short text description of an image can unlock the information within a picture and enrich the experience and understanding of a story for users – alternatively, without it, images will be inaccessible for blind and partially sighted users. Related to this, images do help to liven up the content, but ensure that images used as simple and with high contrast if possible.
    7. Add captions and transcripts of the audio element of all videos and any audio clips. It would be even more useful if you could also provide transcripts (the written script) of written or spoken content. To make video accessible to BSL users, it’s also good practice to include at least an introductory ‘welcome’ video with BSL. This would give BSL users an initial flavour of the site and venue – and feel welcomed by them.

      WHY: adding captions and a transcript increases accessibility of any written or audio content for everyone, including Deaf or hard of hearing users, or users trying to understand the content without access to speakers or in a quiet environment. As a minimum, add a link to a transcript which outlines all the spoken and audio and visual content within video or audio files. This enables any user to review it separately or makes is easier to copy and share information.
    8. Clearly identify the target of each link

      Ensure all links are consistently labelled, that they look suitably different to the normal body text and that they look like links. Avoid labelling links as ‘here’ or ‘click here’ as out of the context of the page they don’t tell the user anything about where they’ll lead them.

      WHY:links need to make sense even if they stand alone, as many assistive technology users will short-cut to a list of links on a page as a way of getting a quick impression of what content is available on that page.Making links look consistent follows standard conventions for navigation and will make the site as usable and accessible as possible, as users will know what to expect as they explore the site.
    9. Review how the main menu options are presented and simplify them where possible. Keep the top menu bar as uncluttered as possible (as well as the further drop-down options). Options need to be separated out very clearly to make them easy for users to differentiate.

      WHY: we should simplify navigation options as much as possible, adding lines between each of the options to help users to see more clearly what the different options are. Without them the options will potentially all run together (especially for those with reading difficulties or those who are partially sighted). There are other ways of helping the user to work out where they are on the site and to keep their thread, including the use of a crumb-trail.
    10. Use the clearest and simplest language appropriate for the site’s content

      Where possible use clear and simple language to make it as easy as possible to understand, and avoid using jargon. You could include some content in Easy Read format, which was created to make content more accessible for users with learning difficulties, e.g. see some examples on the BILD site (British Institute of Learning Disabilities): http://www.bild.org.uk/resources/easy-read-information/
    11. Use a large clear font – in terms of font size, a lot of the text on the site is too small. Ensure that the default font throughout the site is larger.

      WHY: increasing the font size will make the text easier for everyone to read, and will be essential for people with reading difficulties. Some users will need to make it larger still so all text needs to be scalable.
    12. Ensure that pages work when scripts and applets are not supported

      A site should work independently if Java Script or applets are switched off/not supported.

      Related to this, I recommend that clients explain very clearly how to change any in-built accessibility features that are included on the site, and add some information about how to adjust different devices to increase accessibility – via a link to an Accessibility Options section.

      WHY: accessibility options or controls built into websites vary a lot, so it’s helpful to list any features that have been included so the user knows that they’re there and how to use them, e.g. how to adjust the font size or change the background colours and colour contrast options. It’s also good practice to include a contact email or number for users to send any accessibility feedback or suggestions, to demonstrate that you see accessibility as an ongoing process and are looking for how to support your users as well as possible.

      The Accessibility section could include: a list of the access features on the site, suggestions for how to adjust settings and an appeal for feedback from users.  I suggest adding this content via a link which appears prominently on the site (e.g. via the top menu bar) – there are many examples of how to present this information, e.g. see the Brighton Museums Web Accessibility page:  http://brightonmuseums.org.uk/about-us/policies/accessibility/web-accessibility/
    13. Avoid movement until it can be frozen.

      e.g. A moving image slider on the home page is a barrier to access, as it can’t be paused.

      WHY: research from user testing has found that many users, including those with learning difficulties and reading difficulties, can find a sliding carousel of images very distracting and reduces their ability to understand the content. At a minimum it needs to be clear how to pause this moving content.

    Style guide

    • It is best to decide up front the tone of the site so it remains consistent– this can differ in different sections, for example a blog post or story feature can be more conversational and from the first person.
    • For consistency, decide on preferred formats, terms and conventions for commonly used content e.g:

      – Dates (e.g. 25th Nov 2017 or 25/11/17)
      – Times (12 or 24 hr clock)
      – Period dates (e.g. 19th Century or 1800s)
      – Measurements & units
      – Pricing / costs (£1 or 1GBP)
      – Wars (WW1 or First World War)
      
    • This should follow what is in your print and promotional material
    • Make sure everyone who is contributing to the site is aware of these.

    Editing pages

    • If you are viewing the site from the front end (and are logged in) you will see ‘Edit page’ in the black bar at the top
    • If you are already in the back end select Pages from the main left hand side menu
    • Here you will find the static pages of your site e.g. About, Contact us etc..
    • Click a page to edit it – a page with a dash before the title means it is a sub page of the one above.
    • Gutenberg is the new editor from WordPress and uses blocks (like printing blocks) to build the content on the page.
    • Here you can have a practice in this short intro to blocks
    • To make the page you are editing a sub-page (known as a child page) of another page (known as a parent page) select the page from the ‘parent page’ drop down menu in the Page Attributes box on the right. For example the following image shows a page that is a sub page of About:

    Publishing

    • To view the page on the front end click the ‘Preview’ button at the top right of the screen  – it is best to always have the front end open in a different window when editing:
    • You can set the page to be visible to the public or private. This option is under ‘visibility’ in the Status & Visibility panel:
    • Here you can also schedule when you want the page to be published by clicking the date line next to Publish. If a date in the future is entered then the page will not be viewable by the public until that date. If a date in the past is entered then the sub-pages will order in publication date on the menu page – this is useful for older news items or events.
    • You can also select ‘pending review’ if you have an internal content sign off system in place.
    • When you have edited your text and images remember to click ‘update’ or ‘publish’ near the top right.

    Headings

    It is really important to use headings correctly on your website. This is so people using a screenreader can quickly scan a page and find the content they need and so search engines will index your site more thoroughly – headings are picked up as more important than standard paragraph text.

    This means that you need to highlight the text and apply a heading style and not just make the text bold; This is very common mistake if you are copying and pasting from a document.

    To create a heading within your page click the plus sign to add a new block and select ‘Heading 3′

    Generally on a website ‘Heading 1’ is reserved for the title of the whole site. ‘Heading 2’ is for page titles and ‘Heading 3’ are sub headings within a page. Therefore in the editor you should use Heading 3 (H3) for headings.

    If you have pasted in text that is already bold, you will need to change it to a heading. Select the block and transform it to a Heading.

    • Keep in mind 65 characters or less (including spaces). This is because search engines truncate (cut off) titles in Google search results over that number. Words or parts of words will be cut off.
    • Make sure your title is unique. It’s not helpful for people if search results show a list of pages with the exact same title.
    • Titles should be clear and descriptive. The title should provide full context so that people can easily see if they’ve found what they’re looking for
    • Front-load your titles. The most important information and the words the user is mostly likely to have searched should be at the beginning of the search result.

    Images

    • Images should ideally be no less than 2000px on the shortest side. It’s best not to go below this size so that the image remains at good quality for high retina screens. Images for the web must be in .jpeg, .png or .gif format
    • Please check the size of your images before uploading. If they are too large they will take up unnecessary space on the site server. Anything over 2mb for an image should ideally be reduced. We recommend using a programme such as ImageOptim which is easy to use and reduces the file size of images without losing quality.
    • Avoid using ‘rogue’ characters in file names. When saving any image or document for use on the web you should not include any characters other than those from the alphabet (lowercase) and underscores (_) – this includes spaces. If you do include characters such as spaces or & or , in file names this may cause problems displaying them.
    • The ‘featured image’ is usually the image that will be the main ’chosen’ image to represent the page and will appear in any listing pages. (e.g. if it is on an event this is the image that will appear in the listing of all the events).
    • Featured Image is found on the right hand side panel – if you can’t see the panel click the settings (cog) icon next to Publish/Update
    • When selecting ‘Add Media’ or ‘Set featured image’ you will see a library of all the media (images, sound files, video files) you (and everyone else) have uploaded so far.
    • You can either select an image from the library or upload a new one from your computer.
    • Although the media library isn’t ordered you can search for images using the search box. The search will look for any text associated with that image, so filling in the title and alt text field is really useful for this.
    • Click ‘insert into page’ or ‘set featured image’
    • To insert an image into a page, click the plus sign and choose the image block
    • When you have inserted the image into the page you can resize it by clicking on it once. Two blue dots will appear – on the right and at the bottom, which you can drag to change the size (you can also use pre-determined sizes in the options panel on the right hand side) :
    • You can also add a caption to the image here.
    • When you click once on the image you will also see some options appear at the top, here you can change the alignment (so the text wraps around the image), move the image up and down or crop it :
    • On the right hand side panel you will see more options for the image, note that you must add the alt text here:
    Graphic of an ear, eye, brain and hand in different coloured hexagons
    Always make sure your content is as accessible as possible, this way everyone benefits.
    • Image alt text is used by screen readers to describe an image to people with visual impairments when having a website read out aloud to them. Add captions and descriptive alt text to all photos, images and maps used throughout the site.

      WHY: Adding information and alt text to every image makes visual content more accessible to partially sighted magnifier users and blind screen reader users as well as compatible with other assistive technologies. A short text description of an image can unlock the information within a picture and enrich the experience and understanding of a story for users. Without alt text the screen reader just reads the word ‘image’ when reading the webpage. As you can imagine this can be very frustrating for the user.
    • Search engines will mark the site down if the alt text field is left blank. 
    • Images help to liven up the content, ensure that images used are simple and with high contrast if possible.

    Working with image galleries

    • A gallery is useful when you need images to appear in a grid such as a collection of logos or small images
    • In the WYSIWYG editor select Add Media or if you are using Gutenberg choose the Gallery block
    • Click Create Gallery on the left hand side
    • Select all the images you want in the gallery and click Create a new gallery in the bottom right
    • You can reorder the images by dragging them
    • On the right hand side edit the settings –
    • If it is a gallery of nice images you can select them to link to the media file, this will mean you can click on them and they will appear larger in a lightbox view. If they are logos or the images are too small for zooming in to be of any benefit then select them to link to ‘none’.
    • You can edit the number of columns the grid will appear as, set the order as random (so they appear in a different order on every load of the page)
    • There might be a certain size that you need to select – check with the developer
    • Click insert gallery

    • Avoid lists of links, instead try to incorporate them into paragraph text. This gives them more meaning and puts them into the context of how they may be useful. People are unlikely to scroll through lists of links looking for what they want and search engines will mark you down if you have links pages.
    • To create a link in a body of text, highlight the text that you want to be a link and click the chain symbol at the top of the text panel.
    • Here you can search for pages within your site
    Graphic of the words 'click here' crossed out
    Never write ‘click here’ or ‘here’ as a link.
    • If you are linking to an outside web source you must put the whole URL in including the http://
    • Click the arrow to the right to apply
    • Never write ‘click here’ or ‘here’ as a link.
      Use meaningful links – Avoid labelling links as ‘here’ or ‘click here’ as out of the context of the page they don’t tell the user anything about where they’ll lead them.

      WHY:
      links need to make sense even if they stand alone, as many assistive technology users will short-cut to a list of links on a page as a way of getting a quick impression of what content is available on that page. Making links look consistent follows standard conventions for navigation and will make the site as usable and accessible as possible, as users will know what to expect as they explore the site. It makes it easier for anyone who is scanning the page for the information they need.
    • This is also beneficial in terms of search engine results as they tend to look for links when searching.
    • Pasting the original url into the site can look ugly and is not very accessible, instead highlight some descriptive text and insert the link by clicking the chain symbol. This is also best for SEO as Google reads all the links in the site.
    • Do not tick the box for the link to open in a new window. This is very bad for accessibility as it can disorientate the user
    • Avoid using directions when highlighting a link e.g. ‘Click the link on the right hand side of the page’ It may be on the right hand side when you are editing the site but won’t necessarily be every time as there are different layouts for different screen sizes and devices.

    Buttons

    • To add a button to link to another site, choose the Button block
    • Click the link icon above the button
    • Paste in the link. Although the option is there, it is best not to open links in a new window as people can become disorientated.

    Embedding social media posts

    Many social media posts can easily be embedded into a WordPress page. View all of the embed options and select the link under “Block” to find instructions.

    You will see that for most of them you simply need to add the corresponding block and paste in the whole url e.g. for Twitter:

    For YouTube:

    In October 2020 Facebook disallowed the option to embed posts using this method without having a developer account (this includes all of their companies, including Instagram). However you can use this alternative method:

    Facebook

    Click the 3 dots at the top right of the post and select “Embed”

    On the following page locate the button which says “Get Code” which appears underneath the post

    Click the iFrame tab and copy the code

    On your website add the block called “Custom HTML”

    Paste in the IFrame code

    Instagram

    On Instagram you will find the code you need by clicking the 3 dots to the right of a post and choosing Embed and then clicking the “Copy Embed Code” button


    Adding pages to a menu

    • Adding a page under Pages will not automatically add it to a menu
    • This must be done manually under Appearance > Menus
    • Select a menu to edit from the drop down menu, here you will see all menus that appear on the site
    • All the pages are listed underneath as blocks, the ones that are indented appear as child pages of that section (will appear in the drop downs)
    • You can re-order pages by clicking and dragging
    • Try not to go above 2 levels of indentation
    • By clicking the downward arrow on the right you can rename the page, or Remove it (this will remove the page from the menu, it will not delete the page itself)
    • To add pages you can search and select them from the list on the left hand side
    • Select the page using the checkbox and click Add to Menu
    • The page will appear at the bottom, drag to where you want it to be
    • Do not add any extra top level pages to the Primary Navigation menus without checking with the developer, as this may break the layout.

    Translations

    Your site may not have this feature if it was not part of your brief. If you are interested in adding translations to your site please contact us.

    • In the settings on the right hand site of each Post or Page there is a box labelled Languages:
    • To add the alternative language version of that particular post or page click the plus sign next to the county code – in the image example the letters are “fr” as the translation is French. This will take you to a blank version of the same post ready to input the content.
    • If you have multiple languages they will appear here as a list with their county codes.
    • When the content has been added the plus sign will turn into a Pencil icon (as above), clicking this will take you to the page to edit.
    • Selecting Languages > Strings translations from the left hand side menu will bring up a list of all the most common words and phrases used across the site, this means that when they are filled in here they will automatically translate across the site. This is useful for buttons etc..

    Shop – WooCommerce

    Your site may not have this feature if it was not part of your brief. If you are interested in adding a shop to your site please contact us.

    • To add or edit products in the Shop, go to Products on the left hand side
    • If they are single product (as apposed to a membership or subscription, select “simple product” from the list
    • If you have a limited amount of stock you can enter this in the Inventory tab
    • You may have product categories that you can select on the right hand side so that the product appears in the correct part of the shop
    • Add a product image on the right hand side
    • You will be able to see your shop orders by going to WooCommerce > Orders

    Membership – WooCommerce

    Your site may not have this feature if it was not part of your brief. If you are interested in adding membership to your site please contact us.

    • You can edit the details of the memberships under Products on the left hand side
    • A membership would be set as a “Variable subscription“. Go to the Variations tab to set the different options
    • Roll over a variable to see a downward arrow to expand to edit the details or delete it
    • The details / price etc can be edited once expanded
    • Go to WooCommerce > Subscriptions to see the member details