{"id":3606,"date":"2024-12-11T15:55:22","date_gmt":"2024-12-11T20:55:22","guid":{"rendered":"https:\/\/www.montclair.edu\/university-communications\/?page_id=3606"},"modified":"2024-12-11T15:55:22","modified_gmt":"2024-12-11T20:55:22","slug":"steps","status":"publish","type":"page","link":"https:\/\/www.montclair.edu\/university-communications\/web-development-and-experience\/montclair-edu-website-framework\/wordpress-shortcodes\/steps\/","title":{"rendered":"Steps"},"content":{"rendered":"

The shortcodes stepgroup<\/strong> and step<\/strong> can be used to display an ordered list of steps for users to follow. Use the number <\/strong>attribute for the step <\/strong>element to set the step number.<\/p>\n

Steps are displayed as special labels for drawers. We recommend getting familiar with how to add drawers to your website<\/a> before reading this section. Each individual step can be displayed as closed (default) or open.<\/p>\n

Here’s an example implementation of content placed within steps.<\/p>\n

Step<\/span> 1<\/span><\/div>\n
Do This First<\/div>
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida dignissim porta. Etiam sollicitudin mattis erat, vitae volutpat risus dictum et. Praesent nisi dolor, suscipit sed enim non, tincidunt auctor ex. Phasellus tempus augue dolor, ut porta justo ultrices pellentesque. Nam ut ante vitae nisl mollis aliquam. Nullam nec dolor sapien. Vestibulum tempor sapien non pretium varius. Fusce vulputate nibh nec mauris pellentesque posuere.<\/p>\n<\/div><\/div><\/div><\/div>

Step<\/span> 2<\/span><\/div>\n
Do This Next<\/div>
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida dignissim porta. Etiam sollicitudin mattis erat, vitae volutpat risus dictum et. Praesent nisi dolor, suscipit sed enim non, tincidunt auctor ex. Phasellus tempus augue dolor, ut porta justo ultrices pellentesque. Nam ut ante vitae nisl mollis aliquam. Nullam nec dolor sapien. Vestibulum tempor sapien non pretium varius. Fusce vulputate nibh nec mauris pellentesque posuere.<\/p>\n<\/div><\/div><\/div><\/div>

Step<\/span> 3<\/span><\/div>\n
Do This Last<\/div>
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam gravida dignissim porta. Etiam sollicitudin mattis erat, vitae volutpat risus dictum et. Praesent nisi dolor, suscipit sed enim non, tincidunt auctor ex. Phasellus tempus augue dolor, ut porta justo ultrices pellentesque. Nam ut ante vitae nisl mollis aliquam. Nullam nec dolor sapien. Vestibulum tempor sapien non pretium varius. Fusce vulputate nibh nec mauris pellentesque posuere.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n

Stepgroup Attributes<\/h2>\n

The stepgroup<\/strong> shortcode has no attributes.<\/p>\n

Step Attributes<\/h2>\n\n\n\n\n\n
Name<\/th>\nPossible Values<\/th>\nRequired<\/th>\nNotes<\/th>\n<\/tr>\n<\/thead>\n
number<\/td>\na number<\/strong><\/td>\nYes<\/td>\nThe step number<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Code Samples<\/h2>\n
\r\n[stepgroup][step number="1"][drawer label="Do This First" open="true"]\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. \r\n\r\n[\/drawer][\/step][step number="2"][drawer label="Do This Next"]\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. \r\n\r\n[\/drawer][\/step][step number="3"][drawer label="Do This Last"]\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit. \r\n\r\n[\/drawer][\/step][\/stepgroup]\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
The shortcodes stepgroup and step can be used to display an ordered list of steps for users to follow. Use the number attribute for the step element to set the step number. Steps are displayed as special labels for drawers. We recommend getting familiar with how to add drawers to your website before reading this […]<\/p>\n","protected":false},"author":411,"featured_media":3554,"parent":3552,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-3606","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/users\/411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/comments?post=3606"}],"version-history":[{"count":4,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3606\/revisions"}],"predecessor-version":[{"id":3823,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3606\/revisions\/3823"}],"up":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/pages\/3552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media\/3554"}],"wp:attachment":[{"href":"https:\/\/www.montclair.edu\/university-communications\/wp-json\/wp\/v2\/media?parent=3606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}