FAQ Category: Editing tips

Getting started

To edit the site go to https://portsmouthmuseums.co.uk/wp-admin

Your website is set up as a multisite – that is so all the sites can have separate content management systems (CMS)

If you have been given Administrator rights to all of them, you will see them listed under My Sites in the top left hand corner when you have logged in:

Hover over the one you want and select the Dashboard option

You can also reach each site’s dashboard directly by visiting:
Portsmouth Museums portal
Portsmouth Museum and Art Gallery
Portsmouth Natural History
Eastney Engine Houses
Charles Dickens’ Birthplace Museum
Southsea Castle

Please note that to edit The D Day Story you will need to go to https://theddaystory.com/wp-admin
Which requires a different login

A user will only see the sites that they have been given permission to edit. This should always include the first one (portsmouthmuseums.co.uk) which is the portal/hub and at least one of the other sites.

The very top level ‘Network admin’ houses all the sites and is where some network wide settings are made.

When you have selected the website from the dropdown, 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 has a list of several sections, beginning with the types of content on your website that you will need to edit.

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 (or in WordPress lingo – post 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.

You may find this glossary of terms useful


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. In your case this doesn’t apply to Stories – as each one is authored by different people the user will understand the different tones of 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 – 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.

Headings and titles

  • 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.

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.

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)
    – Use of Sentence case or Title Case when capitalising letters
  • 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 (including adding images and links)

  • Go in to each individual site’s dashboard and go to Pages to edit – these are set up as the new Gutenberg editor.
  • 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:
  • Click a page to edit it – a page with a dash before the title means it is a sub page of the one above.
  • At the very centre of the page you’ll see your main content area. First you add a title to the page, clicking on the plus sign means you can add a content block, this can include paragraphs, images, headings, quotes, lists etc..
  • Add a paragraph or click  ‘Add text or type / to add content’ to add standard copy. 
  • When you roll over the text you will be able to see a basic text editor:
  • You can easily move blocks around using the arrows on the left hand side of the block:
  • By clicking the 3 dots (ellipsis) on the right hand side you have further options for the block – duplication for similar content, add to reusable blocks – so you can use it again on another page.

Intro panel

  • The intro field on each page corresponds to the text area to the right hand side of the page title
Intro panel in CMS
Intro panel on website to the right of the page title

Headings

  • To create a heading within your page click the plus sign to add a new block and select ‘Heading’
  • 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 (do not just use bold).
  • 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:

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
  • 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.
  • To add an image to the page either click the plus sign and select image
  • You will be given the option to upload from your computer or from the media library which includes all of the media (images, sound files, video files) you (and everyone else) have uploaded so far.
  • 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 right:
  • Here you can left or right align the image. When you select this the text below will wrap around the image.
  • On the right hand side panel you will see more options for the image:
  • 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. 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. There is a field in the media library called ‘Alt text’ – you will see this on the right hand side when an image is selected. Enter your description of the image here. Search engines will mark the site down if the alt text field is left blank.
  • Pre-determined image sizes – here you can select a size from the drop down list rather than dragging the blue dots, this makes all the images set to this size uniform.
  • Linking images – The default option for linking the image is ‘Media File’ – this means when an image is clicked it will show a larger version of itself in a modal. If you want the image to link to a page on the site then you can change it to ‘Custom URL’ and enter the URL of the page you want it to go to. If you don’t want it to link to anywhere then select ‘none’ from the list.
  • The ‘featured image’ is usually the image that will be the main ‘chosen’ or ‘hero’ image to represent the page (the large landscape image at the top, under the navigation) and will also appear in any listing pages/promos
  • This can be found on the right hand side under Document > Featured Image
  • If you only want the image to appear in listing and not on the page itself then select the box “hide image from header”
  • Select images that work well with the proportions used at the top of the pages

Links

  • 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
  • Either paste in the url or start typing to search for pages within the same site:
  • If you are linking to an outside web source you must put the whole URL in including the http://
  • Click the arrow to apply the 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.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, 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.

Publishing your page

  • 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.

Editing the Home pages

Portal home page

  • To edit the main ‘portal’ home page https://portsmouthmuseums.co.uk/
  • Login to the site and go to Pages > Home
  • Here you can edit the text which appears on the left of the map (or above it if viewing on a phone) and the link that appears as a button underneath it.
  • To edit each intro panel that appears when a map marker is selected, go to Options
  • Scroll down until you see the Map Markers
  • Here you can alter the position that the marker appears on the map using the X and Y values
  • You can edit the intro text and the image that appears in the background of the promo
Promo for a museum as it appears on the website (when a map marker is selected)
Corresponding fields to edit, found under the portal site > Options
  • Remember to click “update” at the top of the Options page when you are done.
  • Please note that whilst you can edit the intro panel on the portal map to The D Day Story here; to edit the content on the site itself you will need to go to https://theddaystory.com/wp-admin
    Which requires a different login

