{"id":1831,"date":"2019-02-21T11:00:11","date_gmt":"2019-02-21T16:00:11","guid":{"rendered":"https:\/\/www.bates.edu\/wordpress\/?page_id=1831"},"modified":"2025-07-14T13:42:17","modified_gmt":"2025-07-14T17:42:17","slug":"other-shortcodes","status":"publish","type":"page","link":"https:\/\/www.bates.edu\/wordpress\/wordpress-101\/other-shortcodes\/","title":{"rendered":"Other Shortcodes"},"content":{"rendered":"<div class=\"content-area\">\n<section class=\"highlight-box \"><em>Important Note<\/em>: When using shortcodes, there should <span style=\"text-decoration: underline;\">not<\/span> be a space after the first bracket and the element name. The spaces used in the examples below are for display purposes only.<\/p>\n<p>If you are copying and pasting any of the code below, make sure you <strong>delete<\/strong> the extra space after the first bracket. You also may want to\u00a0<em><a href=\"#glossary\">check out the glossary<\/a>\u00a0below.<\/em> <\/section>\n<hr \/>\n<h2 id=\"tabs\">Tabs<\/h2>\n<p>Displays a group of tabs which show and hide associated content. This shortcode has two parts, the <i>tab<\/i> and the <i>tab-area<\/i>. All of the tabs should be list elements (each shortcode should be a list point or &lt;li&gt; element).<\/p>\n<h5>Attributes for tab<\/h5>\n<ul class=\"nobefore\">\n<li><strong>for<\/strong> &#8211; A name which specifies which tab content area this tab controls.<\/li>\n<li><strong>text<\/strong> &#8211; The text which will be displayed on the tab.<\/li>\n<li><strong>initial<\/strong> &#8211; (optional) Use this if you want this tab to be already open when the page load. Obviously, you can only use this on one of the tabs.<\/li>\n<li><span class=\"pre\">[ tab for=&#8221;tab1&#8243; text=&#8221;2010&#8243;]<\/span><\/li>\n<li><span class=\"pre\">[ tab for=&#8221;tab2&#8243; text=&#8221;2011&#8243;]<\/span><\/li>\n<li><span class=\"pre\">[ tab for=&#8221;tab3&#8243; text=&#8221;2012&#8243; initial=&#8221;true&#8221;]<\/span><\/li>\n<li><span class=\"pre\">[ tab for=&#8221;tab4&#8243; text=&#8221;2013&#8243;]<\/span><\/li>\n<\/ul>\n<h5>Attributes for tab-area<\/h5>\n<p><strong>name<\/strong> &#8211; &#8211; The name used by the tab to know what content area to control.<\/p>\n<pre>[ tab-area name=\"tab1\"]Content in area one.[\/tab-area]\n[ tab-area name=\"tab2\"]Content in area two.[\/tab-area]\n[ tab-area name=\"tab3\"]Content in area three.[\/tab-area]\n[ tab-area name=\"tab4\"]Content in area four.[\/tab-area]<\/pre>\n<p>Putting the two examples above together yields:<\/p>\n<div class=\"example\">\n<ul class=\"nobefore\">\n<li><a class=\"bates_tab \" href=\"#\" data-bates_tab_name=\"tab1\">2010<\/a>\n<\/li>\n<li><a class=\"bates_tab \" href=\"#\" data-bates_tab_name=\"tab2\">2011<\/a>\n<\/li>\n<li><a class=\"bates_tab bates_tab_initial\" href=\"#\" data-bates_tab_name=\"tab3\">2012<\/a>\n<\/li>\n<li><a class=\"bates_tab \" href=\"#\" data-bates_tab_name=\"tab4\">2013<\/a>\n<\/li>\n<\/ul>\n<div class=\"bates_tab_area\" id=\"bates_tab_area-tab1\"><\/p>\n<p>Content in area one.<\/p>\n<p>Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia. <\/div>\n\n<div class=\"bates_tab_area\" id=\"bates_tab_area-tab2\"><\/p>\n<p>Content in area two.<\/p>\n<p>Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia. <\/div>\n\n<div class=\"bates_tab_area\" id=\"bates_tab_area-tab3\"><\/p>\n<p>Content in area three.<\/p>\n<p>Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia. <\/div>\n\n<div class=\"bates_tab_area\" id=\"bates_tab_area-tab4\"><\/p>\n<p>Content in area four.<\/p>\n<p>Quisque laoreet diam ut tellus porta, sed faucibus lorem tempor. Etiam sed lectus sagittis, dignissim nisi sed, porttitor ligula. Mauris vitae aliquet erat. Nam rhoncus sollicitudin mauris, sed feugiat libero sollicitudin quis. Integer vehicula interdum turpis quis imperdiet. Suspendisse iaculis tempus risus, aliquet porttitor sem tincidunt ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum orci eget dolor vulputate, non dapibus nunc lacinia. <\/div>\n\n<\/div>\n<hr \/>\n<h2 id=\"embed-iframe\">Embed a Website with an iframe<\/h2>\n<h5>Attributes<\/h5>\n<p><strong>url<\/strong> &#8211; The url to embed in the frame.<\/p>\n<p><strong>height<\/strong> &#8211; (optional) Height of the frame, defaults to 400px<\/p>\n<p><strong>width<\/strong> &#8211; (optional) Width of the frame, defaults to full width.<\/p>\n<p><strong>scrolling<\/strong> &#8211; (optional) Whether the frame should scroll. Allowed values are &#8220;yes&#8221;, &#8220;no&#8221;, and &#8220;auto&#8221;; defaults to no.<\/p>\n<pre>[ iframe url=\"https:\/\/www.bates.edu\/\" scrolling=\"yes\"]<\/pre>\n<div class=\"example\">\n<iframe style=\"width:100%;height:400px\" seamless frameborder=\"0\" scrolling=\"yes\" src=\"https:\/\/www.bates.edu\" class=\"\"><\/iframe>\n<\/div>\n<hr \/>\n<h2 id=\"glossary\">Glossary<\/h2>\n<h5>Attribute<\/h5>\n<p>Part of the shortcode which specifies that a certain name equals a certain value.<\/p>\n<pre>name=\"value\"<\/pre>\n<p>This is always found inside the first part of the shortcode, between the brackets.<\/p>\n<h5>Opening\/Closing Tag<\/h5>\n<p>Some shortcodes have a single element like<\/p>\n<pre>[example]<\/pre>\n<p>and some have a start and ending element like<\/p>\n<pre>[example] content [\/example]<\/pre>\n<p>The first element, the <span class=\"pre\">[example]<\/span>, is the opening tag, and the second one, the <span class=\"pre\">[\/example]<\/span> is the closing tag. Note the closing tag has a <span class=\"hilite\">\/<\/span>.<\/p>\n<h5>Content Area<\/h5>\n<p>In shortcodes with both an opening and closing tag, the space between the tags is the content area. Highlighted below:<\/p>\n<pre>[example name=\"value\"] <span class=\"hilite\">This is the content area.<\/span> [\/example]<\/pre>\n<hr \/><\/div>\n\n\n<style data-is=\"custom-styles\" class=\"wp-block-bates-page-specific-css-css\">@media (min-width:650px){\n.content-area { width:630px; }\n}\n\n.wpcontent-area ul.nobefore li {\n\tpadding-left:0;\n}\n.wpcontent-area ul.nobefore li:before {\n\tdisplay:none;\n}\npre {\nborder:1px solid #EEE;\nmargin:10px 0px 5px 0px\n}\nh5 { color:#981328; }\n\n.column { background-color:#cfd8dc; padding:10px; border:6px solid white; text-align:center;  }\n\n\n.sidebar #toc-list-the-title-bar,\n.sidebar #toc-list-bates-showhide-inline-element-definition,\n.sidebar #toc-list-bates-tab-area-tab1,\n.sidebar #toc-list-bates-tab-area-tab2,\n.sidebar #toc-list-bates-tab-area-tab3,\n.sidebar #toc-list-bates-tab-area-tab4,\n.sidebar #toc-list-bates-showhide-inline-element-cta-type,\n.sidebar #toc-list-bates-showhide-inline-element-cta-styles,\n.sidebar #toc-list-batesDirSearchResultsContainer,\n.sidebar #toc-list-attachment-51145,\n.sidebar #toc-list-ensembleEmbeddedContent-ehlPkjKlmEm91hwP5ZiWgA { display: none; }<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Tabs Displays a group of tabs which show and hide associated content.&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":1169,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_hide_ai_chatbot":false,"_ai_chatbot_style":"","associated_faculty":[],"_Page_Specific_Css":"","_bates_restrict_mod":false,"_batesModPostContentOverride_prepend":false,"_batesModPostContentOverride_append":false,"_batesModPostContentOverride_append_before_footer":false,"_dimp_site_id":"","_dimp_override_contact":false,"_table_of_contents_display":true,"_table_of_contents_location":"","_table_of_contents_disableSticky":false,"_is_featured":false,"footnotes":"","_bates_seo_meta_description":"","_bates_seo_block_robots":false,"_bates_seo_sharing_image_id":0,"_bates_seo_sharing_image_twitter_id":0,"_bates_seo_share_title":"","_bates_seo_canonical_overwrite":"","_bates_seo_twitter_template":""},"class_list":["post-1831","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=1831"}],"version-history":[{"count":8,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1831\/revisions"}],"predecessor-version":[{"id":3831,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1831\/revisions\/3831"}],"up":[{"embeddable":true,"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1169"}],"wp:attachment":[{"href":"https:\/\/www.bates.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=1831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}