{"id":625,"date":"2016-08-28T17:47:32","date_gmt":"2016-08-28T15:47:32","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=625"},"modified":"2017-10-01T09:09:57","modified_gmt":"2017-10-01T07:09:57","slug":"using-a-shortcode-in-a-template-together-with-beaver-tunnels-to-display-the-post-title","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/08\/28\/using-a-shortcode-in-a-template-together-with-beaver-tunnels-to-display-the-post-title\/","title":{"rendered":"Using a shortcode in a template together with Beaver Tunnels to display the post title"},"content":{"rendered":"<p><strong>The post you are looking at the moment has its title shown in a template\u00a0row, conditionally placed on single post pages only, using Beaver Tunnels. How did we accomplish this?<\/strong><!--more--><\/p>\n<p>First of all, you have to understand the basics of creating templates in Beaver Builder plugin. We started making the base of the template on the homepage and saved it several times for the various pages where we wanted to display the stored row. Go to the row settings and save the row. The templates will appear in the dashboard &#8216;under&#8217; Templates.<\/p>\n<div id=\"attachment_626\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-626\" class=\"wp-image-626 size-large\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/row-template-1024x321.jpg\" alt=\"row-template\" width=\"1024\" height=\"321\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/row-template-1024x321.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/row-template-300x94.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/row-template-768x241.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/row-template.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-626\" class=\"wp-caption-text\">Save the base row of the homepage for later use in Beaver Tunnels for conditional display<\/p><\/div>\n<div id=\"attachment_627\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-627\" class=\"wp-image-627 size-large\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/template-conditional-1024x437.jpg\" alt=\"template-conditional\" width=\"1024\" height=\"437\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/template-conditional-1024x437.jpg 1024w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/template-conditional-300x128.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/template-conditional-768x328.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/template-conditional.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><p id=\"caption-attachment-627\" class=\"wp-caption-text\">Our stored rows in Templates<\/p><\/div>\n<p>The conditional we use is fl_before_content, that means that the row will always be displayed just &#8216;under the menu&#8217; and (better explained) just before the page or post content begins.<\/p>\n<h3>Ultimate\u00a0Beaver<\/h3>\n<p>The row contains of two <a href=\"http:\/\/www.ultimatebeaver.com\/\" target=\"_blank\">Ultimate Beaver<\/a> elements:<\/p>\n<ul>\n<li>Photo Settings<\/li>\n<li>Info Box Settings<\/li>\n<\/ul>\n<p>The row base had been &#8216;extended&#8217; by the\u00a0<a href=\"http:\/\/www.ultimatebeaver.com\/modules\/row-separators\/\" target=\"_blank\">Ultimate Beaver Row Seperator<\/a>\u00a0to get the triangle effect at the bottom. The Info Box Settings has a title field, where we will use the shortcode page_title, defined in functions.php of the Beaver Builder childtheme.<\/p>\n<pre>function myshortcode_title( ) {\r\n return get_the_title($post_id);\r\n}\r\nadd_shortcode( 'page_title', 'myshortcode_title' );<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-629\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/info-box.jpg\" alt=\"info-box\" width=\"401\" height=\"324\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/info-box.jpg 700w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/info-box-300x242.jpg 300w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/>Now go to the Templates section in the dasboard and open the template (in our cases it is called &#8216;the posts&#8217;) in the pagebuilder to edit the heading fiels\u00a0in the Info Box. Insert there the shortcodes shown in the screenshot.<\/p>\n<p>The beaver_tunnels\u00a0<a href=\"https:\/\/beavertunnels.com\/docs\/\" target=\"_blank\">shortcode<\/a> is needed to isolate the custom post type ID of the template itself. Only then the code in functions.php will get the right postID to display the title. At the moment of writing this artile, we could not find another way to do this.<\/p>\n<h3>Beaver Tunnels<\/h3>\n<p>To let this work only one single posts, we need the &#8216;conditional controller&#8217; from <a href=\"https:\/\/beavertunnels.com\/\" target=\"_blank\">Beaver Tunnels<\/a> to get it done (at least in an easy interactive way of just setting some parameters).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-631 alignright\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-posts.jpg\" alt=\"tunnels-posts\" width=\"402\" height=\"302\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-posts.jpg 921w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-posts-300x226.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/08\/tunnels-posts-768x578.jpg 768w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/>Once done that, we had to remove the base title form the post which normally show above the content in any WordPress situation. At this moment, we just did that by adding the follwing CSS:<\/p>\n<pre>.fl-post-title {\r\n display: none;\r\n}<\/pre>\n<p>Does this influence SEO? We are not sure but, in the source &lt;title&gt;&#8230;.&lt;\/title&gt; showed the post title in a meta field, we will see if it has some negative effects, we might change this.<\/p>\n<h3>Result<\/h3>\n<p>Well, you are now looking at the final result, with the title in the\u00a0template row and the content just starting with the normal meta-data followed by the content.<\/p>","protected":false},"excerpt":{"rendered":"<p>The post you are looking at the moment has its title shown in a template row, conditionally placed on single post pages only, using Beaver Tunnels. How did we accomplish this?<\/p>","protected":false},"author":2,"featured_media":312,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[21,20,42,41,40,39],"class_list":["post-625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-review","tag-beaver-tunnels","tag-conditionals","tag-css","tag-functions-php","tag-shortcodes","tag-template"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":3,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/625\/revisions\/639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/312"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}