Individual site home pages

  • To edit the home pages for the other 5 sites, login to the site and go to Pages > Home
  • The first block is to edit the carousel – you can change the images, text and links that appear at the top of the page
  • Underneath this is the block to edit the intro text. The “Welcome” heading should be H1
  • You can edit where the promo link in this box goes to or choose not to include one
  • Under this is the area to edit the three promos that appear horizontally
  • The text in the “Events intro” field will only appear if you have forthcoming events for the museum along with promos to the events themselves

Editing the Footers

Footer on the portal

  • Login to the portal site and go to Options
  • In the first block you can edit the contact details that appear under “Find us” on the right
  • When editing the phone number switch to the “text” tab instead of visual and edit the number in here – this will make sure that the telephone icon will still appear next to it and that the phone number will work when tapped when viewing the site on a phone.
Edit the phone number using the Text view
  • Under the contact details you can choose to include an extra call to action, this can be anything to entice people in or let them know something they might not be aware of
  • You can also edit the logos that appear in the footer, click Add row to add a new logo
Example of a promo item you can add
When included it will appear underneath the opening times strip as a coloured bar
  • Simply tick the Hide button if you don’t want this to show
  • Edit the Opening Times of each museum to control when they appear under “Open now” on the correct day and time
  • Each museum has it’s own settings as they all slightly differ – set the usual opening times that are recurring:
The museum is open every day apart from Monday 10:00 – 17:30
  • Every 6 months these will need to be edited for Portsmouth Museums and Art Gallery, Natural History Museum, The D Day Story and South Sea Castle as these museums close at 17:00 during the October – March period.
  • Add in any unusual opening days – where the museum is open on days it is usually closed
Here the dates for the four Bank Holiday Monday’s have been entered, as the museum is usually closed on a Monday
  • Every year the Bank Holiday dates will need to be updated – plus any other changes to dates for the museums if known
  • Add in any closure periods
Closed on Christmas Day
The Charles Dickens’ Museum is open 5th April – 29th Sept, so the rest of the year can be set as a closure period
  • If the museum is unexpectedly closed you can quickly enter the date into the closure period here, as well as making use of the Announcement banner

Footer’s on the individual sites

  • Login to the site and go to Options
  • First you will see a field for the announcement banner, here you can put in any text that you want people to see immediately
Field filled in in the CMS
The banner will appear underneath the navigation of the site
  • Next you can edit the social media links
  • Choose the platform from the dropdown list (Facebook, Twitter, Youtube or Instagram) and enter the URL into the field
  • In the next two blocks you can edit the text that appears in the Opening times and Find us panels
  • When editing the phone number switch to the “text” tab instead of visual and edit the number in here – this will make sure that the telephone icon will still appear next to it and that the phone number will work when tapped when viewing the site on a phone.
  • In the Google maps location search field enter the postcode of the museum
  • You can then add a call to action panel as described on the portal site above – each site can have a different one.

Editing the Menus

  • Login to each individual site and go to Appearance > Menus
  • When you create a page in WordPress it won’t automatically appear on a menu, you need to manually set them here
  • You will see the main nav under each site
  • The indented pages are subpages of the one above and will appear in the drop down menus
  • You can move this around by clicking and dragging
  • By clicking the small downward arrow on the right you can edit the name of the page (label) or delete it from the menu
  • You can add pages to the menu from the list on the left hand side
  • When you click “Add to Menu” it will appear at the bottom of the pages in the navigation. Drag it to where you want it to appear
  • Do not add any top level pages without checking with the developer first, as the site will have been built with a certain number of top level pages in mind and the layout may need adjusting to fit more
  • You technically add as many subpages as you like but too many will be unwieldy and messy for the user
  • Do not go above one sub-level as this becomes quite unusable, especially on a mobile view

Portal pages

  • At the bottom of each landing page you will see promos to all the pages within the section with the heading “In this section”.
    These are created automatically when a child page is created within the section. The image uses the Featured image on the page.
  • On the portal pages you can add additional promos on top of these automatically created ones which can link out to any page from your portfolio of sites.
  • To do this go to the page where you want the promo to appear.
  • Under the content for this page add a new block called “Promo block”:
  • Go to the page you want the promo to link to and copy the part of the url which appears after the first slash.
  • Paste into the field of the Promo block:
  • The promo will automatically use the Featured image and heading of the page.

Events

  • Enter a description of the event into the first text block
  • Under this enter the time and date of the event
  • The Excerpt field is used as the summary text on a listing page
Excerpt field in CMS
Excerpt showing on the home page as a listing
  • On the right hand side make sure to select which museum the event is at so that it appears on the correct website:
  • Also make sure “Events” is ticked in the box below this:
  • If you can’t see any of these boxes, click the “screen options” tab at the very top and make sure they are ticked:
  • Add a featured image

Staff recommendations

  • Login to the individual site and go to Staff Recommendations
  • Add the recommendation or quote into the main text editor
  • You can add an attribution into the Person name field and add a Person photo if you wish – you don’t have to fill out these fields
  • You can add a link to what has been recommended – whether it is an activity or an object within the collection that can be seen in the museum
  • Add a featured image that also works well as a background image, as some of the recommendations will use them in this way