Within a WordPress page, authors can add hyperlinks, to allow page visitors to:
- Move between locations within the current web page, particularly when the complete document cannot be viewed as a single screen, hence avoiding scrolling up and down as required, is discussed here.
- Linking to documents and pages or websites external to the current webpage is discussed here. The linked page can be set to be displayed in a new tab.
- An Embedded link to external resources, including videos, is discussed here.
Links Within the Current Web Page or Post #
If a web page or post is long or complex, it is good practice to either provide a link back to the top of the page after specific sections or between two points to allow cross-referencing. This can be achieved by adding an HTML anchor to a block and then using the anchor as the URL. Consider the following page, where we need a link between Back to Top to A Heading:
Select the block (in this case the Heading block) that you wish to link to (i.e., the anchor), in the block settings sidebar select Advanced, and enter a word as a unique web address in the HTML ANCHOR box::
The link anchor will appear next to the block’s name in the document’s outline view. It should be noted that the page heading cannot have an attached anchor, hence any top of the page anchor needs to be the block directly below the page title or the page’s slug needs to be referenced.
To set the link, once the text to be used as a link has been highlighted, select the link icon (A), from the block Toolbar as shown below. Enter # followed by the anchor name into the link box at B. The hash, #, identifies the link as being within the current page, if not correctly entered, on selecting the link, the user will get a 404 error. For example, if the in-page anchor is top, the corresponding URL is #top.
Links to Resources Outside the Current Page or Post. #
Defining the link #
A link to a resource outside the current page may be required if:
- A document provided by the u3a is required, for example, the current membership form or the Newsletter.
- A page or pages within the website that is/are not directly accessible from the main navigation menu, for example, policy documents, or resources for a specific group. The links could either be arranged as clickable text in a paragraph or within a list to form a local menu independent of the main navigation structure.
- An external website, for example, the u3a national website.
Adding a link to an URL external to the current page or post requires the entry of the destination URL, in a similar fashion to that discussed above:
Once the required text has been selected, and the link icon (A) is selected, the URL needs to be entered into box, B, as follows;
- If the document is in the media library, or a page or post on the current website, on entering text into the link box (B), a list of possible options is displayed, which can be selected, as shown at C.
- Captured from an external website. An external site’s URL, for example, that of the u3a National Office, can be entered into the link box as required. Web Masters should exercise a degree of caution, to ensure the site is relevant to the user community and there is no security risk.
- If the page does not currently exist, scroll to the bottom of the available linking options, where a Create page option is available (D). On selecting, the link and new page are created. It should be noted that (a) the new page can only be accessed through this link unless other changes to the site’s navigation bar are made, and (b), while the page has been created, it is stored as a draft, and needs to be populated and published.
Once the information is entered, enter/return should be selected,
It is possible to link to a specific location in a webpage within your site, by adding the local anchor information after the page URL, i.e.,. if the URL is, localhost:10005/an-author-only-page/#photo, the link will direct the reader to the location identified by the anchor photo on the page with the URL: localhost:10005/an-author-only-page/
Opening the linked resource in a new tab. #
The process discussed above will open the linked document or resource in the current tab on the visitor’s browser. If the content creator, wishes the linked material to open in a new tab, the following additional set is required. Reselect the link and select the Open in new tab option.
Configuring the Appearance of a Link #
It is the convention to display a hyperlink as follows:
- Underlined blue text, unvisited link.
- Underlined purple text, visited link.
- Underlinder red text, active link.
However, with WordPress, the Administrator can modify the link appearance, while it is not recommended to change the colour, it is possible to remove the underline, this can give the page a better appearance in certain applications. From the Dashboard select Appearance ⇒ Editor ⇒ Style. Then the edit icon, from the sidebar (A) select Typography, then the link option in Step B and finally select NONE under decoration., Step C It should be noted that this will change the appearance of ALL links across the site.
Embedded Links #
WordPress allows external content (e.g. videos or podcasts) to be directly embedded in a page or post, select Embed from the block browser
- Obtain the URL (i.e. the link) for the content you wish to embed from any of the supported services.
- Paste the URL into the text box of the Embed block and it will automatically convert itself into the appropriate embed.
- Preview the page or post to check its appearance.
Web Managers should note:
- Videos cannot be stored on or uploaded to the SiteWorks server.
- If the video has been provided externally, due consideration to copyright, suitability etc. MUST be considered.
Linking to a Telephone Number #
When using an iPhone or similar it is possible to link directly to a phone number. The process is as follows:
- Open the editor and locate where you want to add the clickable phone number.
- Add the phone number in plain text.
- Select the plain text phone number and click the link icon to insert a link.
- In the link field, enter tel: followed by the phone number, with no spaces or dashes, e.g. tel:01234567890
- Confirm by pressing Enter.
Web Managers should be aware of the GDPR implications of adding a phone number to a site, in particular the requirement to obtain the explicit consent of the person who owns the number being linked to.
It also should be noted that the Safari browser has an inbuilt feature to convert numbers greater than seven integers in length into telephone numbers automatically, this can be suppressed if required via a change to the underlying HTML and CSS but is not recommended for the majority of web masters. The main number affected is the charity number on the home page.