Step-by-step instructions on updating webpage content that has been transferred from the current website to the new website.
Log in to WordPress
- Open /wp-admin/ in one browser tab and https://www.edgehill.ac.uk/site-name/ in another, where site-name is the site that you’ve been asked to look at.
- In the WordPress tab, click the “Login using Edge Hill University SSO” button and log in.
- Navigate to Pages. This page can take a short while to load. The site that you’ve been asked to look at will be in the Pages tree, as with IT Services below:
If it is an academic or support department, you’ll find it in Academic departments or Support departments.
- Click the arrow next to your site’s name to view its child pages.
Editing a webpage
Each site that has been migrated will have a corresponding website content transfer report that provides links to all pages with images, shortcodes and document links. These will all need to be addressed, as detailed in the sections that follow these numbered steps. Always refer to the equivalent original page if you’re not sure what a shortcode (currently) does.
All pages on your site need to be converted to blocks, but those pages with images, shortcodes and document links highlighted in the report need to be addressed more urgently.
- Edit the first child page in your site, at the top of the list in WordPress by highlighting the row and clicking its title or “Edit”.
- The page will open and its content will be in a “Classic Editor” block. Convert the page to blocks by clicking the “Convert to blocks” link in the toolbar that appears when you select the whole block:
- Update any images, documents and/or shortcodes (see following section).
- Make any text edits required in line with the style guide (see following section).
- Make sure that you’re not missing any critical content in the sidebar on the equivalent webpage on the live site (replace new.edgehill.ac.uk with www.edgehill.ac.uk in the URL). If there is, copy this content to a relevant area of the page and re-upload any images/documents as necessary.
- Preview your page using the link at the top right corner of the screen.
Once you’re happy with how your page looks, update the relevant taxonomies in the Page tab of the Settings sidebar on the right-hand side. Click the cog icon if this is not immediately visible. Do not add new entries to any of the taxonomies without checking with the team first. The relevant taxonomies are:
- Audiences (choose no specific audience if you’re not sure)
- Topics (your site will either be in Topics or Related Departments)
- Content Types (pick the most suitable from the list – you may need to choose several)
- Related Departments (your site will either be in Topics or Related Departments)
- Related Subjects (only choose a single subject if your page is specifically about that academic subject)
Ignore Categories and Tags as these will be addressed later.
Finally, click “Update” to save your changes.
Click the WordPress logo at the top left corner to return to the dashboard and click “Pages” in the left-hand navigation menu to return to the tree view.
You will need to remove and address shortcodes if the page has any. Shortcodes look like this [shortcode] and were previously used for additional functionality, like tabs or embedded forms.
Example: [ehutabs tab_title=”Overview” output_title=”true” /]
On the new site, all pages have a persistent, right-hand navigation menu that indexes all Heading 2s on the page. In these instances, you should remove the [ehutabs] shortcode text and replace it with a Heading 2 with the same title ie “Overview”, in this instance. Make sure that all previous tab headings (you can check the equivalent page on the original site) are Heading 2s.
All forms will need to be rebuilt in Ninja Forms. Digital Content Coordinators can take care of this, so we just need you to note down the page URL so that it can be addressed by one of the team.
Example: [expanding-boxes title=”Packing” heading=”h3″] … [/expanding-boxes]
We have a new block for expanding boxes, so you can copy and paste the content that appears between these two shortcodes and add it to an EHU Expanding Box block.
See /guidance-for-editors/available-blocks/#expanding-boxes- for an example.
Call-to-action (CTA) buttons
Example: [cta-button title=”Book your place online” url=”https://think.edgehill.ac.uk/form/odbf” icon=”arrow-right” align=”right” /]
We have a new block for CTA buttons, so you can copy the title and URL from the shortcode and add it to a new EHU CTA block. In this block, you should also set the “Title Tag” (Settings sidebar > Block tab). In most instances, this can be set to “Heading 3”, but it may depend on the preceding heading. Don’t set it to Heading 2 unless you want the button title to appear in the “On this page” navigation menu. You don’t need to set the “Subtext” but you can include it if needed. Don’t use the “Feature CTA” toggle button.
If there are multiple CTA buttons as part of a collection (even if there’s only two), you can use the EHU Buttons block.
See /guidance-for-editors/available-blocks/#call-to-action-(cta)-button for examples of each.
Example: [profiles-slider profiles=”85008, 85005, 188068, 188052″]
These can be taken care of by Digital Content Coordinators, so just note down the page URL so that it can be addressed by one of the team.
Timed content rules
Example: [timed-content-server show=”2021-06-04 08:00 Europe/London”] … [/timed-console-server]
If there is a “hide” date and it has elapsed, remove the start and end shortcodes and all content in-between. If there is no hide date (as in the example above), simply remove the shortcodes and leave the content in-between.
Example: [profile page=”2462″ jobtitle=”Director of the Business School / Professor of Marketing (B202)” email=”[email protected]” tele=”01695 584765″ image_size=”thumbnail” /]
The [profile] shortcode is used on staff list pages. This will be replaced with a new block that hasn’t been developed yet. These pages can be taken care of by Digital Content Coordinators, so just note down the page URL so that it can be looked at by one of the team.
If this block appears, there will have been an image gallery on the equivalent page on the old site. Provided that this gallery was originally used to present a series of cards that linked to other pages, these should be recreated using a combination of the Columns block and the EHU Card block.
- Add the Columns block first and determine how choose 50/50 or 33/33/33, depending on whether you want two or three columns. If you need four columns, choose 50/50 or 33/33/33 and then position the mouse cursor between two columns and click the + icon that appears to add an extra one.
- Click the + icon in any column to add a block to that column – type “EHU Card” into the search and click the block that appears below.
- Once it has loaded, add the Image (click “Media Library”, rather than “Upload”, so that you can upload your image and add the title, alt text and description at the same time), Title, Content and Link, as required. Leave Link blank if the card doesn’t need to link to anything. If you click away from the EHU Card block, you may struggle to select it again, as clicking the block attempts to open a link. Use the List View button at the top of the screen, find the relevant EHU Card block in this list and click it to access the Block controls, in the Settings sidebar on the right-hand side.
If you come across any other shortcodes, just ask a member of the team for help and we’ll update these instructions.
This works in the same way as the shortcode errors. You will need to remove and address HTML codes if the page has any. HTML codes will show in HTML blocks. Hover over the block and you will have the option to preview the content without code. This will show what you need to add back onto the page using an existing block.
This mostly occurs when an expanding box sits within a tab however please make us aware of any other examples that you may find.
Example of HTML error:
Course transfer This is the title from your expanding box. Make this a H3 heading and adjust the sentence case following the style guide rules.
<div class=”expand”> This line of code explains that an expanding box (“expand”) was used.
<p>We recommend that you obtain approval from your home institution at the time of applying to study at Edge Hill. If needed, we can usually e-mail you or your Advisor a full syllabus to assist with the credit transfer process.</p></div>
This final section of code tells you the sentence that was used within the expanding box. You need to copy the text (without code) and insert this into a paragraph below your heading.
We recommend that you obtain approval from your home institution at the time of applying to study at Edge Hill. If needed, we can usually email you or your advisor a full syllabus to assist with the credit transfer process.
All images will need to be re-uploaded to the Media Library and re-added to the page, with any alt text that was originally added. You can edit images online using Pixlr.
Save original image and alt text
- “View” or “Preview” the page (in Chrome browser).
- Right-click the image and choose “Inspect”.
- In the right-hand column, find the alt=”text” section and double-click it to select it.
- Right-click and choose copy to copy the alt text.
- Paste the text into Notepad or similar.
- To save the image itself, right-click it and choose “Open image in new tab”.
- The URL will look like “https://www.edgehill.ac.uk/study/files/2019/04/Study-With-Us-2-1024×439.jpg”. Be sure to remove the resolution information from the filename if it’s in the URL and reload the page before saving (it might not be!).
- Right-click the image and choose “Save image as…” or drag and drop the image onto your desktop/into a folder.
- Images should be 16:9 aspect ratio or (in some instances) 3:2. Resize the image using Photoshop and make sure that the image is less than 1MB. 16:9 images should be 1920 x 1080px and 3:2 images should be 1920 x 1280px or 1500 x 1000px. Save as .JPG or .PNG, depending on which provides the smaller file size.
Upload the image to the Media Library and add it to your page
- Edit the page.
- When you’ve made all edits that are easier to make in the “Classic Editor” block, convert it to blocks (as detailed above).
- Click the first image on your page and delete it.
- Select the nearest paragraph and click the + icon at the top of the screen. Type image and click the Image block
- In the Image block that appears in the editor, click the “Media Library” button.
- Click the “Select Files” button or drag and drop the image from your desktop/folder.
- In the right-hand column, populate the Alt text, Title and Description.
- Alt text: Copied from current image if available – description of the purpose and/or content of the image eg “A prospective student with their parents on a campus tour.” Leave blank if the image is purely decorative.
- Title: Short, plain-text description of the image eg “Open Day campus tour”.
- Description: Duplicate the Alt text description of the image’s content here, but also include a short path to the image so that it can be easily found in future eg “A prospective student with their parents on a campus tour. Study / Accommodation”
- Caption: Delete any text that’s appeared in this field that isn’t needed eg “?????”.
- Click the “Select” button at the bottom right corner to add the image to the page.
- In the Block tab of the Settings sidebar on the right-hand side, change the “Image size” to “Intermediate” (640px wide). If the image is too large to comfortably appear alongside the text and it needs to be smaller, you can change the “Width” to 320px instead (ie halve the width).
- In the toolbar that appears above the image when you click it, click the alignment icon and change it to “Align right”.
- Repeat for other images on the page.
- If the content transfer report file for your site includes pages with documents, you will need to refer to the Documents audit spreadsheet file to see if each document is suitable to be re-uploaded to the site.
- If the document is suitable, save the document to your desktop. Change the filename if required to the format, “name-of-document.pdf”.
- Visit /wp-admin/post-new.php?post_type=document to add a new Document entry.
- Give the Document entry a suitable title (sentence case) and brief, plain English description beneath.
- Attach the document by clicking the “Add Attachment” button.
- Give the document a “Title” (often the same as above) and click the “Add File” button.
- Click the “Select Files” button or drag and drop the document from your desktop/folder.
- Give the document file itself a suitable “Title” and “Description” (probably the same as those on the page).
- Click the “Select” button at the bottom right corner to add the document to the Document entry.
- In the Document tab of the Settings sidebar on the right-hand side, update the relevant taxonomies (Topics, Related Department and Related Subjects) as necessary.
- You can also add a “Featured Image” for the document, if required.
- If there are several documents on the webpage that could be part of a collection of resources or similar, you can also create a collection and associate multiple document entries with that collection. Ask a member of the team for assistance if you think this might be the case.
- “Preview” your document to check that you’re happy with how it looks and click the “Publish” button at the top-right corner to publish your document.
- The sidebar will update and provide you with the document link. Press the copy button to copy this URL.
- Return to your webpage and use this URL in place of the existing document link.
Style guide and formatting rules
Download and familiarise yourself with the style guide (PDF). Some of the more important rules are detailed below:
Sentence case headings: Headings, titles and links should be written in sentence case, eg “How to apply”, rather than “How To Apply”.
Headings: make sure that page headings are properly nested (start with Heading 2, followed by Heading 3 for subheadings etc).
Intro text style for first paragraph: Change the first paragraph on your page to use the Intro Text block style (Block tab of the Settings sidebar on the right-hand side).
Dates: Always use digits for dates and write them as day month year, with no commas or ordinal (‘th’, ‘st’, ‘nd’). Always write out the full year (never 21 or ’21). For a range of dates, use digits and a dash (with spaces): 11 July – 16 September
Time: Always use the 12-hour clock with a full stop between the hours and the minutes (not a colon): 1.30pm. Don’t use additional ‘.00’ for times on the hour, and close up space between the number and the ‘am’ or ‘pm’: For midday use 12pm.
Numbers: Use words for single-figure numbers, digits for anything above nine, for example: Five, seven, nine, 11, 13, 15. The same rule works for ordinal numbers. Do not use superscript with ordinal numbers, for example: Eighth, Ninth, 10th, 11th – see the style guide for more examples.
Edge Hill University: The official University title is Edge Hill University, and this should be used in all communications and publications. To avoid repetition, ‘the University’ and ‘Edge Hill’ may be used in text closely following the full title. When referring to Edge Hill University as the University use an initial capital. When referring to a university use a lower-case u.
Academic year: Refer to semesters as ‘Semester 1’, ‘Semester 2’, and the years similarly as Year 1, Year 2. ‘Final year’ need only receive initial capital if it appears in a detailed description of the academic programme of study.
Exclamation marks: Avoid using exclamation marks. They look like you’re shouting! Or angry! And they can trivialise your message.
Ampersands: Only use ampersands if they are part of an official name or title (such as P&O, Johnson & Johnson). Otherwise spell out ‘and’.
Latin abbreviations: Avoid common Latin abbreviations, such as etc, eg, ie. There are good plain English alternatives that will make your writing easier to understand:
Etc: Use ‘and others’ or include complete lists where possible.
Eg: Use ‘for example’, ‘such as’ or ‘including’.
Ie: Use ‘that is’, ‘meaning’, ‘in other words’, or rewrite the sentence.
Bullet points: Bullet point lists should always follow a colon. If the sentence before the colon and the bullets after it form a continuous sentence, each line starts with a lowercase letter (unless it is a proper noun) and there is no punctuation. Never include ‘and’ between the penultimate and final bullet.
Examples of bullet points
In self-catered accommodation there is a:
• common room
If the bullets do not follow on in a continuous sentence, each line starts with an uppercase letter and there’s no punctuation:
Catered accommodation offers a wide range of facilities:
• Access to kitchen
• Bike storage
If the bullets are in a self-contained list, each one starts with a capital letter and ends with a full stop:
• Each kitchen is equipped with a sink, kettle, toaster, microwave, hob, oven, cupboard space, fridge and freezer.
• The bike storage areas are all highly secure and are close to the halls.
• The laundrettes are open from 8 till late, but don’t forget to bring your own detergent.
- Move the site under Academic Departments or Support Departments (if applicable) and delete the extra page with the same name as your site.
- Check your site’s content transfer report for pages with documents, images and shortcodes. Address those instances specifically.
- Make any further amends to text, headings and links in line with the style guide.
- Set the relevant taxonomies (if applicable).