Introduction #

This guide discusses several more specialist (and powerful) blocks in SiteWorks.

• Widgets
• Shortcode
• Query Loop
• Tag Cloud
• Query Loop and Tag Cloud for Groups and Events

Widgets #

Overview #

A WordPress widget can be considered as a type of block that automatically generates content on a page or post. Examples are listing u3a events or groups or the ‘Page List’ widget that lists all the pages on your site with links. Widgets are listed in the block inserter display.

As well as the Widgets that come with WordPress, SiteWorks provides a number specifically developed for u3a site management. It is highly recommended that the u3a content creators use the provided SiteWorks widgets to ensure that group and event information is presented clearly and consistently. For this reason, the templates for group and event pages come pre-configured with the required widgets.

u3a Specific Widgets #

It should be noted that some of these Widgets are restricted to operate only within a specific post/page, where its operation is integrated into the page design, in particular those related to events or groups.

Name	Function
u3a group list	Displays a list of groups.
u3a single group data	Displays information relating to a specific group
u3a single event data	Displays information relating to a specific event
u3a events list	Displays a list of events
u3a venue list	Displays a list of venues. 1
u3a single venue data	Displays information relating to a specific venue
u3a notice list	Displays a list of notices

Shortcodes #

Shortcodes in WordPress are code shortcuts that, like Widgets, help the content creator add dynamic content to WordPress posts, pages, etc. They are displayed inside square brackets, [a_short code]. The website administrator can create Shortcodes, however, four are provided within SiteWorks. To configure a ShortCode with additional parameters, the content creator should refer to the specific ShortCode documentation by following the associated link.

Function	Shortcode	Parameters
Email contact form	[u3a_contact name = “**”]	Yes
Event List	[u3aeventlist]	Yes
Group List	[u3agrouplist]	Yes
Displaying Website Terms and Conditions	[u3a_policy_notice]	No

The Event List and Group List shortcodes are similar in their functions to the Widget equivalents u3a list events and u3a list groups. The difference is that a shortcode can take parameters to further customise the display, for example only show events in a specific category or past events. While more complex to use than Widgets, Shortcodes, give the content creator additional functionality.

Displaying Posts using a Query Loop #

What a Query Loop does #

SiteWorks provides Group webpages and Event webpages as a structured way to manage groups and events. The Event and Group Widgets and Shortcodes described above provide an easy way of listing these webpages in a limited number of standard formats. The majority of SiteWorks sites will find that using u3a Widgets or Shortcodes will meet their needs.

A Query Loop is an advanced WordPress block that can provide much more customisation of layout and content of Group and Event webpages. It can also be used to automatically display other site content. For example, a u3a may create news articles and reports on Group activities. A Query Loop can display these in various ways, for example in date order, only list Groups news, show an extract of the article with a ‘read more’ link, present a features picture image.

Overview #

It is recommended that content creators have an understanding of the concept of a post before adding a Query Loop to a u3a site, in particular the concept of categories and tags. The display of posts requires the use of a Query Loop, which when correctly configured, displays related posts at a single location. A Query Loop block is an advanced block that allows the display of posts based on specified parameters. With various block patterns integrated into the block menu, the content creator can create dynamic pages that allow an easy route for Group Leaders to add information regarding current or future activities.

It should be noted that SiteWorks also uses WordPress Posts to display group, event, and venue information hence the Query Loop and its associated Tag Cloud block can be used to extend and/or add additional features to a u3as site, as discussed further down this article.

Depending on how the query loop is configured, a wide range of content relating to a post can be displayed are shown below:

To assist with the configuration of a Query Loop, it is recommended that the Editor or Administrator create at least one dummy post for development purposes.

Adding a Query Loop #

Using the Block Inserter at the required location, select Query Loop, from the Themes section of the block browser. On selection, the following options appear:

The Query Loop provides two options, to determine how a post appears on your website, you can select either Chose or Start Blank

• Chose provides predefined patterns, including Standard, Featured Image to the Left, Small Featured Image and Title, Grid, etc. The patterns show how currently available posts appear in each format.
• Start Blank, provides initial templates that the user can modify.

If the Query loop ⇒ Choose is selected, the content creator is presented with several different layouts, the selections are populated with ALL posts currently available and will be displayed in the order of entry time and date, as no filters have been applied.:

