Introduction #

The Administrator can make significant changes to the site’s appearance and functionality, by editing the Navigation Menu in the header and the information contained within the Footer. This information is visible on all web pages across the website. In WordPress, the header and footer together with related features, are termed templates.

The Navigation Menu is the set of links that sit across the top of the web page and provide the site visitor with a route to navigate to different pages within the site. This guide explains how to edit the Navigation Menu and Footer to provide the layout required.

For sites migrated from SiteBuilder, the Navigation menu will consist of ALL top-level pages that are available, and hence editing will in all probability be required. If the site is a new starter site, the default configuration is that the Navigation Menu is populated with key pages e.g., Groups, Events, Welcome etc.

It should be noted that while a user with the role of an Editor or Author can create pages, they require the Administrator to add any page to the main menu structure. However, an Editor can create a link-based menu within a page, as discussed here. This process can, if not carefully controlled this can lead to the possibility of orphan pages within the website. It is recommended that the u3a committee and the Web Master agree on a policy regarding this matter during the planning of the website.

Editing Headers and Footers #

In WordPress, the Front Page template takes precedence over all other templates. Hence if the Front Page header and footer are edited, the changes will reflect across all the posts and pages in the site, unless a page or post is assigned to another template.

To access the editor:

• From the Dashboard, select Appearance ⇒ Editor.
• From the Design page, select Templates, this provides a list of templates.
• Select Front Page to edit the Header and Footer, and select the Edit icon.

To permit editing, the settings sidebar must be visible, if not, select using the icon, A, then from B select Header or Footer as required.

Editing the Header #

Title Bar #

The title bar containing the u3a logo and the name of the u3a is predefined as part of the style, and should not normally be edited. The name of the u3a is set via u3a Settings.

Navigation Menu #

It should be noted that WordPress has several different routes to edit the navigation bar, the one detailed here is considered one of the most convenient.

Select the Header, then select the Navigation Menu, (the Navigation bar is a child of the header, at this stage of editing the breadcrumb trail will show Template > Header > Group > Row > Navigation). After selecting, the navigation bar is highlighted:

Navigation Bar Background Colour #

In the default configuration, the colour of the Navigation Menu is set to White. This can be changed as follows:

• Select Group from the Breadcrumb trail.
• Select the required background colour from the Group Style sidebar. In selecting the colour, ensure that the contrast between the text and background is maximised.
• Save the modified header

Editing a current item #

Select a navigation element and edit the text as required. The block Toolbar permits the link information to be changed. In addition, the < and > will change the position of the menu item.

Adding a menu item #

To add an item select + at the right-hand side of the current navigation bar, or in the settings sidebar, the required information can be added:

• The name of the menu item can be added by:
  • If you use the search feature the page title is directly added to the navigation bar.
  • Typing over Add Link if required
  • Entering the name into the Label box
• The URL can either be:
  • Entered directly into the search box, or searched for by entering the page’s name
  • Directly copied into the URL box in the sidebar.
  • From an external site e.g. the u3a national office.
• An option is available to allow a new page to be added to the site if required. Scroll to the bottom of the link options, where an option to create a new draft page is provided. Note: the page will not appear in the menu until it has been populated and published.

Once entered, the new item can be positioned, using the < > icons as required.

To remove a menu item, just select the item from the Navigation Menu, and from the option box, select the three vertical dots, and then Remove. Ensure you have selected the item, not the whole navigation bar.

On completion ensure the changes are Saved. WordPress will confirm that the site has been updated.

Adding a Sub-Menu Item #

WordPress allows the creation of sub-menus items for example you could go from Information to Meetings to Annual General Meeting. Currently, only two levels of sub-menus are allowed. To add a sub-menu item:

Select the menu item in the navigation bar, i.e. the parent of the submenu item. From the Toolbar select the Add submenu, and Add Link appears, which needs to be selected to allow the item’s name and link to be added identically to that discussed above. As noted above an option is available to allow a new page to be added to the site if required.

On completions ensure the changes are Saved. WordPress will confirm that the site has been updated.

Deleting a Menu Item. #

Select the item to be deleted, then from the Block Toolbox, select the three vertical dots option to the extreme right, scroll down to the last option Remove the item name, and select, the item name as the name of the element is deleted.

On completion ensure the changes are Saved. WordPress will confirm that the site has been updated.

Adding a Social Media Icon #

To place a Social Media icon on the header, the following process should be followed

• Select the Header.
• Move the cursor between the Navigation Bar and Search Box, and the Block Inserter Icon will appear (identified as Add Block).
• Select, and locate the required icon for the Social Icon block and configure as discussed here.

Editing the Footer #

The page Footer normally contains the following information:

• The u3a’s Charity number (for those u3as who are registered charities).
• A copyright statement for both the theme and content.
• A link to the u3a’s Website Terms and Conditions page. While a u3a can follow its own policy, it is strongly recommended that it uses the provided text that has been approved by the Trust’s legal team.
• One or more social media icons if not already added to the header.

Link to Website Terms and Conditions. #

A link to the Website Terms and Conditions can be provided in the footer by the Shortcode: [u3a_policy_notice]. It should be noted that the link will only appear if the page is present and it has been published.

When viewing a page, if the “Website Terms of Use” link does not appear, check that a page titled Website Terms and Conditions is in the list of pages and is published (i.e not draft).

Layout Options #

Select Footer, in an identical manner to Header gives access to the Footer block, which can then be edited as required using the Block Editor. The Footer can either be constructed using a Columns block, or several blocks within a Row block. While the Columns approach will automatically give the correct spacing, the use of a Row will require adjustment to the individual block to give the correct layout.

On completion, ensure the changes are saved. WordPress will confirm that the site has been updated.

Hence in the edit view, a design based on a three columns approach will appear as:

The footer seen by a site visitor will be:

If the design is based on the use of a Row block, a social media block can be added to give:

Linking to Images in the Header or Footer. #

While is possible to place an image (for example the u3a logo) into the header and footer if required. Links as text are NOT recommended as a text link is by default formatted as underlined blue, which becomes almost invisible against the header.

The logo should be in white against a transparent background (i.e. in PNG format), to conform with the SiteWorks and u3a colour pallet and standards. The u3a logo can be obtained from the Brand centre.