{"id":303,"date":"2014-05-24T06:32:06","date_gmt":"2014-05-24T11:32:06","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=303"},"modified":"2014-05-24T06:32:06","modified_gmt":"2014-05-24T11:32:06","slug":"table-of-contents","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/","title":{"rendered":"Table Of Contents"},"content":{"rendered":"<div  class=\"x-toc left\" ><h4 class=\"h-toc\">Table of Contents<\/h4><ul class=\"unstyled cf\"> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/ title=\"Go to 1. Introduction\">1. Introduction<\/a><\/li> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/2\/ title=\"Go to 2. More Information\">2. More Information<\/a><\/li> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/3\/ title=\"Go to 3. Even More Information\">3. Even More Information<\/a><\/li> <\/ul><\/div>\n<p>The Table of Contents shortcode available in X offers up some incredible SEO benefits to your standard posts and pages. It&#8217;s easy enough to paginate individual posts or pages in WordPress using the <code>&lt;!--nextpage--&gt;<\/code> code in the editor, but it doesn&#8217;t provide any real engaging way for your visitors to know what they&#8217;re in for as they click through to the next post. That&#8217;s where the Table of Contents shortcode comes in.<\/p>\n<p>Simply add this to each of your &#8220;pages&#8221; after your <code>&lt;!--nextpage--&gt;<\/code> breaks and input the titles of each section in your article. What you&#8217;re left with is a thoroughly engaging, easy to navigate post structure that has been proven to increase visitor retention and keep their attention (all things Google loves).<\/p>\n<p>You can easily add the Table of Contents shortcode to the left or right of your post content, or have it go full width, which is great for placing at the bottom of your posts to remind visitors of what sections are left. Click through on the table of contents shortcode above to go through to the next page and see the shortcode in action!<\/p>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[toc title=\"Table of Contents\" type=\"left\"] [toc_item title=\"1. Introduction\" page=\"1\"] [toc_item title=\"2. More Information\" page=\"2\"] [toc_item title=\"3. Even More Information\" page=\"3\"] [\/toc]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Table of Contents Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: enter a title for the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>type<\/strong>: &#8220;left,&#8221; &#8220;right,&#8221; or &#8220;block.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>columns<\/strong>: if &#8220;block&#8221; is selected for the type attribute, choose between 1, 2, and 3 columns for your table of contents items.<\/li>\n<\/ul>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Table of Contents Item Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: enter in the title you would like for your link.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>page<\/strong>: enter in the page number the link should go to (i.e. &#8220;1,&#8221; &#8220;2,&#8221; 3,&#8221; et cetera).<\/li>\n<\/ul>\n<p><!--nextpage--><\/p>\n<div  class=\"x-toc left\" ><h4 class=\"h-toc\">Table of Contents<\/h4><ul class=\"unstyled cf\"> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/ title=\"Go to 1. Introduction\">1. Introduction<\/a><\/li> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/2\/ title=\"Go to 2. More Information\">2. More Information<\/a><\/li> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/3\/ title=\"Go to 3. Even More Information\">3. Even More Information<\/a><\/li> <\/ul><\/div>\n<p>Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.<\/p>\n<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.<\/p>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[toc title=\"Table of Contents\" type=\"left\"] [toc_item title=\"1. Introduction\" page=\"1\"] [toc_item title=\"2. More Information\" page=\"2\"] [toc_item title=\"3. Even More Information\" page=\"3\"] [\/toc]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Table of Contents Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: enter a title for the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>type<\/strong>: &#8220;left,&#8221; &#8220;right,&#8221; or &#8220;block.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>columns<\/strong>: if &#8220;block&#8221; is selected for the type attribute, choose between 1, 2, and 3 columns for your table of contents items.<\/li>\n<\/ul>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Table of Contents Item Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: enter in the title you would like for your link.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>page<\/strong>: enter in the page number the link should go to (i.e. &#8220;1,&#8221; &#8220;2,&#8221; 3,&#8221; et cetera).<\/li>\n<\/ul>\n<p><!--nextpage--><\/p>\n<div  class=\"x-toc left\" ><h4 class=\"h-toc\">Table of Contents<\/h4><ul class=\"unstyled cf\"> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/ title=\"Go to 1. Introduction\">1. Introduction<\/a><\/li> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/2\/ title=\"Go to 2. More Information\">2. More Information<\/a><\/li> <li  class=\"x-toc-item\" ><a href=https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/3\/ title=\"Go to 3. Even More Information\">3. Even More Information<\/a><\/li> <\/ul><\/div>\n<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<\/p>\n<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.<\/p>\n<p>Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur.<\/p>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[toc title=\"Table of Contents\" type=\"left\"] [toc_item title=\"1. Introduction\" page=\"1\"] [toc_item title=\"2. More Information\" page=\"2\"] [toc_item title=\"3. Even More Information\" page=\"3\"] [\/toc]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Table of Contents Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: enter a title for the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>type<\/strong>: &#8220;left,&#8221; &#8220;right,&#8221; or &#8220;block.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>columns<\/strong>: if &#8220;block&#8221; is selected for the type attribute, choose between 1, 2, and 3 columns for your table of contents items.<\/li>\n<\/ul>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Table of Contents Item Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: enter in the title you would like for your link.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>page<\/strong>: enter in the page number the link should go to (i.e. &#8220;1,&#8221; &#8220;2,&#8221; 3,&#8221; et cetera).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Table of Contents shortcode available in X offers up some incredible SEO benefits to your standard posts and pages. It&#8217;s easy enough to paginate individual posts or pages in WordPress using the &lt;!&#8211;nextpage&#8211;&gt; code in the editor, but it doesn&#8217;t provide any real engaging way for your visitors to know what they&#8217;re in for as they click through to &#8230; <a href=\"https:\/\/demo.theme.co\/renew-1\/shortcodes\/table-of-contents\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/303"}],"collection":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":0,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/303\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/media?parent=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}