Guide to building online RFs

Note: examples and screenshots for this page are taken from across the Research Frameworks Network.

Basic Concepts

WordPress webpages have two main elements: a ‘front end’ (the webpages which everyone can see), and a ‘back end’ or Dashboard which is only available to administrators and where changes and additions are made. What is done in the ‘back end’ affects what is on the ‘front end’.

It’s best to make changes via the Dashboard, and this is also where you can build or create menus, administer comments, and where you create and edit the pages of the website. You need to be logged in to visit the Dashboard.

Each Framework site has it’s own Dashboard.

To switch between the front and back end of the website you can use the ‘top menu’ – in the front end click on the name of the framework on the top, choose Dashboard from the drop down.

In the backend you can return to the front end by clicking on the name of the framework on the top and choosing ‘Visit site’ from the drop down.

To access the Dashboard from the front end
To access the front end from the Dashboard

Creating new Framework Site

To create an entirely new Framework site, click on the My Sites

On the top menu select My Sites, Network Admin and then Dashboard.

Creating a new site via the Network Admin

On the resulting page, left hand menu select Sites and then Add New.

Here you can add the site URL, Title and Admin email – the URL will usually be an abbreviation of the main title, when choosing the admin email ensure it’s one you have access to.

To finish, click Add Site. You will receive an email with details about the site you’ve just created.

Adding the Historic England theme

You now need to add the Historic England theme to the site so that it looks similar to the others on the Network. Click on Visit Dashboard.

Activate the Historic England theme for your site

On the left hand menu click on Appearance then Themes. Choose the Research Frameworks theme, and click on Activate.

Enabling the Yoast SEO plugin

Breadcrumbs assist navigation

To make the website more accessible and to aid navigation we have added ‘breadcrumbs’ to the site, you can see these at work on many websites they show a user which page they are on.

To turn this on you will need to enable a plugin. On the left hand menu click on Plugins, and search down to find the Yoast SEO plugin, and press Activate. The SEO plugin will now appear at the bottom of your left hand menu and breadcrumbs will be visible on your site.

If they do not show, click on SEO on the menu, and then on Search Appearance, and the Breadcrumbs tab, scroll down and ensure Enable Breadcrumbs for your theme is selected,

Also in Search Appearance are a number of other settings to change. Save.

In the Content Types tab scroll down to Maps and ensure that Show maps in search results? is set to Off.

In the Taxonomies tab scroll down to Formats and ensure that Format-based archives is set to Off.

In the Archives tab ensure that Author archives is set to Off.

Save changes.

Enabling the Broken Link Checker plugin

There is nothing more annoying than finding broken links on a webpage, in order to keep track of this and to alert you to broken links we are using the Broken Link Checker plugin. This will also need enabling. On the left hand menu click on Plugins, and search down to find the Broken Link Checker plugin, and press Activate.

This will now appear on your Dashboard and will email you (if your email is the Administration Email Address for the site) when broken links are found. The Dashboard will show how many links are on your site, and if any are broken.

Broken Link Checker helps monitor broken links

Clicking on the Found 1 broken link will give you detailed information, it’s URL, Status and where on your site the link appears. You can then either go and update the link, or remove it completely from the page if an update is not possible.

Broken link details assist in fixing issues

Adding a new site to the RFN home page

At some point the site will need adding to the Main Menu on the Research Frameworks home page, you might wish to do this when you’ve added some of the content.

In the site Dashboard for your site go to the very top menu and roll the mouse over the title of your Framework so that the dropdown menu appears; click on edit site.

On the left hand menu click sites.

You will now see a list of all the Frameworks, your should appear at the bottom of the list.

Go to your site, hover the mouse over the title and click on edit. Copy the text in the Site Address (URL) box.

Copy the Site Address for your site.

Hover over the Network Admin: Research Frameworks icon on the top menu, then click on Visit Site.

Select Edit Page. This is the front page of the main network, where you can add your Framework. Scroll down to the Link Card Groups.

Add the title and URL for your framework

