{"id":87103,"date":"2019-01-30T22:35:24","date_gmt":"2019-01-30T22:35:24","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=87103"},"modified":"2019-02-21T18:19:31","modified_gmt":"2019-02-21T18:19:31","slug":"wordpress-plugin-sidebar-api-tutorial","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/","title":{"rendered":"WordPress Plugin Sidebar API Tutorial [w Video]"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">One of the cool things you can do with WordPress is create your own custom sidebars in the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"790\" src=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-1024x790.png\" alt=\"Screenshot of the WordPress block editor with a custom sidebar opened.\" class=\"wp-image-87104\" srcset=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-1024x790.png 1024w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-300x232.png 300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-768x593.png 768w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-2000x1544.png 2000w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-450x347.png 450w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-600x463.png 600w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-1500x1158.png 1500w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-1300x1003.png 1300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-400x309.png 400w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.42.52-AM-100x77.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>See the sidebar off to the side here?<br><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Check out the video below to get a solid overview of the Plugin Sidebar API and a walk through of how it all works, or keep reading if you prefer not to watch videos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Check out this video.  It is an introduction to the Plugin API Sidebar section of my <a href=\"https:\/\/javascriptforwp.com\/product\/advanced-gutenberg-development\/\">Advanced Gutenberg Development Course<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WordPress Block Editor Sidebars (w Plugin API &amp; JavaScript)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/QJAH05Drkzc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Keep reading if you would like to get a summary of the video in text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Plugin API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Adding custom sidebars involves using the <strong>Plugin API<\/strong> in WordPress, a slot \/ fill system that we can hook into with JavaScript and React.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can access the Plugin API via <code class=\"\" data-line=\"\">wp.plugins<\/code> and get access to a function called registerPlugin that will let us register our own plugin.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\nconst { registerPlugin } = wp.plugins;\n\nregisterPlugin(&quot;namespace-plugin-name&quot;, {\n  icon: &quot;dashicon&quot;, \/\/ Or custom SVG icon\n  render: CustomComponentToRender\n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">This will register our plugin.  Now we can look at setting up the Sidebar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Plugin API Sidebar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating a sidebar involves creating our own custom component that will wrap two important components:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&lt;PluginSidebarMoreMenuItem&gt;<\/li><li>&lt;PluginSidebar&gt;<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Both of these components can be found in <code class=\"\" data-line=\"\">wp.editPost<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;PluginSidebarMoreMenuItem&gt;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This component will fill the slot in the editor navigation menu where folks can see a list of plugin sidebars available.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"778\" src=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-1024x778.png\" alt=\"Screenshot showing the plugin sidebar menu\" class=\"wp-image-87108\" srcset=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-1024x778.png 1024w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-300x228.png 300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-768x584.png 768w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-2000x1520.png 2000w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-450x342.png 450w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-600x456.png 600w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-1500x1140.png 1500w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-1300x988.png 1300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-400x304.png 400w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.34-AM-1-100x76.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Where our component text will appear<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of what this will look like at the code level.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\n&lt;PluginSidebarMoreMenuItem target=&quot;namespace-plugin-name&quot;&gt;\n  {__(&quot;Plugin Sidebar Demo&quot;, &quot;languagenamespace&quot;)}\n&lt;\/PluginSidebarMoreMenuItem&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">This component has two important parts.  The first is the target.  I suggest using the name of your plugin for this, however, it does not need to match.  What it does need to match is the name attribute in our <code class=\"\" data-line=\"\">&lt;PluginSidebar&gt;<\/code> component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The other thing this component has is the name we want to appear in the menu.  The icon will show up automatically based on the icon we set for our plugin, so we do not have to add an icon to this component, only text.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;PluginSidebar&gt;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This component will fill the slot for the sidebar itself.  Whatever we place inside of <code class=\"\" data-line=\"\">&lt;PluginSidebar&gt;<\/code> will display in the sidebar once it is opened.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"799\" src=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-1024x799.png\" alt=\"\" class=\"wp-image-87110\" srcset=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-1024x799.png 1024w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-300x234.png 300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-768x600.png 768w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-2000x1561.png 2000w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-450x351.png 450w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-600x468.png 600w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-1500x1171.png 1500w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-1300x1015.png 1300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-400x312.png 400w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/Screen-Shot-2019-01-29-at-10.41.45-AM-100x78.png 100w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>The sidebar component with a header and panel row<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The component itself is pretty easy to setup.  Here is what it looks like:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; auto-links: false; gutter: true; title: ; notranslate\" title=\"\">\n&lt;PluginSidebar\n  name=&quot;namespace-plugin-name&quot;\n  title={__(&quot;Plugin Sidebar Demo&quot;, &quot;languagenamespace&quot;)}\n&gt;\n  &lt;PanelBody&gt;\n    &lt;PanelRow&gt;\n      {__(&quot;Plugin Sidebar Content&quot;, &quot;languagenamespace&quot;)}\n    &lt;\/PanelRow&gt;\n  &lt;\/PanelBody&gt;\n&lt;\/PluginSidebar&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">The most important part of this to point out is the <code class=\"\" data-line=\"\">&lt;PluginSidebar&gt;<\/code> name prop.  This needs to match the target from the <code class=\"\" data-line=\"\">&lt;PluginSidebarMoreMenuItem&gt;<\/code> target attribute.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example I make them both the same as the plugin name, which I think is easiest.  But really the do not have to be the same as the plugin name.  However, all of these have to be unique to your plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ll also mention that I like to use a <code class=\"\" data-line=\"\">&lt;PanelBody&gt;<\/code> and <code class=\"\" data-line=\"\">&lt;PanelRow&gt;<\/code> component inside of my sidebars, but this is not necessary.  However, the <code class=\"\" data-line=\"\">&lt;PluginSidebar&gt;<\/code> component does not provide any padding by default, so these components will give you a standard padding similar to core sidebars.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">All Together &#8211; Complete Example<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s take a look at a complete example using <code class=\"\" data-line=\"\">registerPlugin()<\/code>, <code class=\"\" data-line=\"\">&lt;PluginSidebarMoreMenuItem&gt;<\/code> and <code class=\"\" data-line=\"\">&lt;PluginSidebar&gt;<\/code> all together.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { registerPlugin } = wp.plugins;\nconst { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\nconst PluginSidebarDemo = () =&gt; (\n  &lt;Fragment&gt;\n    &lt;PluginSidebarMoreMenuItem target=&quot;namespace-plugin-name&quot;&gt;\n      {__(&quot;Plugin Sidebar Demo&quot;, &quot;namespace-plugin-name&quot;)}\n    &lt;\/PluginSidebarMoreMenuItem&gt;\n    &lt;PluginSidebar\n      name=&quot;namespace-plugin-name&quot;\n      title={__(&quot;Plugin Sidebar Demo&quot;, &quot;namespace-plugin-name&quot;)}\n    &gt;\n      &lt;PanelBody&gt;\n        &lt;PanelRow&gt;\n          {__(&quot;Plugin Sidebar Content&quot;, &quot;namespace-plugin-name&quot;)}\n        &lt;\/PanelRow&gt;\n      &lt;\/PanelBody&gt;\n    &lt;\/PluginSidebar&gt;\n  &lt;\/Fragment&gt;\n);\n\nregisterPlugin(&quot;namespace-plugin-name&quot;, {\n  icon: &quot;admin-plugins&quot;, \/\/ The Plugin Dashicon\n  render: PluginSidebarDemo\n});\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Enqueuing the JavaScript (and CSS)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You will need to enqueue your plugin JavaScript using the <code class=\"\" data-line=\"\">enqueue_block_editor_assets<\/code> hook in your PHP.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In my <a href=\"https:\/\/javascriptforwp.com\/product\/advanced-gutenberg-development\/\">Advanced Gutenberg Development Course<\/a> I go in depth into how to set all this up using Webpack and best standards.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But basically you just need some code <em>like<\/em> this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; auto-links: false; gutter: true; title: ; notranslate\" title=\"\">\nadd_action( &quot;enqueue_block_editor_assets&quot;, __NAMESPACE__ . &#039;\\plugin_assets&#039; );\n\/** \n * Enqueue block frontend JS &amp; CSS \n *\/\nfunction plugin_assets() {\n  $plugin_js_path = &quot;\/assets\/js\/plugins.editor.js&quot;;\n  $plugin_css_path = &quot;\/assets\/css\/plugins.editor.css&quot;;\n\n  wp_enqueue_script( \n    &#039;your-plugin-js&#039;,\n    _get_plugin_url() . $plugin_js_path,\n    &#x5B;&#039;wp-plugins&#039;, &#039;wp-edit-post&#039;, &#039;wp-element&#039;, &#039;wp-plugins&#039;, &#039;wp-i18n&#039;, &#039;wp-components&#039;],\n    filemtime( _get_plugin_directory() . $plugin_js_path ),\n    true\t\n  );\n  \n  wp_enqueue_style(\n    &#039;your-plugin-css&#039;,\n    _get_plugin_url() . $plugin_css_path,\n    &#x5B;],\n    filemtime( _get_plugin_directory() . $plugin_css_path )\n  );\n\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">This code won&#8217;t work if you just copy and paste it into your own site because it has a few helpful functions in action <code class=\"\" data-line=\"\">_get_plugin_url()<\/code> and <code class=\"\" data-line=\"\">_get_plugin_directory()<\/code>.  Here is their source code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; auto-links: false; gutter: true; title: ; notranslate\" title=\"\">\nfunction _get_plugin_directory() {\n  return __DIR__;\n}\n\nfunction _get_plugin_url() {\n  static $plugin_url;\n  if ( empty( $plugin_url ) ) {\n    $plugin_url = plugins_url( null, __FILE__ );\n  }\n  return $plugin_url;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">The important thing about the enqueueing code above is that you need to have a JavaScript and CSS file located at the following paths:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\/plugin-root\/assets\/js\/plugins.editor.js<\/li><li>\/plugin-root\/assets\/css\/plugins.editor.css<\/li><li><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If your code is being saved somewhere else then you will need to update your paths.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The other important thing about this code is the JS dependencies. You want to make sure that any path libraries you use in your code you also list as dependencies. This is ensures that everything is loaded, but more importantly that your code is loaded after these libraries are loaded on the page. Otherwise things may not work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to see me explain all the terms and walk through the code, check out the video below.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"WordPress Block Editor Sidebars (w Plugin API &amp; JavaScript)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/QJAH05Drkzc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Get the Course<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This video comes from my course&nbsp;<a href=\"https:\/\/javascriptforwp.com\/product\/advanced-gutenberg-development\/\">Advanced Gutenberg Development with&nbsp;WordPress<\/a>, which I highly recommend as it goes into more depth in working with the Sidebar and Plugin API.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the cool things you can do with WordPress is create your own custom sidebars in the editor. Check out the video below to get a solid overview of the Plugin Sidebar API and a walk through of how it all works, or keep reading if you prefer not to watch videos. Watch the [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":87119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[1,135],"tags":[],"class_list":["post-87103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-updates","category-free-videos"],"acf":[],"featured_image_urls":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-100x100.png",100,100,true]},"post_excerpt_stackable":"<p>One of the cool things you can do with WordPress is create your own custom sidebars in the editor. See the sidebar off to the side here? Check out the video below to get a solid overview of the Plugin Sidebar API and a walk through of how it all works, or keep reading if you prefer not to watch videos. Watch the Video Check out this video. It is an introduction to the Plugin API Sidebar section of my Advanced Gutenberg Development Course. Keep reading if you would like to get a summary of the video in text. The&hellip;<\/p>\n","category_list":"<a href=\"https:\/\/javascriptforwp.com\/category\/updates\/\" rel=\"category tag\">Course Updates<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"0 comments","featured_image_urls_v2":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3-100x100.png",100,100,true]},"post_excerpt_stackable_v2":"<p>One of the cool things you can do with WordPress is create your own custom sidebars in the editor. See the sidebar off to the side here? Check out the video below to get a solid overview of the Plugin Sidebar API and a walk through of how it all works, or keep reading if you prefer not to watch videos. Watch the Video Check out this video. It is an introduction to the Plugin API Sidebar section of my Advanced Gutenberg Development Course. Keep reading if you would like to get a summary of the video in text. The&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/javascriptforwp.com\/category\/updates\/\" rel=\"category tag\">Course Updates<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"0 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WordPress Plugin Sidebar API Tutorial [w Video] - JavaScript for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Plugin Sidebar API Tutorial [w Video] - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"One of the cool things you can do with WordPress is create your own custom sidebars in the editor. Check out the video below to get a solid overview of the Plugin Sidebar API and a walk through of how it all works, or keep reading if you prefer not to watch videos. Watch the [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-30T22:35:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-02-21T18:19:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zac Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/zgordon\" \/>\n<meta name=\"twitter:site\" content=\"@zgordon\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zac Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"WordPress Plugin Sidebar API Tutorial [w Video]\",\"datePublished\":\"2019-01-30T22:35:24+00:00\",\"dateModified\":\"2019-02-21T18:19:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/\"},\"wordCount\":768,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/The-WordPress-Data-API-3.png\",\"articleSection\":[\"Course Updates\",\"Free Videos\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/\",\"name\":\"WordPress Plugin Sidebar API Tutorial [w Video] - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/The-WordPress-Data-API-3.png\",\"datePublished\":\"2019-01-30T22:35:24+00:00\",\"dateModified\":\"2019-02-21T18:19:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/The-WordPress-Data-API-3.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/01\\\/The-WordPress-Data-API-3.png\",\"width\":1280,\"height\":720,\"caption\":\"The Plugin Sidebar API WordPress Graphic of sidebar\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/wordpress-plugin-sidebar-api-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Plugin Sidebar API Tutorial [w Video]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"name\":\"JavaScript for WordPress\",\"description\":\"Tutorials, Courses, Bootcamps and Conferences\",\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/javascriptforwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\",\"name\":\"JavaScript for WordPress Master Course\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"width\":200,\"height\":200,\"caption\":\"JavaScript for WordPress Master Course\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/zgordon\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\",\"name\":\"Zac Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"caption\":\"Zac Gordon\"},\"description\":\"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.\",\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/zgordon\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/zgordon\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Plugin Sidebar API Tutorial [w Video] - JavaScript for WordPress","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:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Plugin Sidebar API Tutorial [w Video] - JavaScript for WordPress","og_description":"One of the cool things you can do with WordPress is create your own custom sidebars in the editor. Check out the video below to get a solid overview of the Plugin Sidebar API and a walk through of how it all works, or keep reading if you prefer not to watch videos. Watch the [&hellip;]","og_url":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/","og_site_name":"JavaScript for WordPress","article_published_time":"2019-01-30T22:35:24+00:00","article_modified_time":"2019-02-21T18:19:31+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png","type":"image\/png"}],"author":"Zac Gordon","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/zgordon","twitter_site":"@zgordon","twitter_misc":{"Written by":"Zac Gordon","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"WordPress Plugin Sidebar API Tutorial [w Video]","datePublished":"2019-01-30T22:35:24+00:00","dateModified":"2019-02-21T18:19:31+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/"},"wordCount":768,"commentCount":0,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"image":{"@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png","articleSection":["Course Updates","Free Videos"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/","url":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/","name":"WordPress Plugin Sidebar API Tutorial [w Video] - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png","datePublished":"2019-01-30T22:35:24+00:00","dateModified":"2019-02-21T18:19:31+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#primaryimage","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/01\/The-WordPress-Data-API-3.png","width":1280,"height":720,"caption":"The Plugin Sidebar API WordPress Graphic of sidebar"},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/wordpress-plugin-sidebar-api-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Plugin Sidebar API Tutorial [w Video]"}]},{"@type":"WebSite","@id":"https:\/\/javascriptforwp.com\/#website","url":"https:\/\/javascriptforwp.com\/","name":"JavaScript for WordPress","description":"Tutorials, Courses, Bootcamps and Conferences","publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/javascriptforwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/javascriptforwp.com\/#organization","name":"JavaScript for WordPress Master Course","url":"https:\/\/javascriptforwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","width":200,"height":200,"caption":"JavaScript for WordPress Master Course"},"image":{"@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/zgordon"]},{"@type":"Person","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25","name":"Zac Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","caption":"Zac Gordon"},"description":"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.","sameAs":["https:\/\/twitter.com\/zgordon","https:\/\/x.com\/https:\/\/twitter.com\/zgordon"]}]}},"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/87103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/comments?post=87103"}],"version-history":[{"count":0,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/87103\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media\/87119"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=87103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=87103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=87103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}