{"id":339,"date":"2021-01-03T18:57:47","date_gmt":"2021-01-03T18:57:47","guid":{"rendered":"https:\/\/codeamp.com\/?p=339"},"modified":"2024-03-03T11:56:44","modified_gmt":"2024-03-03T11:56:44","slug":"creating-the-custom-layouts-plugin","status":"publish","type":"post","link":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/","title":{"rendered":"Creating the Custom Layouts plugin"},"content":{"rendered":"\n<p><em>For those interested &#8211; this is how and why this plugin came to be. If you&#8217;re looking for the docs &#8211; they&#8217;re being written &#8211; link coming soon.<\/em><\/p>\n\n\n\n<p>So I thought I&#8217;d write a post about a project I&#8217;ve been working on, a new plugin &#8211; <a href=\"https:\/\/wordpress.org\/plugins\/custom-layouts\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Layouts<\/a>.<\/p>\n\n\n\n<p>The plugin offers some familiar features that you&#8217;ve seen before, packaged in themes or available in a myriad of plugins free and paid for.. that is:<\/p>\n\n\n\n<p><strong>The ability to display posts or products, in a list or grid<\/strong><\/p>\n\n\n\n<p>So why did I decide to create the same thing that&#8217;s been done many times over before? Let&#8217;s cover a bit of background.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-background\">The Background<\/h2>\n\n\n\n<p>This plugin started as a feature idea for another plugin I develop (<a href=\"https:\/\/searchandfilter.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Search &amp; Filter<\/a>). That plugin allows you to create filters on the frontend of your site, so your users can find the content they are looking for.<\/p>\n\n\n\n<p>Since the early days of developing Search &amp; Filter, our users have been asking us how to customize the results\/layouts. Our approach has been to integrate with some of the excellent themes and plugins out there (and for developers, there are plenty of options built-in)&#8230; <\/p>\n\n\n\n<p>But we always found scenarios where our users couldn&#8217;t use a provided integration, or didn&#8217;t want to buy into a whole ecosystem to customize a layout, <em>or<\/em>, wanted to use a plugin that we didn&#8217;t yet provide an integration for.<\/p>\n\n\n\n<p>So it seems the best way to serve our users is to offer these features in some shape or form as a &#8220;catch-all&#8221;. An option for our users who couldn&#8217;t use the other offerings &#8211; or even eventually as a preferred option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"to-create-a-feature-or-a-new-plugin\">To create a feature or a new plugin?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"as-a-set-of-features\">As a set of features<\/h3>\n\n\n\n<p>Although this where the idea\/requirement came from, this option I preferred less. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Having this hidden as a sub-feature of another product is not doing all that functionality and time invested, justice.<\/li><li>It will add bloat (many people will not need it) to the Search &amp; Filter plugin<\/li><li>Limited exposure to the existing user base of the filter plugin<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"as-a-plugin\">As a plugin<\/h3>\n\n\n\n<p>This seemed to be the right direction.  If we&#8217;re going to build something well, with a decent set of features, then it makes sense to manage it on its own.<\/p>\n\n\n\n<p>Not only that, but it&#8217;s clear there is a huge market for these kinds of plugins. It can stand on its own and there would be plenty of people (I hope) wanting to use this standalone.<\/p>\n\n\n\n<p>We would then benefit from added traffic\/sales to Search &amp; Filter via users of this new plugin &#8211; bonus \ud83d\ude42<\/p>\n\n\n\n<p>And what about a premium version? For now, this doesn&#8217;t interest me.  The idea is not to be the most comprehensive offering on the market &#8211; or to cater to a niche (good reasons to put a price tag on).<\/p>\n\n\n\n<p>I like the idea of creating something and giving it away (and let&#8217;s be honest, this option still has it&#8217;s benefits) &#8211; I&#8217;ve personally gained so much from the WordPress ecosystem and I&#8217;ve given back here and there, but I think this could be a more substantial contribution.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"requirements\">Requirements<\/h2>\n\n\n\n<p>So what started out as a feature idea for a premium plugin, turned out to be a fully-fledged project of its own. With this came a new set of requirements and considerations:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Allow users to build highly customized layouts for lists\/grids of posts<\/li><li>Integrate seamlessly with our existing plugin Search &amp; Filter Pro<\/li><li>Be incredibly easy to use<\/li><li>Improve on the existing offerings (if we&#8217;re going to build something that&#8217;s been built many times before, we really should have some good reasons to do so &#8211; such as improving features\/ease of use is a good enough excuse for me)<\/li><li>Work well in as many installs\/environments as possible (as is the nature of building a plugin for the plugins repo)<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"improving-on-existing-solutions\">Improving on existing solutions<\/h2>\n\n\n\n<p>To be honest there are so many great options and there&#8217;s really nothing obvious that stands out.  However, I have identified one area I think is a common pain point for most existing solutions &#8211; <strong>a cluttered UI<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"problems-with-a-cluttered-ui\">Problems with a cluttered UI<\/h3>\n\n\n\n<p>In order to offer more features to the user, all solutions must provide more options (generally speaking)&#8230; In the era of page builders and WYSIWYG editors, current solutions are in general, fantastic. But many suffer from the same thing &#8211; adding hundreds (well maybe not that many) of customization options, in 1 sidebar\/panel (ala Gutenberg + Elementor plugins) or adding too many options to the block toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1024x614.png\" alt=\"\" class=\"wp-image-349\" srcset=\"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1024x614.png 1024w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-300x180.png 300w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-768x460.png 768w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-700x420.png 700w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image.png 1298w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Posts Block from the WP.com Editing Toolkit<br><em>Sorry Automattic &#8211; there&#8217;s actually nothing wrong with this&#8230; (yet<\/em>?)<\/figcaption><\/figure>\n\n\n\n<p>So there are two ways I think most offerings are going: add more features and clutter the UI, or limit features and improve the editing experience (by the way I&#8217;m not advocating that more options are always better, but in some use cases you really do want to offer more features but can&#8217;t).<\/p>\n\n\n\n<p>In the example above, I think we&#8217;re already reaching a critical point in terms of offering options to the user &#8211; there are certainly enough toolbar options, and while the sidebar has been carefully managed to not be too overwhelming, you can easily see that if we want to start adding individual options for things like the post title, author section &#8211; then it&#8217;s going to start affecting the user experience.<\/p>\n\n\n\n<p>Anyway, for this particular plugin, I&#8217;d rather not choose &#8211;  I want to offer more options and I want it to be easy to use (I&#8217;m demanding)&#8230; The good thing is, I think this problem has already been solved for us &#8211; in the page builders themselves! <\/p>\n\n\n\n<p>They are the best examples of increasing complexity + features whilst also improving the user experience.<\/p>\n\n\n\n<p>So why not bring the &#8220;page builder&#8221; paradigm one level deeper into this plugin?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"another-layer-of-abstraction\">Another layer of abstraction<\/h3>\n\n\n\n<p>In my opinion, there is a clear separation between the list\/grid layout and the design of each individual item\/result.<\/p>\n\n\n\n<p class=\"has-small-font-size\">* There has always been a clear separation of these two areas in WordPress itself and may be better known as &#8220;the loop&#8221; and &#8220;template part&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"585\" src=\"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1-1024x585.png\" alt=\"\" class=\"wp-image-352\" srcset=\"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1-1024x585.png 1024w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1-300x171.png 300w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1-768x439.png 768w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1-1536x877.png 1536w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1-700x400.png 700w, https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/image-1.png 1641w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Grid\/Layout Vs Post Template<\/figcaption><\/figure>\n\n\n\n<p>If we separate&nbsp;the two, we achieve 2 things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A higher degree of customizability with the individual item\/template<\/li><li>Simplify the process of adding a layout\/grid\/list and declutter this experience<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-solution-separate-the-layout-from-the-post-template\">The solution: separate&nbsp;the layout from the post template <\/h3>\n\n\n\n<p>That&#8217;s it &#8211; we should provide a visual page builder type solution to building layouts and templates, but, not together in the same widget\/block&#8230;<\/p>\n\n\n\n<p>Cue the Custom Layouts plugin \ud83d\ude42<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"implemenation-gutenberg\">Implemenation (+ Gutenberg)<\/h2>\n\n\n\n<p>So there could be a few approaches to create something like this while ticking off the requirements:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"using-the-block-editor-as-the-foundation\">Using the Block Editor as the foundation<\/h3>\n\n\n\n<p>I thought about the potential to use Blocks for the layout, and InnerBlocks for the post templates &#8211; I&#8217;m not 100% that this is the easiest way to do this for user experience &#8211; nor is the implementation (as far as I can tell) of InnerBlocks mature enough to build upon &#8211; I&#8217;d rather wait a little while (and learn a bit more)&#8230; <\/p>\n\n\n\n<p>This option also has the huge caveat of forcing the plugin to be available to Block Editor users only.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"building-a-custom-solution\">Building a custom solution<\/h3>\n\n\n\n<p>The way forward I felt is to create something that works well on its own (so it works for everyone) and then from there consider how to integrate that with the block editor for a better user experience\/workflow (it&#8217;s the future, by the way \ud83d\ude09 ).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-solution\">The solution:<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>Regular WordPress CPT&#8217;s are registered for layouts + templates<\/li><li>These CPTs will have custom React Apps for building layouts + templates using a drag and drop interface &#8211; we use 90% Gutenberg components for building the UI, so everything looks and feels like WordPress (and so it also works incredibly well)<\/li><li>Layouts are made available via shortcodes for any WP install so can be placed anywhere<\/li><li>After this, we tightly integrated our layouts + template editor with the Block Editor by adding a layout block, and linking that with the template editor via a modal, so you never have to leave the editing experience<\/li><\/ol>\n\n\n\n<p>* Block Editor users &#8211; one thing I would say, that while offering a modal for the template editor is a pretty cool experience (stops you from navigating away from the editor) &#8211; I&#8217;m not 100% sold on if that is the best way to achieve this &#8211; it&#8217;s a work in progress.<\/p>\n\n\n\n<p>** Also, all modals in the Block Editor are subject to some buggy behaviour  &#8211; <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/18755\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">the editor captures keyboard shortcuts<\/a> and makes changes to the document underneath. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"benefits\">Benefits<\/h3>\n\n\n\n<p>So, using this approach now means several things:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The layout + template editors are available to all WordPress users no matter your choice of editing experience.<\/li><li>It&#8217;s much easier to change what you want &#8211; clicking on the post title to bring up the post title options seems much more natural in the template editor rather than burying the options in a panel in a sidebar of a layout.<\/li><li>We get to (once again) overload the user with options ^^ &#8211; well, hopefully not, but we can offer more &#8220;sub-options&#8221; (ie options for the post title, featured image, etc) more easily now, and they are less confusing + easier to locate.<\/li><li>Layouts also become simpler to use &#8211; they consist of only a few settings, query-related, layout related, and choosing a post template &#8211; gone is the overhead of all those options cluttering the sidebar unless you choose to drill down into it.<\/li><li>Templates and layouts are re-usable &#8211; so you can update the template once and see changes reflected across the site.  If you are using the Block Editor, you can create a re-usable block for much the same effect.  I do see some cross over functionality here which I&#8217;m sure will be refined over time.<\/li><\/ol>\n\n\n\n<p>So there you have it, the making of, so to speak&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"after-thoughts\">After thoughts <\/h2>\n\n\n\n<p>This plugin has essentially been the product of 1.5 years of learning React + Gutenberg &#8211; and 4 months building this plugin.<\/p>\n\n\n\n<p>I have to say, working with Gutenberg and the Block Editor as a developer is a far superior experience to the old paradigm (the classic editor) &#8211; the learning curve is definitely greater, but once you get over the hump it seems the future is bright.<\/p>\n\n\n\n<p>I also love the fact that we don&#8217;t actually need to be using the Block Editor to use Gutenberg components &#8211; that means we can still build what we want and how we want it (providing we&#8217;re using React), whilst keeping the UI in tune with the rest of WordPress.<\/p>\n\n\n\n<p>Saying that, I have experienced some friction with using Gutenberg components in custom React apps &#8211; but I&#8217;m assuming that will reduce over time.<\/p>\n\n\n\n<p>And it look&#8217;s like there are already some developments coming with the <a data-type=\"URL\" data-id=\"https:\/\/g2-components.com\/components\/\" rel=\"noreferrer noopener\" href=\"https:\/\/g2-components.com\/components\/\" target=\"_blank\">g2 components <\/a>which may resolve some of these pain points &#8211; due to better standardization across components.<\/p>\n\n\n\n<p>Anyway, that&#8217;s it for this post &#8211; if you&#8217;ve made it down here, thanks for reading, and let me know your thoughts \ud83d\ude42<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/custom-layouts\" target=\"_blank\" rel=\"noreferrer noopener\">Get the Custom Layouts plugin from the plugins repo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>So I thought I\u2019d write a post about a project I\u2019ve been working on, a new plugin \u2013 Custom Layouts.  The plugin offers some familiar features that you\u2019ve seen before, packaged in themes or available in a myriad of plugins free and paid for.. that is:<\/p>\n<p>The ability to display posts or products, in a list or grid&#8230;<\/p>\n","protected":false},"author":2,"featured_media":351,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,11,7],"tags":[],"class_list":["post-339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg","category-plugins","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creating the Custom Layouts plugin - Code Amp<\/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:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating the Custom Layouts plugin - Code Amp\" \/>\n<meta property=\"og:description\" content=\"So I thought I\u2019d write a post about a project I\u2019ve been working on, a new plugin \u2013 Custom Layouts. The plugin offers some familiar features that you\u2019ve seen before, packaged in themes or available in a myriad of plugins free and paid for.. that is: The ability to display posts or products, in a list or grid...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Amp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-03T18:57:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-03T11:56:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/custom-layouts-demo-website-sml.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"730\" \/>\n\t<meta property=\"og:image:height\" content=\"414\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Ross Morsali\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rmors_\" \/>\n<meta name=\"twitter:site\" content=\"@code_amp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ross Morsali\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/\"},\"author\":{\"name\":\"Ross Morsali\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/#\\\/schema\\\/person\\\/f07e5a501a3e476f253174c4f8085e64\"},\"headline\":\"Creating the Custom Layouts plugin\",\"datePublished\":\"2021-01-03T18:57:47+00:00\",\"dateModified\":\"2024-03-03T11:56:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/\"},\"wordCount\":1865,\"publisher\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeamp.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/custom-layouts-demo-website-sml.gif\",\"articleSection\":[\"Gutenberg\",\"Plugins\",\"WordPress\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/\",\"url\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/\",\"name\":\"Creating the Custom Layouts plugin - Code Amp\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeamp.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/custom-layouts-demo-website-sml.gif\",\"datePublished\":\"2021-01-03T18:57:47+00:00\",\"dateModified\":\"2024-03-03T11:56:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeamp.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/custom-layouts-demo-website-sml.gif\",\"contentUrl\":\"https:\\\/\\\/codeamp.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/custom-layouts-demo-website-sml.gif\",\"width\":730,\"height\":414},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/creating-the-custom-layouts-plugin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeamp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating the Custom Layouts plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/#website\",\"url\":\"https:\\\/\\\/codeamp.com\\\/\",\"name\":\"Code Amp\",\"description\":\"Developing WordPress Plugins\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeamp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/#organization\",\"name\":\"Code Amp\",\"url\":\"https:\\\/\\\/codeamp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeamp.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/codeampsquare.png\",\"contentUrl\":\"https:\\\/\\\/codeamp.com\\\/wp-content\\\/uploads\\\/2021\\\/01\\\/codeampsquare.png\",\"width\":500,\"height\":500,\"caption\":\"Code Amp\"},\"image\":{\"@id\":\"https:\\\/\\\/codeamp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/code_amp\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeamp.com\\\/#\\\/schema\\\/person\\\/f07e5a501a3e476f253174c4f8085e64\",\"name\":\"Ross Morsali\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8ba742824818fce32d5defa1b1ec3c694de80a68850ebcf041561ea3eb5985f2?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8ba742824818fce32d5defa1b1ec3c694de80a68850ebcf041561ea3eb5985f2?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8ba742824818fce32d5defa1b1ec3c694de80a68850ebcf041561ea3eb5985f2?s=96&d=retro&r=g\",\"caption\":\"Ross Morsali\"},\"description\":\"Web developer by trade, with over 15 years building things in PHP, HTML, CSS, and JavaScript - focusing on WordPress for the last 7 years.\",\"sameAs\":[\"https:\\\/\\\/codeamp.com\",\"https:\\\/\\\/x.com\\\/rmors_\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating the Custom Layouts plugin - Code Amp","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:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/","og_locale":"en_GB","og_type":"article","og_title":"Creating the Custom Layouts plugin - Code Amp","og_description":"So I thought I\u2019d write a post about a project I\u2019ve been working on, a new plugin \u2013 Custom Layouts. The plugin offers some familiar features that you\u2019ve seen before, packaged in themes or available in a myriad of plugins free and paid for.. that is: The ability to display posts or products, in a list or grid...","og_url":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/","og_site_name":"Code Amp","article_published_time":"2021-01-03T18:57:47+00:00","article_modified_time":"2024-03-03T11:56:44+00:00","og_image":[{"width":730,"height":414,"url":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/custom-layouts-demo-website-sml.gif","type":"image\/gif"}],"author":"Ross Morsali","twitter_card":"summary_large_image","twitter_creator":"@rmors_","twitter_site":"@code_amp","twitter_misc":{"Written by":"Ross Morsali","Estimated reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#article","isPartOf":{"@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/"},"author":{"name":"Ross Morsali","@id":"https:\/\/codeamp.com\/#\/schema\/person\/f07e5a501a3e476f253174c4f8085e64"},"headline":"Creating the Custom Layouts plugin","datePublished":"2021-01-03T18:57:47+00:00","dateModified":"2024-03-03T11:56:44+00:00","mainEntityOfPage":{"@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/"},"wordCount":1865,"publisher":{"@id":"https:\/\/codeamp.com\/#organization"},"image":{"@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/custom-layouts-demo-website-sml.gif","articleSection":["Gutenberg","Plugins","WordPress"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/","url":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/","name":"Creating the Custom Layouts plugin - Code Amp","isPartOf":{"@id":"https:\/\/codeamp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#primaryimage"},"image":{"@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/custom-layouts-demo-website-sml.gif","datePublished":"2021-01-03T18:57:47+00:00","dateModified":"2024-03-03T11:56:44+00:00","breadcrumb":{"@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#primaryimage","url":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/custom-layouts-demo-website-sml.gif","contentUrl":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/custom-layouts-demo-website-sml.gif","width":730,"height":414},{"@type":"BreadcrumbList","@id":"https:\/\/codeamp.com\/creating-the-custom-layouts-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeamp.com\/"},{"@type":"ListItem","position":2,"name":"Creating the Custom Layouts plugin"}]},{"@type":"WebSite","@id":"https:\/\/codeamp.com\/#website","url":"https:\/\/codeamp.com\/","name":"Code Amp","description":"Developing WordPress Plugins","publisher":{"@id":"https:\/\/codeamp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeamp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/codeamp.com\/#organization","name":"Code Amp","url":"https:\/\/codeamp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/codeamp.com\/#\/schema\/logo\/image\/","url":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/codeampsquare.png","contentUrl":"https:\/\/codeamp.com\/wp-content\/uploads\/2021\/01\/codeampsquare.png","width":500,"height":500,"caption":"Code Amp"},"image":{"@id":"https:\/\/codeamp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/code_amp"]},{"@type":"Person","@id":"https:\/\/codeamp.com\/#\/schema\/person\/f07e5a501a3e476f253174c4f8085e64","name":"Ross Morsali","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/8ba742824818fce32d5defa1b1ec3c694de80a68850ebcf041561ea3eb5985f2?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8ba742824818fce32d5defa1b1ec3c694de80a68850ebcf041561ea3eb5985f2?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8ba742824818fce32d5defa1b1ec3c694de80a68850ebcf041561ea3eb5985f2?s=96&d=retro&r=g","caption":"Ross Morsali"},"description":"Web developer by trade, with over 15 years building things in PHP, HTML, CSS, and JavaScript - focusing on WordPress for the last 7 years.","sameAs":["https:\/\/codeamp.com","https:\/\/x.com\/rmors_"]}]}},"_links":{"self":[{"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/posts\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":0,"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/posts\/339\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/media\/351"}],"wp:attachment":[{"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/categories?post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeamp.com\/wp-json\/wp\/v2\/tags?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}