You will need to decide where your Framework fits within the groups; either ‘Regional’ (area based), ‘Specialist’ or ‘World Heritage & Local’. When you’ve decided which, scroll to the bottom of the list and Add Card.

Type in the Framework Title into the Text box and paste the URL in the Link box.

Click on Update in top right hand side of the page, hover the mouse over Research Frameworks in the top menu and then click Visit Site – your site will now be on the front page of the Research Frameworks Network.

Creating pages on your site

In the left hand menu of the back end of your site click Pages and Add New.

The Text editor page will open.

Title and URL for the page

The title you give the page here will be it’s name on the website. This will also build the URL for the page (although you can also manually create this, try to keep it short and precise).

In the right hand menu under Permalink you can see the URL for the page.

Settings for pages

On the right hand menu of your page there are two tabs – Page and Block.

Block options change depending on the type of block you are working on at the time.

Page options are where you can change the settings for the whole page. The following are useful –

Template – this setting changes the layout of the page as it shows in a browser.

The Default template automatically creates a left menu on the page from any H2 and H3 headings you have in your text. This is helpful for users to navigate a page, particularly if there is a large amount of text.

Example of Default template with menu

If your page is short or has no headings you can change the Template to Full Width, this removes the menu and spreads the text across the page.

The Permalink section is where you can see (and change) the end part of the URL for the page – you might want to shorten this if the title is very long.

Adding an image to the top of a web page (banner)

The grey rectangle across the top of all site pages is the space for a banner image, this can be different for each page. To add an image here go into Edit Page scroll down the right hand menu to Featured image and click on the grey box to choose a suitable image.

Setting the feature image
Featured image

Allowing comments on a page

For pages where comments are encouraged, this needs to be enabled. On the Page tab of the right hand menu scroll down to Discussion and tick the box which allows comments.

Tick to allow comments on a page

See the Guide to Managing User Interactions on RFs page for how to approve and manage comments left on the page.

Editing a page

Pages in WordPress are organised into Text Blocks, rather than paragraphs. Each block can be formatted individually (it’s difficult to format all blocks en-masse).

Blocks can take various forms, the main types used in Frameworks are; Paragraph (text), Heading, Image, List, Columns, Card, Research Framework Concepts and Map.

When creating the text it’s an idea to include the questions/strategies as plain text where they will appear, you can replace them later with the entry from the database.

Adding a block to a page

To add a block you can either start typing where it says Type / to choose a block or click on the cross in a black box, the resulting menu allows you to choose the type of block you wish to use.

Paragraph (text) Block

This is a simple block of text which can be formatted in a similar way to Word, enter the text you require and then roll the cursor over to make the editing menu visible.

Copy and pasting text from another document will automatically create paragraph blocks.

Elements of the Paragraph editing menu –

  1. Change the block type or style
  2. Drag the block to another position on the page
  3. Move the block up or down the page by one position
  4. Change text alignment
  5. Bold
  6. Italics
  7. Insert a link
  8. More editing options
  9. More options.

Adding an image in text

Images can be added to the Media Library within the Dashboard. Click on Media Library in the left hand menu, then Add New. Either Drag and drop the media file or go to Select files to add from your computer.

It is possible to add graphics and images to a page, this is done in the same way as adding text. In the adding a block choose Image, a block will be added to the page for you to choose where image will come from.

Choose the location of the image you’d like to include.

You can either choose to upload an image, or choose something which is already in the Media Library or add a URL. It is also possible to simply copy ad paste an image from another document (images added in this way will also be added to the Media Library automatically).

Image settings

Caption the image in the caption option, not as a separate block, this links them together for accessibility. If your caption describes the image in context Alt-Text is not required.

In the right hand menu bar you can change the settings of the Image; enter Alt-Text if necessary for accessibility – if the caption describes the image or the image is purely decorative Alt-text is not required.

Guidelines on Alt-Text can be found here –

The size of the image can also be changed here.

Your text will be changed to a H2 heading, which will appear on the menu, if you have subitems under this heading you can change it to H3 (which will also appear on the menu). For consistency across the network we a limiting headings to H2 and H3.

