{"id":1099,"date":"2016-08-20T14:27:27","date_gmt":"2016-08-20T05:27:27","guid":{"rendered":"https:\/\/n8finch2024.local\/?p=1099"},"modified":"2019-06-30T07:02:20","modified_gmt":"2019-06-29T22:02:20","slug":"adding-angular-markup-genesis-child-theme","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/adding-angular-markup-genesis-child-theme\/","title":{"rendered":"Adding Angular Markup to a Genesis Child Theme (Part 1)"},"content":{"rendered":"<p><em>This is the second\u00a0post in a three part series on using Genesis and Angular. Part 2 can be read <a href=\"\/using-angular-display-content-genesis-using-wp-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a>, and Part 3 can be read <a href=\"\/genesis-and-angular-adding-routing-to-posts-and-pages\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a>.\u00a0<\/em><\/p>\n<p>This month is <strong>&#8220;<a href=\"\/angular-learning-resources\/\">Angular August<\/a>&#8220;<\/strong>, and so I&#8217;ve been focusing on learning Angular (1, not 2\u00a0yet&#8230; but soon!).\u00a0I&#8217;ve set myself several tasks\u00a0learning angular, one of which is developing a starter Genesis child theme using Angular and Gulp (since I&#8217;ve been wanting to check out and use Gulp more too&#8230; I still love you, Grunt). Here\u00a0is what I&#8217;m trying to do with this project:<\/p>\n<p><strong>Primary objective:\u00a0<\/strong>Create a view area that will display all the contents of posts and pages without a page reload using\u00a0Genesis and Angular.<\/p>\n<p>Do this by:<\/p>\n<ol>\n<li>Adding markup to my Genesis child theme<\/li>\n<li>Fetching data with the WP REST API and Angular<\/li>\n<li>Routing the data with Angular on posts and pages<\/li>\n<\/ol>\n<p>If you&#8217;ve used Angular, you know you need to specify <code>ng-app<\/code>\u00a0and <code>ng-view<\/code>\u00a0in your html markup so that your Angular app will run.\u00a0This is easy to do with a starter theme like _&#8217;s, but if you&#8217;re building on top of a framework like Genesis, you need to use the available <code>hooks and filters<\/code>\u00a0to manage your markup.<\/p>\n<p>I&#8217;m a part of the community at WP Developer Club and <a href=\"https:\/\/knowthecode.io\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>KnowtheCode.io<\/strong><\/a>, and Tonya does a great job walking through the <code>markup.php<\/code>\u00a0file and structure in Genesis. Check it out and join up if you&#8217;re thirsty for knowledge!<\/p>\n<p>So, here&#8217;s how I finally landed on the markup I needed to be able to add\u00a0the basic Angular directives to my Genesis Markup&#8230;<\/p>\n<p>(<strong>Note:\u00a0<\/strong>Unless otherwise noted, all PHP goes in the <code>function.php<\/code>\u00a0file and all JavaScript has been enqueued from a <code>main.js<\/code> file)<\/p>\n<p><!--more--><\/p>\n<h2>Adding Directives and\u00a0Properties with Values to Attributes<\/h2>\n<p>With Angular, there are several directives you need to place in your HTML for an app to work, or in this case, for a Genesis child theme to assume an app-like state. This include:<\/p>\n<ul>\n<li><code>ng-app<\/code><\/li>\n<li><code>ng-repeat<\/code><\/li>\n<li><code>ng-model<\/code><\/li>\n<li><code>ng-whatever<\/code>&#8230;&#8230;.<\/li>\n<\/ul>\n<p>No big deal if you&#8217;re working with straight HTML or a custom theme, but for frameworks, you need to filter the markup already included and running in your parent theme. In this particular case,\u00a0I need\u00a0to\u00a0be able to add this like <code>ng-app<\/code>, <code>ng-controller<\/code>, <code>ng-view<\/code>, etc. to things like <code>&lt;head&gt;<\/code>, <code>&lt;main&gt;<\/code>, or any other element already provided by Genesis.<\/p>\n<p>Let&#8217;s start with the easy stuff&#8230; adding <code>ng-app<\/code>\u00a0to our project.<\/p>\n<p>In many Angular tutorials (and maybe even the documentation), you will find that you&#8217;re typically adding Angualr to the <code>&lt;html&gt;<\/code>\u00a0tag, as in <code>&lt;html ng-app = &quot;myApp&quot;&gt;<\/code>. This increases the scope of the Angular app to the entire HTML document. This great, but since I only need it on the front end (for now!), I&#8217;m just going to add it to the <code>&lt;body&gt;<\/code>\u00a0tag:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/08\/Adding-ng-app-to-body-tag.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-1104\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/h_483,w_905\/v1561845740\/Adding-ng-app-to-body-tag_nlwlth.png\" alt=\"Adding ng-app to body tag\" width=\"1024\" height=\"547\" \/><\/a><\/p>\n<p>In order to filter and add these directives (or any property), we&#8217;re going to use the provided filter <code>genesis_attr_body<\/code>. Actually, if you&#8217;re using <a href=\"https:\/\/raveren.github.io\/kint\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Kint<\/strong><\/a>, you can check and see all the functions firing on that filter\u00a0this:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">add_action( 'genesis_loop', __NAMESPACE__ . 'check_body_class_filters'  );\r\n\r\nfunction check_body_class_filters() {\r\n   global $wp_filter;\r\n   d($wp_filter&#x5B;'genesis_attr_body']);\r\n}<\/pre>\n<p>If you&#8217;re running the Genesis Sample child theme, you&#8217;ll probably get a result like this:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/08\/All_The_Things______Nate_s_repository_for_work__recipes__life__the_Kingdom__etc___.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-1106\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/h_212,w_905\/v1561845737\/All_The_Things______Nate_s_repository_for_work__recipes__life__the_Kingdom__etc____ymrqo4.png\" alt=\"getting the filters for the body\" width=\"1024\" height=\"240\" \/><\/a><\/p>\n<p>Great! So, we just need to use a simple filter to add on our directive, like this:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">add_filter( 'genesis_attr_body', __NAMESPACE__ . 'add_ng_app_to_body' );\r\n\r\nfunction add_ng_app_to_body( $attributes ) {\r\n   \r\n   $attributes&#x5B;'ng-app'] = 'myApp';\r\n   \r\n   return $attributes;\r\n}<\/pre>\n<p>And BOOM! <code>ng-app<\/code>\u00a0is now in our body tag:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/08\/ng-App-is-now-in-our-body-tag.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-1109\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/h_396,w_905\/v1561845735\/ng-App-is-now-in-our-body-tag_pym6iv.png\" alt=\"ng-App is now in our body tag\" width=\"1024\" height=\"448\" \/><\/a><\/p>\n<p>Excellent! You can use the same technique to add controllers like <code>ng-controller<\/code>, <code>ng-repeat<\/code>, etc. where you need.<\/p>\n<p>This means we can and should now add a view&#8230; But how??&#8230;<\/p>\n<h2>Adding Directives with No Values (i.e. ng-view)<\/h2>\n<p>The process is very similar, except that we want to add only <code>ng-view<\/code>\u00a0with\u00a0no value, instead of what we just did. The result we&#8217;re looking for is something like <code>&lt;div ng-view&gt;<\/code>, not <code>&lt;div ng-view=&quot;myView&quot;&gt;<\/code>. So, how do we accomplish this?<\/p>\n<p>At first, I thought, &#8220;Just do the same thing as before, but instead run: <code>$attributes[&#039;ng-app&#039;] = &#039;&#039; or null<\/code>. However, this does not return as part of the array, and you don&#8217;t get anything in there.<\/p>\n<p>Instead, we need to use the <code>genesis_attr_{context}_output<\/code> filter. This returns a string of the <em><strong>output\u00a0<\/strong><\/em>which we can then filter and return. In my case, I want to filter the <code>&lt;main class=&quot;content&quot;&gt;\u00a0<\/code>element string. So, I did this to concatenate on the string:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">\/\/*Add the ng-view to the &lt;main class=&quot;content&quot; element\r\nadd_filter( 'genesis_attr_content_output', 'add_ng_view_to_content', 99, 3 );\r\n\r\nfunction add_ng_view_to_content( $output ) {\r\n$output .= ' ng-view';\r\nreturn $output;\r\n}<\/pre>\n<p>After adding this filter, we get the output we need to add the view to this HTML element:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/08\/adding-ng-view-to-the-main-element.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-1112\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/h_343,w_905\/v1561845732\/adding-ng-view-to-the-main-element_y7eskh.png\" alt=\"adding ng-view to the main element\" width=\"1024\" height=\"389\" \/><\/a><\/p>\n<p>Awesome! Moving right along.<\/p>\n<p>You might be wondering, &#8220;Why are we adding <code>ng-view<\/code>\u00a0to the <code>&lt;main&gt;<\/code>\u00a0tag??&#8221; Great questions! For now,\u00a0I want\u00a0the <code>&lt;main&gt;<\/code>\u00a0element to be the part that changes when rendering pages and posts. Genesis will use this element tag no matter the layout (full-width, content-sidebar, sidebar-content, etc.), so I want this to be the element that is updated by Angular.<\/p>\n<h2>Does it work??<\/h2>\n<p>Let&#8217;s find out&#8230;<\/p>\n<p>If you haven&#8217;t already, jump over and check out Josh Pollock&#8217;s article on Torque Mag: <a href=\"https:\/\/torquemag.io\/2016\/02\/basics-of-angularjs-with-the-wordpress-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Basics of AngularJS with the WordPress REST API<\/a>.<\/p>\n<p>Thinking along the lines of Josh&#8217;s code, how can we get this to work? Simple. First we want to remove\u00a0default loop from Genesis (on all pages, for the sake of this example, quick and dirty). Then, we want to output some basic HTML with a <code>controller<\/code>\u00a0and some bindings to test. This is all pretty easy to do:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">\/\/*Remove Standard Genesis Loop\r\nremove_action('genesis_loop', 'genesis_do_loop');\r\n\r\n\/\/*Add a controller in the Angular view to work with\r\nadd_action('genesis_loop', __NAMESPACE__ . 'do_ng_view_content');\r\nfunction do_ng_view_content() {\r\n$output = '&lt;div ng-controller=&quot;example&quot;&gt;\r\n&lt;form&gt;\r\n&lt;input type=&quot;text&quot; ng-model=&quot;post.placeholder&quot; \/&gt;\r\n&lt;\/form&gt;\r\n&lt;div&gt;{{post.placeholder}}&lt;\/div&gt;\r\n&lt;\/div&gt;';\r\necho $output;\r\n}<\/pre>\n<p>Next, we want to make sure we&#8217;ve got the Angualar app up and running in an enqueued JavaScript file, like so:<\/p>\n<pre class=\"brush: jscript; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">'use-strict';\r\n\r\nangular.module('myApp', &#x5B;])\r\n.controller('example', &#x5B;'$scope', function ($scope) {\r\n$scope.post = {\r\nplaceholder: 'Enter Text'\r\n};\r\n}]);<\/pre>\n<h2>The result?:<\/h2>\n<p><a href=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845703\/Angular-app-in-Genesis1_ztgdx0.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-1115\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845703\/Angular-app-in-Genesis1_ztgdx0.gif\" alt=\"Angular app in Genesis1\" width=\"836\" height=\"162\" \/><\/a><\/p>\n<p>So, you can see we have our app, controller, and the bindings are updating. This is exactly what we want!<\/p>\n<p>I&#8217;ll be using the WP REST API to dynamically update posts and pages when clicked and share that in\u00a0another post. For now, this should get you (and me!) started:-).<\/p>\n<p>&nbsp;<\/p>\n<p>Check out this series of videos <strong><a href=\"https:\/\/knowthecode.io\/labs\/developers-guide-customizing-genesis-markup\" target=\"_blank\" rel=\"noopener noreferrer\">Markup and Wraps in Genesis<\/a><\/strong>\u00a0from Tonya at KnowtheCode.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the second\u00a0post in a three part series on using Genesis and Angular. Part 2 can be read here, and Part 3 can be read here.\u00a0 This month is &#8220;Angular August&#8220;, and so I&#8217;ve been focusing on learning Angular (1, not 2\u00a0yet&#8230; but soon!).\u00a0I&#8217;ve set myself several tasks\u00a0learning angular, one of which is developing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[23,1,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Angular Markup to a Genesis Child Theme (Part 1) | Nate Finch<\/title>\n<meta name=\"description\" content=\"Here&#039;s how to add Angular Markup to a Genesis Child Theme. It&#039;s not as hard as you think, and you&#039;ll even learn about hooks and filters!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Angular Markup to a Genesis Child Theme (Part 1) | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"Here&#039;s how to add Angular Markup to a Genesis Child Theme. It&#039;s not as hard as you think, and you&#039;ll even learn about hooks and filters!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-20T05:27:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-29T22:02:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Genesis-and-Angular_ygyahh.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"Adding Angular Markup to a Genesis Child Theme (Part 1)\",\"datePublished\":\"2016-08-20T05:27:27+00:00\",\"dateModified\":\"2019-06-29T22:02:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\"},\"wordCount\":1130,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"articleSection\":[\"Angular\",\"Blog\",\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\",\"url\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\",\"name\":\"Adding Angular Markup to a Genesis Child Theme (Part 1) | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"datePublished\":\"2016-08-20T05:27:27+00:00\",\"dateModified\":\"2019-06-29T22:02:20+00:00\",\"description\":\"Here's how to add Angular Markup to a Genesis Child Theme. It's not as hard as you think, and you'll even learn about hooks and filters!\",\"breadcrumb\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Angular Markup to a Genesis Child Theme (Part 1)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Angular Markup to a Genesis Child Theme (Part 1) | Nate Finch","description":"Here's how to add Angular Markup to a Genesis Child Theme. It's not as hard as you think, and you'll even learn about hooks and filters!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/","og_locale":"en_US","og_type":"article","og_title":"Adding Angular Markup to a Genesis Child Theme (Part 1) | Nate Finch","og_description":"Here's how to add Angular Markup to a Genesis Child Theme. It's not as hard as you think, and you'll even learn about hooks and filters!","og_url":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/","og_site_name":"Nate Finch","article_published_time":"2016-08-20T05:27:27+00:00","article_modified_time":"2019-06-29T22:02:20+00:00","og_image":[{"width":900,"height":500,"url":"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Genesis-and-Angular_ygyahh.jpg","type":"image\/jpeg"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/#article","isPartOf":{"@id":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"Adding Angular Markup to a Genesis Child Theme (Part 1)","datePublished":"2016-08-20T05:27:27+00:00","dateModified":"2019-06-29T22:02:20+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/"},"wordCount":1130,"commentCount":3,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"articleSection":["Angular","Blog","Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/","url":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/","name":"Adding Angular Markup to a Genesis Child Theme (Part 1) | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"datePublished":"2016-08-20T05:27:27+00:00","dateModified":"2019-06-29T22:02:20+00:00","description":"Here's how to add Angular Markup to a Genesis Child Theme. It's not as hard as you think, and you'll even learn about hooks and filters!","breadcrumb":{"@id":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8finch-site.site.strattic.io\/adding-angular-markup-genesis-child-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"Adding Angular Markup to a Genesis Child Theme (Part 1)"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1099"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=1099"}],"version-history":[{"count":23,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1099\/revisions"}],"predecessor-version":[{"id":1845,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1099\/revisions\/1845"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/1118"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=1099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=1099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=1099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}