WordPress
Page creation
Instructions Contents
The Admin Area
Calendar
Building Pages
Restricted Areas/Resources
Patterns and Components
Images and Media
Contacts – add/edit/delete contacts (click here for more info)
When logging in as Admin, you will need to use the Dashboard toolbar, down the left hand side…
Media Library (photos, files, newsletters) (click here for more info)
Pages – lists all of the pages on your site. You can view, edit, delete, duplicate or change-to-draft.
Restricted Resources – upload resources and allocate to a specific restricted area (click here for more info)
Appearance > Menus – edit the items (and the order they appear) on the top menu
Manage users, including allocating access to restricted areas
Sub-menu features “White listed registration domains
Add new Newsletters, and Featured News to be displayed on Latest News page (click here for more info)
NOTE:
Labelled are all the features you will need to use, it’s highly unlikely you will need any of the others
Manage settings on the site – for instance temporarily disabling Restricted Areas (click here for more info)
Key parts of the page editor
Document Overview panel
(Accessed by this button)
Page title (as featured in Header bar)
Page content
(Anything here will appear in the Document Overview Panel)
Settings panel
(Accessed by this button)
Note: If you’re editing blocks, you can click between Settings and Styles in this panel
Adding/Deleting/Duplicating Pages
Adding a page:
On the Pages tab of the editor menu , click “Add New” at the top
Other actions:
Hover over the page (use the Search function, top right, if necessary to find a page)
Click the options to edit, trash, view or duplicate the page
(Note: duplicating will create a duplicate page, as a draft that you can then edit and publish)
If you delete a page that was on the main menu, it will automatically be removed from the menu on deletion
If you want to delete a page from the menu, but not delete the page itself…
Go to Appearance > Menus
Find the menu item you want to remove, and click the dropdown
Click Remove to get rid of the page from the menu (note: the page will still exist)
You can also change the “Navigation Label” if you want the menu link to have a different title
Pages can be sorted into folders in the Admin area – click here for more information
Setting a Page Header
Ensure you are working in the page title, not the page content
This brings up the Page editor in the Settings panel
Each page header has three parts:
1. Page title
3. Page welcome text
2. Featured image
1. Page title
This is taken directly from the “Page title” section of your page
3. Page welcome text
Enter this in the settings bar, under “Excerpt”
2. Featured image
Set this in the Featured Image section of the settings bar
Adding Content
Content can be added any time you see “Type / to choose a block” in your Page content section
There are shortcodes you can type to get different things inserted easily, eg. /Heading /Image /List
If you don’t know the “/” shortcode for something, click on the + button to Add block (top left corner of the screen, or it appears in your page content depending on where your cursor is)
If you clicked the + in the Page Content, it opens a suggestion box…
You can search in here (if you know the name of the block you’d like to insert)
Or you can click Browse All. That then takes you to…. ->
If you clicked the + in the top corner of the editor, it opens a panel of blocks/patterns…
You can search in here (if you know the name of the block you’d like to insert)
Or you can click browse through all patterns and blocks
Adding/Ordering Content
If you have content on your page, but wish to re-order it you can do so in two ways…
To instantly replicate a block, you can Duplicate it, by clicking the three dots in the horizontal toolbar and selecting Duplicate
The easiest way to add content exactly where you want it, is by having your cursor in a block (eg. selected on an image, or in amongst tome text)
Click the three dots icon, and use Insert before / Insert after to add a block above/below the one you’re currently working in
Option 1: Use the up/down arrows on the horizontal toolbar to move things up and on the page/within their column
Option 2: Use the document overview panel, to drag blocks up/down, to change their order on the page
Adding Content – Using Columns
A very good way to manage content, when it’s slightly more complicated is by using Columns (shortcode: /Columns)
If you, for instance, want an image on one side, and a heading and text on the other, create two columns (50/50) and then insert content into each column…
You can then control the content of these columns using the “+” button and add content as you would anywhere else on the page
More complicated columns/layouts
Along with the standard 50/50 two-column set-up, you can use other pre-set column widths (eg. thirds, 25/50/25, etc.)
You can put columns within columns. A good use of this would be if you wanted to list logos of partners you work with – using two columns, within a column means you can have two images with fixed width next to each other.
You can duplicate those two columns, so make more spaces for images…
The Image Toolbar
When an image has been added to a block/column, a small toolbar appears, this gives options to change the size, formatting, colour, etc. of the image…
Links – link to a web address or a page within the site using the search bar
Alternatively Media File/Attachment page will open up the image file in a new page
Duotone filters – change the colour of an image (eg. make it black and white)
Add text over the image
Text settings can then be changed in the Settings Panel
Change the alignment/stretch of the image.
Top three options are related to size, bottom three to alignment
Crop the image
Block options – including insert before and insert after
Patterns and Blocks
Blocks are pre-set WordPress elements
Some have your website’s styling applied already
Patterns are specific blocks that have been created for your site
Inserting basic blocks/text
Basic blocks that are most useful are Paragraphs of text, Headings and Lists
Paragraphs can be added by typing anywhere you see “Type / to choose a block”
Highlight the text and use the options in the horizontal toolbar to change text alignment, bold, italic, etc.
Use the options in the Settings Panel (right hand side of screen) to change things like colour, background, size.
Headings should be added at the top of each section (they work especially well when in columns)
Pre-set heading styles can be chosen in the Settings Panel, under Styles…
Lists automatically add bullet points, and continue the list when hitting Enter.
Sub-lists can be made using the buttons in the horizontal toolbar
Useful Patterns
Specific patterns that will be useful when creating pages…
(Note: specific formatting, eg. colours, text size, etc. can be changed in the Settings Panel on the right)
Textbox > File List
Files can be uploaded using these blocks (via the Media Library)
Textbox > Coloured Textbox with Heading and Button
If you want to remove something (eg. you don’t need a button) click to select that block and hit delete, or use the Document Overview, click the three dots and click “Remove”
Textbox > Transparent Textbox with Heading and Button
Useful Patterns 2
Specific patterns that will be useful when creating pages…
(Note: specific formatting, eg. colours, text size, etc. can be changed in the Settings Panel on the right)
Multiple Image Blocks with Heading and Button
There are three options for image-based blocks with various combinations of title, sub-heading, text, etc.
You can create more/less blocks by clicking on one block, clicking the three dots button and either clicking Remove or Duplicate
(If it’s hard to select the whole block, select the column in the Document Overview panel)
The panels will stretch to fit the whole width of the page (or the column you are working in)
There are also Single Image blocks – single versions of the image/title/subheading/text blocks above
As with all patterns, elements can be deleted (eg. if you don’t want a button) by selecting that element and hitting delete (or click three dots, click Remove)
Useful Patterns 3 (Nav. Tiles)
Text > Navigation Tiles
These are the tiles that are used on the site for the sub-menu pages
When you add this pattern it will automatically give you four tiles…
You can enter text into these buttons. They will (when viewed on the full site, not in the editor) extend to fill the page (or the column you are working in), with four on a line.
Use the horizontal toolbar above for options
Change text to bold or italic, or use the dropdown arrow for more options
Arrows to change the order of the buttons
Alignment – shouldn’t be needed, as set up automatically
Link – paste in a URL or type to search for a page within the site
Options – use this button for duplicate/remove
Contacts List – Adding Contacts into the system
To add/edit a Contact…
In the Admin section, go to Contacts, in the left hand menu
To add a contact, click “Add New” at the top
To edit a contact, click on “Edit”, which appears when you hover over the contact
(You can search contacts using the “Search Posts” box, top right)
Fill in the details accordingly –
Authority is a drop-down list
Associated Contacts can be added (eg. a Director’s PA who needs to be displayed on the Contacts/Directory page)
On the front end of the website the contact will be displayed in the format: Job Role: Name (Authority)
In order to save your new contact, you do have to manually enter a title, but this will only be shown in the admin system, not on the front end.
For consistency, it is best to enter the title in the same as the format as on the front end - Job Role: Name (Authority) , see examples below…
Contacts Block – Adding Contacts to a page
You need to use the Contact Details Block (found in Patterns > Specific Blocks) to add someone’s details
Note: this block will stretch to the whole width of the area you are working in – throughout the site it has been used in the right hand of two columns
Adding multiple contacts…
Select the “Single Post” box, click the three-dots Options button
Duplicate as many times as you need to
Adding Contact Details
Select the “Single Post” box
Type the Contact name into the “Post” box in the Settings Panel
This will narrow down the list and you can select your required Contact
Note: the icon (envelope, telephone, etc.) won’t display on the editor, but it will on the web page…
Contacts – Adding Contacts to a Directory
The directory pages have been made by creating a list of contacts in the page editor, and WordPress then makes these into a table on the front end.
You can add/remove people by editing the page, as follows…
Open up the page in the editor (searching for “contacts” will help narrow down results and help you find the page)
If you scroll down to the bottom, the Select Contacts section is the one you need to edit to change the list of people displayed in the table on the front end…
To DELETE a contact from the list – click the little “x” next to their name, in the box. This will remove them from this page/table
To ADD a contact into the list – put your cursor at the end of the list, and begin typing the name of the contact. Suggestions will come up above, narrowed down the more you type. You can click on the right contact and they’ll be added onto the list, and onto the table on the front end of the site.
Note: The names in the table should, ideally, appear in alphabetical order by Authority. This re-ordering needs to be done manually. If you have added in a new person, you should drag their box to the right place in the list, this will then change the order on the table on the front end.
Inserting links
You can add links to text, buttons and images
To add a link…
Select the section of text, individual text, image or button that you want to link
Click the link button in the horizontal toolbar
Search in the box for a page on the site (it will open up a responsive dropdown list)
Or paste in a URL if linking to another website
You click the toggle box if you want the link to Open in new tab
You can add a block of resources onto your page. These are often called “Tools, Templates & Useful Links”.
You can upload files, or find them in the Media Library, for users to download when they are using the site
Go to Patterns > Textbox > File List
Adding Files to a page
You can then upload files from the Media Library, or directly via Upload from your computer
They will display in the box on the front end, with an icon, and users can download them…
Note: Restricted Resources have been brought across from the old website into the Media Library (click here for info on how to add Restricted Resources to the system)
Non-restricted files have not, therefore any non-restricted historic files will not appear in the Media Library.
But any pages that linked to those files on the old website will link to the file on the new website.
If files are a PDF, they may display with a PDF viewer in the editor. This isn’t ideal in columns as it doesn’t display brilliantly, so switch it off in the “PDF settings” section of the Settings Panel, by un-toggling “Show inline embed”…
There are other options for PDF downloading/viewing – click here to learn more
This will input a box with three File selector blocks
If you don’t need all three files, remove blocks by clicking the block, clicking the three dots, clicking Remove File (or Shift + Alt + Z)
If you need more file blocks, click on one, click the three dots, click Duplicate (or Shift + Ctrl + D)
Note: if you want to add just one file, but not in a coloured box, you can do so by typing /file and clicking on “File Download”
When adding PDFs onto a page, you have three options –
Adding a PDF file link
As before, go to Patterns > Textbox > File List to add a block for multiple files
Or type /file and select File Download to insert just one file block
Adding PDFs
If you want to just list it as a downloadable resource, toggle-off “Show inline embed” under settings, and make sure it’s set as “Default” under Styles
To list the pdf with the in-built PDF viewer, toggle on “Show inline embed” under Settings, and make sure it’s set to “PDF Viewer” under Styles
To open the pdf in a new window, toggle off “Show inline embed” under Settings, and make sure it’s set to “PDF Viewer” under Styles
Adding a PDF to a button
Add a button (either via Patterns, or by typing /button)
Enter the button text
Use the Link button to search for the PDF you want to link to (it needs to be in the Media Library, files are listed as “attachment”)
Change settings, as per the coloured text below…
STEP 1:
STEP 2:
The Media Library - Photos
You can upload new files using this tab (or just drag and drop them into this window).
Media Library tab shows all uploaded files
When an image is selected, the details appear in this Attachment Details box
Use the Alt Text box to input alternative text that would be a) displayed if the image didn’t load for any reason, and b) read by a screen reader for a user with accessibility issues. This is especially important on any diagrams, graphs or infographics.
The Media Library will open up when you insert an image into a page.
It is also accessible from the left hand toolbar in the admin system. The displays are slightly different, but the tools are similar in both.
The Media Library - Files
The Media Library contains folders for other documents as well as photographs
Restricted Resources
Restricted Resources have been brought across from the old website into the Media Library (click here for info on how to add Restricted Resources to the system)
Non-restricted Resources
Resources that are not restricted have not been brought across from the old website, therefore any non-restricted historic files will not appear in the Media Library. But any pages that linked to those files on the old website will link to the file on the new website, so users can still download documents.
Viewing documents in the Media Library…
You may need to collapse/expand by hovering to find this button – so you can view the left hand menu
Documents are ordered into folders and, in some cases, sub-folders
Folders showing a multiple-folder icon have sub-folders.
Click on the folders icon to expand
Click on the folder name to go into the folder
If you want to add a file to the site, you need to upload it into the Media Library by clicking “Add New”
Note: you should set the folder using the “Choose folder” dropdown before uploading your document…
To add/edit Restricted Resources, click the Restricted Resources menu item in the admin Dashboard
Click “Add New” (at the top) or hover over an existing resource and click “Edit”
Adding Restricted Resources
Add a title for your Resource
Select a contact (if required) associated with your Resource
Write a summary for your Resource
You can then add up to five files, and/or a URL
(note: the URL needs to be written with https:// at the start)
The most important thing is allocating your Resource into a Category – this dictates which Restricted Area your Resource will be a part of
Do this by selecting a Category in the Settings Panel (you can select multiple)
Note: you do not need to tick the “Restricted Areas” box, you just need to select the area itself, eg. “DCS Restricted Reports”
Once you have selected a Category you can then select the Document Type (you may need to scroll up/down in the page content section)
Select the Document Type from the dropdown. This will be searchable by users in the Restricted Area
Programme Manager’s Newsletters
Most newsletters on the system (eg. AD Education/AD Safeguarding newsletters) are files which are uploaded/downloaded in the usual way – adding the file into the Media Library, and then adding a link, to that file, onto a page.
However, the Programme Manager’s Newsletter takes a slightly different format, and therefore needs to be created in a different way.
A Programme Manager's newsletter is made up of…
The easiest way to create a Newsletter of this type is to duplicate and edit an old one, therefore a template has been created for re-use, so these Newsletters can be consistently formatted. See next page…
Creating Programme Manager’s Newsletter
The easiest way to create a Programme Manager’s Newsletter is to duplicate and edit an old one, as they’re quite complicated in terms of layout…
In the Newsletters area of the Admin section, search (using search box, top right) for “draft”
A template has been created for the SESLIP Newsletter layout. Hover over “DRAFT Newsletter Template” and click “Duplicate This”
Now that you’ve created a duplicate of the template, you can edit it accordingly…
Editing and re-ordering blocks on this page works in exactly the same way as other pages on the site
(as detailed earlier in this presentation)
Adding a Breadcrumb
It’s useful to add a breadcrumb to your page, to help users find their way around the site
Breadcrumb trails have to be added manually onto pages, but this can be done easily using a pre-made Pattern
At the very top of your page (immediately under the title) you need to add in the breadcrumb pattern
Easiest way to do this is put your cursor in the first line of text, click the three dots in the toolbar and click Insert before
You then need to click the Blue “+” button, go to Patterns > Specific Blocks > Breadcrumb
(Note, you can also start typing “breadcrumb” in the Search box for easier access)
Link all of the pages in the breadcrumb trail, but no need to link the last one. It’ll display as a breadcrumb on the front end site…
Breadcrumb trail, in the editor, looks like a bullet point list
The “Home” page is already linked
Enter text for the other pages, and link them using the Link button in the toolbar
Front end:
Managing the Calendar Page
The SESLIP Calendar page is managed using the usual Google Calendar system, in the exact same way as on the old website
In order to edit this calendar (eg. to add events) you will need permission from Isabelle Gregory, who can grant you access to the SESLIP Google Calendar
Note: any changes you make on the Google Calendar may take a small amount of time, more info on next slide
If you wish to add a list of upcoming calendar events onto a specific page, you can do so. More info on next slide.
Refreshing the Calendar
Changes to events on Google Calendars are not immediately visible on the SESLIP website, as they are cached hourly.
To force an immediate refresh of the cache, follow these steps:
Adding upcoming events (from the Google Calendar) onto a page
If you would like to add a panel onto your page showing the upcoming events from Google Calendar, you need to do so using a ‘shortcode’ and a Google Calendar ID…
Step 1: Add a new block onto your page (Click here to view instructions) – click Browse all > Patterns > Specific Blocks > Google Calendar Agenda
Step 2: This will add a box to your page with a title and a shortcode box. Edit the title, if desired.
Step 3: In the shortcode box, enter: (including the square brackets)
[google_agenda calendar_ids=xxxxxxx]
(The red xs need to be the specific Google ID for your calendar (see next slide for info), you can add two calendars by putting the two numbers with a comma between them)
This will display up to four upcoming events, in date order.
If there are no events, a message prompting the user to get in touch via the contact details below will display.
A “Show All Events” button can be added into this box. Click here for instructions.
SESLIP Google Calendar IDs
Please see below for Google Calendar IDs for the SESLIP Google Calendars…
The third column is the ‘shortcode’ you need to paste into the page editor to show upcoming events)
Calendar | Shortcode to show calendar on page (copy and paste – including square brackets) |
AD Education | [google_agenda calendar_ids=rski4hmah0o8h68ctm6j1rfbtg] |
AD Safeguarding Network | [google_agenda calendar_ids=7khg3q18k2e1sctdve4hn0ub14] |
Adoption Regional Leadership Board | [google_agenda calendar_ids=4efg9hfoh4kvt52dofd88nm6fk] |
Commissioners’ Network | [google_agenda calendar_ids=6vb0t4re3d6k3shl1reoj4gtig] |
Data Benchmarking Group | [google_agenda calendar_ids=2njqmv08ackkhuctue9t9kgqdc] |
DCS | [google_agenda calendar_ids=61tgf6fjvfhk513fjlemed60pg] |
Early Help | [google_agenda calendar_ids=84f3a890a6756b61e0f828befe01fb539bfa501bbbc9eb5cb3455e0b01f8c94c] |
Early Years | [google_agenda calendar_ids=0ebd2bdc2782adfeb8d1f3f6682da92b6a88f5ea08d76c07ca3d4ce808291037] |
Family Hub | [google_agenda calendar_ids=v19n2e2qum1mg9dte19fnrk354] |
Fostering Network | [google_agenda calendar_ids=3d162fe037e17bbf4eba54bd01246024cfb3e35a0fc502c223a30ab2684ba7bc] |
Lead Members’ Group | [google_agenda calendar_ids=177j85h9n6qr6t82pf7dlhl634] |
Peer Challenge | [google_agenda calendar_ids=k4csm0upr9vkfc0305dlvmhbh8] |
Quality Assurance | [google_agenda calendar_ids=338e63gi7snccksaq2g00gmqto] |
SE19 SEND Agenda | [google_agenda calendar_ids=kjkoufavhlv3n5dhnbvp9ofehk] |
SESLIP General | [google_agenda calendar_ids=2h61edfdmrgvb0fpjmpf4uc2ms] |
Transformation Network | [google_agenda calendar_ids= |
PSW Network | [google_agenda calendar_ids=7a03480dee80fdbac9c55615e07fd7658fffaf700651824b8e97d789de215604] |
Children's Continuing Care SE Network | [google_agenda calendar_ids=ac1a4bc8028abab084f9973bc15edd3f06306474b1545930d4050c564f1deb68] |
SESLIP Google Calendar - Adding a “Show All events” button
A “Show All Events” button can be added into an Upcoming Events box by altering the shortcode…
See the shortcodes on the previous page for specific calendars.
The shortcode needs show_all_button=TRUE adding onto the end of it.
For example, the AD Education shortcode is:
[google_agenda calendar_ids=rski4hmah0o8h68ctm6j1rfbtg]
If you add the extra bit onto the end of it:
[google_agenda calendar_ids=rski4hmah0o8h68ctm6j1rfbtg show_all_button=TRUE]
… the “Show All Events” button will then display in your Upcoming Events box.
Allowing Users to Contribute Files
You can create a section on a page where Users can contribute their own files, by uploading files to the shared/restricted area from their own PC.
In order to do this, you need to add a specific “Shortcode” onto a page…
The easiest way to add a shortcode is to put your cursor where you want it, and start typing /shortcode - you can then click the option to add it to the page.
You need to enter the shortcode [user_contributed_file_modal] into the box
This adds a button onto the front end titled “Submit your resource (File or website)”, which will open up a pop-up for the user to upload a file.
It’s advisable to add a heading and some text above it, for instance explaining what sort of files you’d like uploaded…
Showing files contributed by Users
Once you’ve added the “Submit your resource (File or website)” button onto a page, Users can add files to the system (see previous slide). You can display these user-contributed files on your page, along with a search/filter bar…
You’ll need to add two shortcodes to the page to do this. The easiest way to add a shortcode is to put your cursor where you want it, and start typing /shortcode - you can then click the option to add it to the page.
To add the search/filter section you need to add the shortcode [reports_search is_user_files="true"]into the box
And then to add a panel showing the most recently added files, you need to add another shortcode section beneath that, with the shortcode [latest_reports is_user_files="true"]
These two shortcodes will show on the front end as a search/filter and a list of recently uploaded user-contributed files… (You may wish to add a heading/help text along with them)
User-uploaded resources can be removed by Admins in the Admin Area > Restricted Resources:
Categorising Files Contributed by Users
In order to make the list of files more easily searchable, you can set Categories for the User Contributed Files in the admin area.
Click on the “Restricted Resources” menu item on the Dashboard
At the bottom of the sub-menu that appears, click on “User Contributed Document Types” - here, you can add/remove Document Types. These Types will be used on the front end to search/filter the files other users have added.
Temporarily Disabling Restricted Areas
You can temporarily disable a Restricted Area (if you don’t want to permanently delete it)
This uses a plugin to ‘exclude’ the Restricted Area category from the Restricted Area page,
so it won’t appear in the list of “Areas to which you have access”…
In the Admin area of the website, go to
Settings > Category Excluder…
Check the “Exclude…” boxes in all four columns to temporarily disable that Restricted Area…
The Restricted Area will still remain in the admin area of the site, but won’t appear on Users’ Restricted Area Dashboards. You can still upload documents to this temporarily disabled Restricted Area, this just hides access on the front end.
Using Custom Colours
Components and page elements generally have pre-set colours, which match the site’s colour scheme.
You can change these colours, if required (eg. if you want to add colour-coding to some sub-pages in the site). Generally, you can change the text colour or background colour of things.
Make sure your cursor is in the right section of the page (or highlight the text you want to change). You’ll see a “Colour” section in the Settings Panel on the right hand side:
These will initially start without colours allocated, because they’re using the default colours in the system.
You can change each one by clicking it…
The colour selector will open up.
Colour-scheme pre-sets are listed in the “Theme” section”.
You can click the box at the top to enter a custom colour…
You can select a custom colour here, or paste a hex code into the box at the bottom.
Sorting Pages into Folders
For easier organisation in the Admin area, pages can be sorted into folders (for instance, you could have a folder called “Networks” into which all those pages go, and another called “Directories”…)
On the Pages page, accessed via the side menu, there’s a panel on the left called “Folders”
You can use these buttons to add, rename, delete and expand the folders.
To put pages into folders, simply hover over the page you want to move and drag it, using the arrows icon, into the folder you want.
(If you change your mind, you can move it back into “Unassigned items”)
Note – when creating a page you can set what Folder the page goes into, using the “Folders” dropdown in the settings panel on the right hand side:
Managing Users – approving new users
When a user registers for the first time on the site Administrators will be sent an email alerting them to the new User, and directing them to click a link to edit the user and their permissions…
This takes the Administrator to that User’s page – Admins can scroll down to approve or deny the user, under their Access Status section…
All users, new or old, can be approved or denied at any time by going into the user, and scrolling down to “Access Status”…
Alternatively, admins can register new users manually themselves – by going to Dashboard > Users > Add New
Add the details of the user
You can leave the password as the automatically generated one, as the new user will receive an email asking them to set themselves a password
Ensure the user is set as Role = “Subscriber”, unless they are meant to be an Administrator
Tick the boxes, if applicable, to allow the new user access to the various restricted areas
Managing Users – granting area access
When editing or adding a user, you can set their permissions to ensure they can only view the areas of the site for which you wish them to have access.
To edit which areas users have access to, go into the Admin System, and find that User (Dashboard > Users) – use the “Search Users” function to help
To grant access… click on that user and scroll down to the list of restricted areas. Tick the corresponding box to the area they have requested access to, and be sure to click the “Update User” button at the bottom
End of Instructions�Should you require instructions on something not covered in this document, please contact support@netready.biz