Adding Headings

Headings are useful for breaking up the text and making it more accessible, but they also act as pointers for the left hand menu (if you enable this). We would encourage the use of Headings even if the menu is not visible.

Enter the text you wish to be a head (keep it short), and then using the pop up menu for the block, change the type of block to a ‘Heading’ by clicking on the first icon and choosing Heading.

Change block to Heading

Adding Hyperlinks to a page

Adding hyperlinks to other pages (both within your Framework, or on external sites) is a good way to help navigation. Firstly, add the text you wish to be the link, and then highlight this text and click on the Link icon in the menu. In the resulting menu enter the link URL, and turn on Open in new tab.

The hyperlink will show on your page as underlined and in blue, and be clickable.

Adding tables to a page

Tables can be added using the Table block. Add a block and search for Table in the pop-up. This will insert a Table block where you can choose the number of Columns and Rows (it is possible to add more later using the edit function).

Adding a table – choose number of columns and rows
Edit function for a table

Adding Questions/Strategy blocks to a page

Once all your Questions/Strategies have been added to the database (see the Guide to using the Questions & Strategies Database page), you can then add them to the relevant pages on the website so that they can be seen.

Navigate or create the page you wish the question/strategy to appear.

Select Add block and search for and click on the Research Frameworks Concept icon.

This will open the right hand menu to allow you to search for the question/strategy. You can start typing the question words and the results will show below.

Below the results under Display Options the most important option is Chose what outputs to show menu. Here you can select which elements of the Question/Strategy to show on the page. Leaving all of the boxes unticked will show ALL of the elements.

Searching for a question/strategy
Choose the outputs to show

Once you have found your Question/Strategy and selected the options you require, press the purple Click to update currently selected block(s) button.

Click to enter the Question/Strategy to your page

Repeat the process for all of the Questions/Strategies required on the page.

If you had originally entered the Questions/Strategies as plain text, don’t forget to delete these afterwards.

Adding Cards to the Framework Front page

Cards on the front page of a Framework site

As well as the top menu for each page, WordPress allows you to create ‘cards’ as links to different pages on the site. These make for an interesting and engaging front page for your site.

Before you can add cards to a page, you first need to create columns for them to sit within. These can be any combination depending on how many cards you need.

Click to add a block, and choose Columns. In the resulting box choose the number of columns you require.

Chose the layout of cards which fits best

The columns will appear on the page, and you now need to fill them with cards.

Columns on the page

Click on the ‘+’ for the first column and choose (or search for) card, then to edit the card click on the pencil symbol.

Enter the card title,

Completed card

Complete the Title, select a link for the card to point to (this will be a page on the site), and add an image from the Media Library (or upload a new image). You can enter text in Content which will appear on the card if you wish.

Adding a page to the menu

So that visitors to your site can find your pages, they need to be added to the top menu.

Before adding pages to a menu it is important to think about what needs to be on the top menu. All sites require the generic pages to be on their menu;

  • Introduction to Research Frameworks
  • How to use this site
  • Registration/Log In
The above three generic pages on the menu

It is also a good idea to have a menu tab for About this Framework, where you can include pages for an introduction, acknowledgements, bibliography etc.

To add pages to a menu go to the Appearance tab on the left hand menu, and choose Menus.

The list of pages you’ve created will be on the left hand side, and will have been added to a new menu (if you don’t see the page you need click on View all), if the site already has a menu you can add pages using the tick boxes on the left hand side.

Menu items can be picked up and moved to a different position on the menu, you can also change the position by clicking on the down arrow next to the item on the menu.

Click the down arrow to make changes

Here you can also change the words to be used on the menu (this will NOT change the page title).

Pulling menu items to the right will also create sub menu items.

Creating sub items

When all items have been added and moved into the position required, tick the box at the bottom of the page to position the menu as the site Header Menu, and then press Create menu or Save menu in the bottom left corner.

Ensure that the Display location check box is ticked
The above menu as it will appear on the page