  	<style>
		#myProgress {
		  width: 100%;
		  background-color: #ddd;
		  content: 'test';
		}
		
		#myBar {
		  width: 30%;
		  height: 30px;
		  background-color: #1c2e3f;
		  text-align: center;
		  line-height: 30px;
		  color: white;
		}
		
		
		#progress-container {
		max-width: 600px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		}
	</style>
				<style>
			.program-cta {
			    background-color: #f1f1f2;
			    display: block;
			    margin-block-start: 1em;
			    margin-block-end: 1em;
			    margin-inline-start: 40px;
			    margin-inline-end: 40px;

			}

			div.program-cta h2 {
			    background-color: #1c2e3f;
			    color: white;
			    width: 100%;
			    display: block;
			    padding: 15px;
			    text-align: center;
			}

			div.program-cta div {
			    padding-left: 35px;
			    padding-right: 35px;
			    padding-bottom: 10px;
			}
		</style>
			<style>
		#myProgress {
		  width: 100%;
		  background-color: #ddd;
		  content: 'test';
		}
		
		#myBar {
		  width: 30%;
		  height: 30px;
		  background-color: #1c2e3f;
		  text-align: center;
		  line-height: 30px;
		  color: white;
		}
		
		
		#progress-container {
		max-width: 600px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		}
	</style>
				<style>
			.program-cta {
			    background-color: #f1f1f2;
			    display: block;
			    margin-block-start: 1em;
			    margin-block-end: 1em;
			    margin-inline-start: 40px;
			    margin-inline-end: 40px;

			}

			div.program-cta h2 {
			    background-color: #1c2e3f;
			    color: white;
			    width: 100%;
			    display: block;
			    padding: 15px;
			    text-align: center;
			}

			div.program-cta div {
			    padding-left: 35px;
			    padding-right: 35px;
			    padding-bottom: 10px;
			}
		</style>
		{"id":558,"date":"2018-03-21T10:02:11","date_gmt":"2018-03-21T14:02:11","guid":{"rendered":"https:\/\/new.umaine.edu\/userguide\/?page_id=558"},"modified":"2024-12-20T13:56:09","modified_gmt":"2024-12-20T18:56:09","slug":"shortcode-reference","status":"publish","type":"page","link":"https:\/\/umaine.edu\/userguide\/shortcode-reference\/","title":{"rendered":"Shortcode Reference"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\" id=\"button\">Button<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example of a button with default settings.<\/h4>\n\n\n<a href=\"https:\/\/umaine.edu\/\" style=\"text-transform:none;\" ><span class=\"button\"> Example of a button with default settings <\/span><\/a>\n\n\n\n<h4 class=\"wp-block-heading\">The basic button shortcode<\/h4>\n\n\n\n<p>To create a button you will place the following code into your page editor.&nbsp; If you are using a page with content blocks, choose the Rich Content Editor block.<\/p>\n\n\n\n<p>[button url=\"https:\/\/umaine.edu\/\"] Button Example [\/button]<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The button shortcode has two attributes.<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u00a0The first attribute is to create the link.\u00a0 An example of this attribute is <strong>url=&#8221;http:\/\/umaine.edu\/&#8221;<\/strong>, this is placed in the first set of brackets after the word button.<\/li>\n\n\n\n<li>The second attribute controls the capitalization of the words, an example of this attribute is\u00a0<strong>caps=&#8221;capitalize&#8221;<\/strong>.\u00a0 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.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Example of complete button shortcode<\/h4>\n\n\n\n<p>[button url=\"https:\/\/umaine.edu\/\" caps=\"none\"] Button Example [\/button]<\/p>\n\n\n\n<p><a href=\"#\">Button Example Set To Capitalize<\/a><br><a href=\"#\">Button Example set to Lowercase<\/a><br><a href=\"#\">buTton eXample Button Example sEt tO NoNe<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"child\">Show child pages<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example of children being displayed<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"233\" height=\"127\" src=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2018\/03\/Screen-Shot-2018-03-21-at-11.22.33-AM.png\" alt=\"Bulleted list created by the child shortcode.\" class=\"wp-image-598\" srcset=\"https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2018\/03\/Screen-Shot-2018-03-21-at-11.22.33-AM.png 233w, https:\/\/umaine.edu\/userguide\/wp-content\/uploads\/sites\/33\/2018\/03\/Screen-Shot-2018-03-21-at-11.22.33-AM-105x57.png 105w\" sizes=\"auto, (max-width: 320px) 85vw, (max-width: 768px) 67vw, (max-width: 1024px) 62vw,233px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Complete shortcode to display children<\/h4>\n\n\n\n<p>[show_children]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"progress\">Progress Bar<\/h3>\n\n\n\n<p>The progress bar short code is a way of visually representing progress of a campaign or project.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example of a progress bar<\/h4>\n\n\n\n\t<div id=\"progress-container\"  >\n\t\t<div id=\"myProgress\">\n\t\t\t<div id=\"myBar\"><\/div>\n\t\t<\/div>\n\t\t<caption>30% to Goal<\/caption>\n\t<\/div>\n\n\n\n\n<h4 class=\"wp-block-heading\">The progress bar has two attributes<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The first attribute is percentage and this controls how much of the progress bar is filled in. An example of the percentage attribute is <strong>percentage=&#8221;30&#8243;<\/strong>.<\/li>\n\n\n\n<li>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&#8217;s about. An example of <strong>text_value=&#8221;30% to goal&#8221;<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Example of complete button shortcode<\/h4>\n\n\n\n<p>[progress percentage=\"30\" text_value=\"30% to Goal\"]<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"map\"><a href=\"https:\/\/umaine.edu\/userguide\/2018\/10\/23\/embedding-a-google-map\/\">How to embed a Google Map<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hours\">Hours of Operation shortcode<\/h3>\n\n\n\n<p>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 &#8220;Hours of Operation&#8221; that can help. Within that screen on the dashboard, you may specify the hours of operation for the different days of the week (Sunday &#8211; Saturday). Leave a day blank\/empty if you are closed that day.<\/p>\n\n\n\n<p>Once this is in place, you can use this shortcode to display the hours of operation on any page:<\/p>\n\n\n\n<p>[hours]<\/p>\n\n\n\n<p>To see this in practice, we have added &#8220;hours of operation&#8221; to this user guide to indicate our operating hours of 8:00 a.m. &#8211; 4:30 p.m. Monday-Friday. Here is the &#8220;hours&#8221; shortcode on the page below:<\/p>\n\n\n\nOpen Today: 8:00 a.m. - 4:30 p.m.\n\n\n\n<p>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\u2014 by updating the upcoming Monday hours on Tuesday, the upcoming Wednesday hours on Thursday, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cta\">Call to action feature box shortcode<\/h3>\n\n\n\n<p>[cta title=\"Headline appears here\"]<\/p>\n\n\n\n<p>Text appears here.<\/p>\n\n\n\n<p>[\/cta]<\/p>\n\n\n\n<p>results in:<\/p>\n\n\n<div class=\"program-cta\"> <h2>Headline appears here<\/h2><\/p>\n<p>Text appears here.<\/p>\n<p><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"picker\">UMS Post Picker<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">A useful example: embed the Academic Calendar events<\/h4>\n\n\n\n<p>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\"&nbsp; options=\"no_excerpt\"]<\/p>\n\n\n\n<p>The details are explained below:<\/p>\n\n\n\n<p><strong>site_id<\/strong>: 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 <strong>15<\/strong>.<\/p>\n\n\n\n<p><strong>post_type<\/strong>: The type of WordPress post to search. The post type for events is <strong>tribe_events<\/strong>.<\/p>\n\n\n\n<p><strong>taxonomy_terms<\/strong>: A list of taxonomies and terms to match. The format is taxonomy_terms=&#8221;taxonomy_name:term_slug&#8221;. For event calendar categories the taxonomy name is <strong>tribe_events_cat<\/strong>, and the Academic Calendar category term slug is <strong>academic-calendar<\/strong>.<\/p>\n\n\n\n<p><strong>order_by<\/strong>: The post field to order posts by. While the default for this is the post publish date, event calendar items have a special &#8220;meta&#8221; value to identify when a future event begins. For this reason, the order_by value for event calendar items is <strong>meta_value<\/strong>.<\/p>\n\n\n\n<p><strong>meta_key<\/strong>: This attribute is used in conjunction with the above <strong>meta_value<\/strong> to set the order of posts when the default publish date isn&#8217;t helpful. For event calendar items, this meta_key is <strong>_EventEndDate<\/strong>.&nbsp;NOTE: because this sorts by the event&#8217;s <em>end<\/em> date, events that span multiple days may appear to be out-of-order in your event list (which lists the event&#8217;s <em>start<\/em> date). Our recommended best practice is to list multi-day events as sequential single-day events.<\/p>\n\n\n\n<p><strong>template<\/strong>: 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 <strong>ums_event_summary_list<\/strong>.<\/p>\n\n\n\n<p><strong>omit_past_posts<\/strong>: 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 <strong>true<\/strong> in order to only display events that are upcoming.<\/p>\n\n\n\n<p><strong>order<\/strong>: The sort order, which can be either ascending (ASC) or descending (DESC). For a list of upcoming events, this is set to <strong>ASC<\/strong>.<\/p>\n\n\n\n<p><strong>limit<\/strong>: Shows at most this many posts. If left out the default is 50 posts. For this Academic Calendar example, setting this to <strong>5<\/strong> will show the next five upcoming events.<\/p>\n\n\n\n<p><strong>options<\/strong>: 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 <strong>no_excerpt<\/strong> will exclude any excerpt text from the listings.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">That was a lot to take in, is there more?<\/h4>\n\n\n\n<p>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 <a href=\"mailto:um.weboffice@maine.edu?subject=Help%20with%20event%20shortcode\">um.weboffice@maine.edu<\/a>.<\/p>\n\n\n\n<p><a href=\"https:\/\/webtech.its.maine.edu\/usit-web-technologies-user-documentation-wordpress-administrator-guide\/custom-ums-features-and-plugins\/ums-post-picker\/\">The full documentation for the Post Picker is available on the UMS IT website<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/page-withsidebar.php","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-558","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"","author_link":"https:\/\/umaine.edu\/userguide\/author\/"},"comment_info":"","_links":{"self":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/comments?post=558"}],"version-history":[{"count":101,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/558\/revisions"}],"predecessor-version":[{"id":3050,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/pages\/558\/revisions\/3050"}],"wp:attachment":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/media?parent=558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}