Shortcode Reference
Button
The button shortcode provides you with the ability to have a branded button with a link to a page. This is a good way to direct attention to important links.
Example of a button with default settings.
The basic button shortcode
To create a button you will place the following code into your page editor. If you are using a page with content blocks, choose the Rich Content Editor block.
[button url="https://umaine.edu/"] Button Example [/button]
The button shortcode has two attributes.
- The first attribute is to create the link. An example of this attribute is url=”http://umaine.edu/”, this is placed in the first set of brackets after the word button.
- The second attribute controls the capitalization of the words, an example of this attribute is caps=”capitalize”. By default the attribute sets every letter uppercase. The options for this attribute are lowercase, capitalize, and none. Capitalize will capitalize the first letter of each word, lowercase will lowercase all letters, none will display your text as you typed it.
Example of complete button shortcode
[button url="https://umaine.edu/" caps="none"] Button Example [/button]
Show child pages
The Show Child shortcode will display all children of the present page in a bulleted list. You may place this code anywhere in your page to present the list.
Example of children being displayed
Complete shortcode to display children
[show_children]
Progress Bar
The progress bar short code is a way of visually representing progress of a campaign or project.
Example of a progress bar
The progress bar has two attributes
-
- The first attribute is percentage and this controls how much of the progress bar is filled in. An example of the percentage attribute is percentage=”30″.
- The second attribute is text_value, this controls what is displayed in the progress bar caption; ideally this explains what the value of the progress bar and what it’s about. An example of text_value=”30% to goal”.
Example of complete button shortcode
[progress percentage="30" text_value="30% to Goal"]
How to embed a Google Map
Hours of Operation shortcode
Do you need to display your hours of operation on the website, but do not want to list different hours for days of the week? There is a feature available in Settings called “Hours of Operation” that can help. Within that screen on the dashboard, you may specify the hours of operation for the different days of the week (Sunday – Saturday). Leave a day blank/empty if you are closed that day.
Once this is in place, you can use this shortcode to display the hours of operation on any page:
[hours]
To see this in practice, we have added “hours of operation” to this user guide to indicate our operating hours of 8:00 a.m. – 4:30 p.m. Monday-Friday. Here is the “hours” shortcode on the page below:
Open Today: 8:00 a.m. - 4:30 p.m.
If you have different hours of operation at different times of the year, you can alter the hours of operation up to 6 days in advance— by updating the upcoming Monday hours on Tuesday, the upcoming Wednesday hours on Thursday, etc.
Call to action feature box shortcode
[cta title="Headline appears here"]
Text appears here.
[/cta]
results in:
Headline appears here
Text appears here.
UMS Post Picker
This feature is utilized to pull posts from one site and display them within another site using shortcodes, taxonomy criteria, and other options. The feature was developed and is maintained by the UMS Web Development Team, and the specific templates created for displaying information are developed and maintained by the UMS Web Technologies Team. The main uses for this feature are to display news, events, and other types of content across our websites to avoid duplicating content, in much the same way as our article and event list content blocks.
A useful example: embed the Academic Calendar events
To illustrate this feature, here is the shortcode needed to display the next five upcoming events in the academic calendar:
[ums-post-picker site_id="15" post_type="tribe_events" taxonomy_terms="tribe_events_cat:academic-calendar" order_by="meta_value" meta_key="_EventEndDate" template="ums_event_summary_list" omit_past_posts=true order="ASC" limit="5" options="no_excerpt"]
The details are explained below:
site_id: The sub-site ID to pull content from. If omitted, the post picker will pull content from your site. The ID of calendar.umaine.edu (where the Academic Calendar events are published) is 15.
post_type: The type of WordPress post to search. The post type for events is tribe_events.
taxonomy_terms: A list of taxonomies and terms to match. The format is taxonomy_terms=”taxonomy_name:term_slug”. For event calendar categories the taxonomy name is tribe_events_cat, and the Academic Calendar category term slug is academic-calendar.
order_by: The post field to order posts by. While the default for this is the post publish date, event calendar items have a special “meta” value to identify when a future event begins. For this reason, the order_by value for event calendar items is meta_value.
meta_key: This attribute is used in conjunction with the above meta_value to set the order of posts when the default publish date isn’t helpful. For event calendar items, this meta_key is _EventEndDate. NOTE: because this sorts by the event’s end date, events that span multiple days may appear to be out-of-order in your event list (which lists the event’s start date). Our recommended best practice is to list multi-day events as sequential single-day events.
template: This sets the template to use for the content. Templates can be specific to custom post types such as events, or generic and applicable to all post types. For calendar listings, the template is ums_event_summary_list.
omit_past_posts: This is an on/off (true/false) setting that controls whether the list should exclude posts earlier than the current date. If left out, the list will include past posts, but for event calendar items this is set to true in order to only display events that are upcoming.
order: The sort order, which can be either ascending (ASC) or descending (DESC). For a list of upcoming events, this is set to ASC.
limit: Shows at most this many posts. If left out the default is 50 posts. For this Academic Calendar example, setting this to 5 will show the next five upcoming events.
options: This is used in conjunction with the earlier template attribute to include options that are not otherwise included in the shortcode parameters. In the case of the event summary list template, the option no_excerpt will exclude any excerpt text from the listings.
That was a lot to take in, is there more?
There are still more options that can be used for event listings that we will document in our user guide over time. Displaying event image thumbnails, displaying the events in a horizontal row, and combining multiple categories of events together are all possible. If you want to explore what is possible with listing events on your site, contact us at um.weboffice@maine.edu.