Depending on the application, various display options are available, with and without the provision for a featured image. Once the pattern required is selected, it is displayed. To fully complete the process:

• The Add “read more” link text should be completed, with Read More or something similar.
• With the Query Loop block selected, it is important to deselect “Inherit query from template” in the sidebar

In the example below, the Grid option has been selected from the available patterns.

If the content creator wishes to configure the presentation of the query loop independently, then Query Loop ⇒ Blank should be selected this gives the options:

Select Title and Date to give a minimal display of an individual post. The other three options provide some additional features but still are limited. On selecting the required option, ALL posts currently available will be displayed in the order of entry time and date, as no filters have been applied. With the Query Loop block selected, it is important to deselect “Inherit query from template” in the sidebar. The maximum number of posts displayed per page is ten, determined by the u3a template and WordPress.

The “Add text or Block that will be displayed when a query returns no results” comment can be replaced with either text or a block as required. If nothing is entered, nothing is displayed on the website, which may lead to a poor visitor experience.

Adding Addition Features #

This resultant view of posts could now be considered the bare minimum, as the contents and other information relating to the post are not displayed. Place the Block Inserter the title block and the date of the top post, then, using Browse All, select the required block(s) from the Themes.

The most commonly used blocks used to enhance the visitor experience include:

• Excerpt: will provide a short extract of the post. A “…” icon indicates that only some of the text is displayed, this is the first 55 words of the post. To ensure that the reader can read all the text, the statement Add ‘read more Link’ text needs to be completed.
• Post Content: if you wish to display the complete post.
• Author: will provide the author’s name, together with their avatar and biographical details. The name displayed will be the one set in the user profile. It is recommended that this option is not used.
• Author Name: will just display the author’s name as entered in the user information
• Post Featured Image: will display the post’s featured image, this image is separate from any images contained within the post.
• Categories: will display a post’s category. The content provider may add text before (prefix) or after (suffix) the list of Category/Categories.
• Tags: will display a post’s tags, which will allow the user to select posts which have identical tags, this is similar to a Tag Cloud. The content provider has the option to add text before (prefix) or after (suffix) the actual Tag(s).

If required Heading of the post can be set as a link, by selecting Make title a link in the header sidebar, this will allow the visitor to open the post, of required the Open in a new tab can be set

Query Loop Filtering #

By default, the posts are arranged in date order, the most recent on top of the list, however, you can order them by Oldest to Newest, A-Z or Z-A

A u3a website can contain many query loops, that are individually configured. To configure a Query Loop to show only Posts with specific categories and tags, use the options available on the right-hand sidebar; select the Query Loop, not a display element, the breadcrumbs at the bottom of the screen will help, then:

• Confirm the deselection of the Inherit query from template option.
• Select Post from Post Type, A
• Using the Filters option. Select Taxonomies to access the Categories filter. Posts can also be filtered by the Author or depending on the type, a Keyword if required, B
• If Taxonomies is selected, enter the required categories and tags, these will autocomplete as you type. As you proceed the posts visible on the page will be filtered.

:

It is possible to define a post as being Sticky. In the Query Loop settings, these can be included, excluded or the only posts displayed. A Sticky post is always displayed at the top of the list, irrespective of its publication date.

Once you have completed the page including the Query Loop ensure that it is saved using, Save to Draft or Publish

To illustrate the power of this approach, five posts were created with the following criteria:

Post Number	Category	Tag
Post 1	Alpha	Upper
Post 2	Beta	Middle, Upper
Post 3	Beta	Middle
Post 4	Alpha	Lower, Upper
Post 5	Beta	Lower

Depending on the settings of the Category and Tag, the posts can be displayed, as shown below:

Category	Tag	Post(s) Displayed
Alpha, Beta	–	1,2,3,4,5
Alpha	–	1,4
Beta	–	2,3,5
Beta	Lower	5
Alpha, Beta	Lower	4,5
Alpha, Beta	Upper	1,2,4

Displaying a Featured Image Block #

The Featured Image can be displayed by incorporating the Featured Image block into the query loop. Adding a featured image to a post is discussed here.

In the example below, a 30:60 column arrangement has been used, with a Post Feature Image block being placed in the left column and a Post Extract block in the right column. If a Feature Image is not available, nothing is displayed to the left of the text. When Click to read more is selected, the complete post is displayed, without the Featured Image.

