Widgets, Shortcode and Query Loops

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 the following:

Widgets #

Overview #

A WordPress widget is a modular element that enables the addition of specific features to a website. Examples of standard widgets are a calendar display where the user can select a date and one to list of all pages on the site as an altnative navigation aid (site map).

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.

NameFunction
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 listDisplays a list of notices
1Currently not fully implemented.

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.

FunctionShortcode 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 and widgets are similar and the functions to list events and list groups are available as both. The difference is a shortcode can take parameters to customise the display, for example only show events in a specific category or just past events. The widget version is simpler to use if you just need the default format and show future events.

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 loopChoose 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 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 NumberCategoryTag
Post 1AlphaUpper
Post 2BetaMiddle, Upper
Post 3BetaMiddle
Post 4Alpha Lower, Upper
Post 5BetaLower

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

CategoryTagPost(s) Displayed
Alpha, Beta1,2,3,4,5
Alpha1,4
Beta2,3,5
BetaLower4
Alpha, BetaLower4,5
Alpha, BetaUpper1,2,4

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 resultantTag 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 that it appears.

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.

What are your feelings
Updated on 2024-02-25