{"id":254,"date":"2013-09-23T00:02:18","date_gmt":"2013-09-22T22:02:18","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=254"},"modified":"2014-09-07T12:17:24","modified_gmt":"2014-09-07T10:17:24","slug":"roots-101-notes-tips-and-more","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/roots-101-notes-tips-and-more\/","title":{"rendered":"Roots 101 &#8211; Notes, tips, and more"},"content":{"rendered":"<h3>1. The Theme Wrapper<\/h3>\n<p><a href=\"http:\/\/roots.io\/an-introduction-to-the-roots-theme-wrapper\/\">http:\/\/roots.io\/an-introduction-to-the-roots-theme-wrapper\/<\/a><\/p>\n<p>The goal of a theme wrapper\u00a0<a id=\"fn3\" href=\"http:\/\/roots.io\/an-introduction-to-the-roots-theme-wrapper\/#rf3\">[3]<\/a>\u00a0is to remove any repeated markup from individual templates and put it into a single file. This file,\u00a0<code>base.php<\/code>\u00a0becomes the single, unambiguous, authoritative representation of knowledge (i.e. the base format code).<\/p>\n<p>You never need to make calls to\u00a0<code>get_header()<\/code>,\u00a0<code>get_footer()<\/code>\u00a0or\u00a0<code>get_sidebar()<\/code>\u00a0again. You can also refactor the base format of your site by editing \u00a0<code>base.php<\/code>.<!--more--><\/p>\n<ul>\n<li>Step 1: WordPress figures out which template to use (see <a title=\"The WordPress Template Hierarchy\" href=\"https:\/\/hesmid.nl\/test\/web-development-2\/wordpress-web-development-2\/the-wordpress-template-hierarchy\/\">this post<\/a> about the template hierarchy)Once this template has been chosen, but before it&#8217;s loaded, WordPress runs the\u00a0<a href=\"http:\/\/codex.wordpress.org\/Plugin_API\/Filter_Reference\/template_include\"><code>template_include($template)<\/code><\/a>\u00a0filter (ed.\u00a0This filter hook can be used to override WordPress&#8217;s default template behavior).We use this filter to run our\u00a0<code>wrap<\/code>\u00a0function that saves the\u00a0<code>$main_template<\/code>\u00a0path and\u00a0<code>$base<\/code>\u00a0as static variables in our\u00a0<code>Roots_Wrapping<\/code>\u00a0class;The\u00a0<code>wrap<\/code>\u00a0function also checks to see if the\u00a0<code>$base<\/code>\u00a0is\u00a0<code>index<\/code>\u00a0(in which case we know to use the default\u00a0<code>base.php<\/code>) and finally returns a new instance of<code>Roots_Wrapping<\/code>.\n<p>Note by me:<\/p>\n<pre><code>add_filter('template_include', array('Roots_Wrapping', 'wrap'), 99);<\/code><\/pre>\n<p>What happens here is that a class (Roots_Wrapping) method (wrap) is passed as a callback function (99 is the priority). See also\u00a0<a style=\"line-height: 1.5;\" href=\"http:\/\/codex.wordpress.org\/Function_Reference\/add_filter\">Function Reference\/add filter<\/a><\/li>\n<\/ul>\n<ul>\n<li>Step 2: The theme wrapper selects which base to chooseDuring the construction of our new\u00a0<code>Roots_Wrapping<\/code>\u00a0instance, we set a variable for the\u00a0<code>$slug<\/code>\u00a0(which defaults to base) and create a new\u00a0<code>$templates<\/code>\u00a0array with the fallback template\u00a0<code>base.php<\/code>\u00a0as the first item.We then check to see if the\u00a0<code>$base<\/code>\u00a0exists (i.e. confirming we&#8217;re not starting on\u00a0<code>index.php<\/code>) and shift a more specific template to the front of the\u00a0<code>$templates\u00a0<\/code>array,\n<p>We then use the magic\u00a0<code>__toString()<\/code>\u00a0function to apply a filter to our final $templates array, before returning the full path to the most specific existing base template via the inbuilt WordPress function\u00a0<code>locate_template<\/code>.<\/li>\n<\/ul>\n<p>Step 3: The base-*.php file serves the content<\/p>\n<h3>Wrapping Things Up<\/h3>\n<p>Effectively we&#8217;ve started and ended with the standard WordPress Template Hierarchy, but grabbed the base format from the appropriate base file in between. The markup of our content is wrapped between our base markup, the cycle completes and the theme wrapper&#8217;s job is now done. In fact, because the theme wrapper starts and ends with the output from the standard Template Hierarchy, the vast majority of issues can be resolved just by looking through and understanding the Template Hierarchy Codex Page.<\/p>\n<p>&nbsp;<\/p>\n<figure class=\"thumbnail wp-caption alignnone\" style=\"width: 1110px\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/coderwall-assets-0.s3.amazonaws.com\/uploads\/picture\/file\/438\/theme-wrapper-explain.png\" alt=\"\" width=\"1100\" height=\"1266\" \/><figcaption class=\"caption wp-caption-text\">theme-wrapper-explain<\/figcaption><\/figure>\n<p><strong>TIPS and Q&amp;A<\/strong><\/p>\n<ul>\n<li><strong>Template-custom.php<\/strong><br \/>\nQ: All I want to do is have a page template that doesn&#8217;t wrap all the content in a div.container (so I can have full width sections) &#8211; I don&#8217;t even see a way to do this since all templates call base.php which has it coded in.<br \/>\nA: There is a template-custom.php file in Roots, which has no sidebar. If you add a base-template-custom.php file, it will use that over the default base.php file, so you can remove the .container divs.<br \/>\n.. Conditional tags are fine too. Which you use depends on how significant the markup change is and\/or how convoluted the logic is; with a new base file reserved for the more complex scenarios.<\/li>\n<li>A: Example. I want to have a template that has a custom scrolling feature for the content just on those pages. And with how base is set up it would be beneficial for me to adjust this page templates own base template.<br \/>\nHow could i alter this function so that if i use page-scrolling.php, it uses base-scrolling.php?<br \/>\nQ:\u00a0When using page-scrolling.php, it will automatically try to load base-page-scrolling.php. So you can either change your naming convention or use the roots_wrap_base filter to manually override the result, or the Roots Wrapper Override plugin if you don&#8217;t mind spending $10.<\/li>\n<\/ul>\n<h3><strong>2. Sidebar<\/strong><\/h3>\n<h4><strong>Two different sidebars:<\/strong><\/h4>\n<p>You&#8217;ll want to\u00a0<a href=\"http:\/\/register_sidebar\/\" rel=\"nofollow\">register a new sidebar<\/a>\u00a0in \/lib\/widgets.php. Then, to call it only on the home page, you can set up a new base file and replace the sidebar call, but if this is the only change you are making, you might want to just\u00a0<a rel=\"nofollow\">set up a conditional<\/a>\u00a0in your \/template\/sidebar.php to call the new sidebar only on the home page.<\/p>\n<p><a href=\"http:\/\/discourse.roots.io\/t\/tutorial-roots-theme-carve-job\/64\/8\">http:\/\/discourse.roots.io\/t\/tutorial-roots-theme-carve-job\/64\/8<\/a><\/p>\n<p>One thing I would say is Section D should take advantage of the Roots Bootstrap Walker and WordPress Menus. You just need to create a secondary navigation menu and change the classes when the menu is called:<\/p>\n<pre><code>&lt;?php\r\nif (has_nav_menu('secondary_navigation')) :\r\n  wp_nav_menu(array('theme_location' =&gt; 'secondary_navigation', 'menu_class' =&gt; 'nav nav-pills nav-stacked'));\r\nendif;\r\n?&gt;<\/code><\/pre>\n<p>Q:\u00a0Hi Foxaii, in which file do I put that Walker code to add those classes to my sidebar menus?<\/p>\n<p>A: Go to\u00a0<code>lib\/init.php<\/code>\u00a0and add the second menu:<\/p>\n<pre>register_nav_menus(array( 'primary_navigation' =&gt; __('Primary Navigation', 'roots'), 'secondary_navigation' =&gt; __('Secondary Navigation', 'roots'), ));<\/pre>\n<p>Then put the original code I posted in whatever template you want it. You can then choose which menu to display in the menus dash.<\/p>\n<h3>3. _main.js<\/h3>\n<h4>Page specific functions:<\/h4>\n<p>Notes\u00a0on DOM-based routing (<a href=\"http:\/\/goo.gl\/EUTi53\">http:\/\/goo.gl\/EUTi53<\/a> by Paul IrishOnly):<br \/>\n&#8211; Only fires on body classes that match. If a body class contains a dash,\u00a0* replace the dash with an underscore when adding it to the object below.<br \/>\n&#8211;\u00a0.noConflict()<br \/>\n<span style=\"line-height: 1.5;\">The routing is enclosed within an anonymous function so that you can \u00a0<\/span>always reference jQuery with $, even when in .noConflict() mode.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. The Theme Wrapper http:\/\/roots.io\/an-introduction-to-the-roots-theme-wrapper\/ The goal of a theme wrapper\u00a0[3]\u00a0is to remove any repeated markup from individual templates and put it into a single file. This file,\u00a0base.php\u00a0becomes the single, unambiguous, authoritative representation of knowledge (i.e. the base format code). You never need to make calls to\u00a0get_header(),\u00a0get_footer()\u00a0or\u00a0get_sidebar()\u00a0again. You can also refactor the base format of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/254"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=254"}],"version-history":[{"count":7,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/254\/revisions"}],"predecessor-version":[{"id":872,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/254\/revisions\/872"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}