Introduction #
Other user guides have provided details on using the SiteWorks block editor and a number of the more commonly used blocks. This guide discusses several more specialist (and powerful) blocks:
Widgets #
Overview #
A WordPress widget is a modular element that enables the addition of specific features to a website, for example, listing all the events or groups. Widgets can be added to areas of a website, as blocks, and are considered an inherent part of WordPress’s design and layout customisations. They are listed in the block inserter display.
SiteWorks provides content creators with a range of Widgets, not only those provided by WordPress but a number specifically developed for u3a site management. It is highly recommended that the u3a content creators use the provided SiteWorks widgets to provide the group and event information to site visitors 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 help the content creator add dynamic content to WordPress posts, pages, etc. They are displayed inside square brackets, [a_short code]. While it is possible to create Shortcodes, for ease the following Shortcodes are available as standard to replace widgets. In several cases, the Shortcode can be provided with additional parameters to extend functionality.
| 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 |
Shortcodes are similar in their functions to u3a list events and u3a list groups widgets available. The difference is that a shortcode can take parameters to customise the display, for example only show events in a specific category or just past events. While more complex to use, Shortcodes, give the content creator additional functionality.
Displaying Posts using a Query Loop #
Overview #
It is recommended that content creators have a clear 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 here.
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 text Add text or Block that will be displayed when a query returns no results 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 from the Themes, the required block(s).
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 has the option to 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, as follows. The content creator should first select the Query Loop, not a display element, the breadcrumbs at the bottom of the screen will help, then:
- Confirm the deselection of 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.
Tag Cloud #
It is possible, by using the Tag Cloud block to display the relative number of posts with a specific tag and select those posts with that tag. 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 Loop to Group and Events #
Query Loop #
In the Query Loop setting you have not only the option of setting POST TYPE to Post, but to other options including Groups and Events. If, for example, it is required to just 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 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 by using the features provided by the MFB (Meta Field Block) plugin, for further information see the MFB Documentation.
The MFB data available in SiteWorks are as follows:
| Group MFB name | Description |
|---|---|
| status_NUM | The group status (rendered as text), always provided |
| day_NUM | The group meeting day (rendered as text) when provided |
| time | The group meeting time (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 second group coordinator’s name (rendered as text) when provided |
| coordinator2_ID | The second group coordinator name (rendered as text) when provided |
| deputy_ID | The group deputy name (rendered as text) when provided |
| tutor_ID | The group coordinator’s name (rendered as text) when provided |
| The group email (rendered as text) when provided | |
| email2 | The second group email (rendered as text) when provided |
| Event MFB name | Description |
|---|---|
| eventDate | The date of the event rendered using the WordPress date format setting, always provided |
| eventTime | The time of the event 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 |
| eventGroup_ID | The name of the organising group (rendered as text) when provided |
| eventOrganiser_ID | The date of the event is rendered using the WordPress date format setting, always provided |
| eventBookingRequired | The organiser’s name (rendered as text) when provided |
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.