Display limits to a Query loop. #

To prevent excessively long lists of posts, as the number of displayable posts increases, WordPress will place a defined number of posts on individual pages,, as shown below:

Tag Cloud #

The Tag Cloud block displays the relative number of posts with a specific tag, by font size (i.e. the more posts with a particular tag, the larger the font). Displaying posts with a specific tag is achieved by clicking on the tag’s name. If the five posts from the example above, are considered, the resultant Tag Cloud is:

Alpha is in a larger font as this is the most common tag across all posts. On selecting Upper, all those Posts with that tag are displayed:

Extending Query Loops to Group and Events #

Query Loop #

In the Query Loop setting, you can set POST TYPE to Post or other options including Groups and Events. If, for example, it is required to display forthcoming meetings on the Home Page, a Query Loop, with POST TYPE set to Event, the Filter set to Taxonomy, and The Category set to Meeting can be used. It should be recognised this does not filter by group, hence all events classified as Meetings will appear. This contrasts with the Events Widget, which will filter against the Group, depending on the group page on which it appears.

Displaying Group and Event Data #

If a content creator uses a query loop to display groups and events, the query loop block does not display the underlying u3a data (e.g. group status, start time of an event). This can be resolved using the MFB (Meta Field Block) plugin, for further information see the MFB Documentation.

The Meta Field Blocks available in SiteWorks are as follows:

Group Metadata Name	Description
status_NUM	The group’s status (not optional). Note this displays the “long” version of the status as detailed here.
day_NUM	The group meeting day (rendered as text) when provided
startTime	The meeting start time, rendered as HH.MM when provided
endTime	The meeting end time, rendered as HH.MM when provided.
time	The group meeting time-period (rendered as text) when provided
frequency	The free-text description of when the group meets when provided
when	The free-text description of when the group meets when provided
cost†	The free-text description of the cost, when provided
venue_ID	The venue title (rendered as text) when provided
coordinator_ID	The primary group coordinator’s name (rendered as text) when provided
coordinator2_ID†	The second group coordinator’s name (rendered as text) when provided
deputy_ID†	The deputy coordinator’s name (rendered as text) when provided
tutor_ID†	The group’s tutor name (rendered as text) when provided
email†	The group’s email (rendered as an email address) when provided. GDPR should be noted.
email2†	The group’s secondary email (rendered as an email address) when provided. GDPR should be noted.

^† These options will only be active if selected in the Fields Required when setting up a new group in the u3a settings as discussed here.

Event Metadata Name	Description
eventDate	The date of the event rendered using the WordPress date format setting, always provided
eventTime	The time of the event starts is rendered as HH:MM when provided
eventEndTime	The time of the event is rendered as HH:MM when provided
eventDays	The number of days duration of the event, always provided, defaults to 1
eventVenue_ID	The venue title (rendered as text) when provided
eventGroup_ID	The name of the organising group (rendered as text) when provided
eventOrganiser_ID	The event organiser, (rendered as text) when provided
eventBookingRequired	The booking information, (rendered Yes or No) when provided

Venue Metadata Name	Description
district†	Address information if provided
address1	Address information if provided
address2	Address information id provided
town	Address information if provided
postcode	Postcode of the venue
access	Free text to describe accessibility of the venue
phone	Phone number if provided
url	Web address for additioonal information, if provided

^† These options will only be active if selected in the Fields Required when setting up the venue information in the u3a settings as discussed here.

To add additional information to a group or event query loop using the MFB, the following process is required following the completion of the basic query block.

• From the Block Insertion toil, select the MFD. Ensure that the new block is within the group or event, to verify the position is correct, use the Breadcrumb feature.
• In the right-hand pane:
  • Ensure that Field Type is set to Default ‘meta’.
  • Enter the name of the required field into the Field Name.
  • If the Hide Block if the value is empty option is deselected, an option to add text when no value is present (i.e. No venue is specified) is available.
  • Enter the Prefix and Suffix if required.

The editing and display views are shown below:

Tag Cloud #

The Tag Cloud filter can be configured to show the relative sizes of all the groups and events currently available. For example, if the Group Categories filter is used, the following can be displayed, where selecting a Category will take the user to the relevant list of groups.