Skip to content

Instantly share code, notes, and snippets.

@jeffikus
Created January 28, 2022 19:26
Show Gist options
  • Save jeffikus/a40f7434594a3591f3ac610ce86efc5a to your computer and use it in GitHub Desktop.
Save jeffikus/a40f7434594a3591f3ac610ce86efc5a to your computer and use it in GitHub Desktop.
3columnexample.wordpress.com Homepage Template
<!-- wp:group {"align":"full","style":{"border":{"width":"px"}},"layout":{"inherit":false}} -->
<div class="wp-block-group alignfull" style="border-width:px"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"25%","style":{"spacing":{"padding":{"top":"1em","right":"1em","bottom":"1em","left":"1em"}}}} -->
<div class="wp-block-column" style="padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em;flex-basis:25%"><!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><!-- wp:image {"align":"center","id":68,"width":75,"height":75,"sizeSlug":"thumbnail","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-thumbnail is-resized"><img src="https://dotcomfsepatterns.files.wordpress.com/2021/03/pattern-woman.jpg?w=150" alt="" class="wp-image-68" width="75" height="75"/></figure></div>
<!-- /wp:image -->
<!-- wp:site-title {"textAlign":"center","style":{"typography":{"lineHeight":"1"}}} /-->
<!-- wp:site-tagline {"textAlign":"center","style":{"color":{"text":"#929292"},"typography":{"lineHeight":"1"}},"fontSize":"small"} /-->
<!-- wp:navigation {"ref":25,"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} /--></div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"level":4} -->
<h4 id="recent-posts">Recent Posts</h4>
<!-- /wp:heading -->
<!-- wp:latest-posts /-->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:heading {"level":4} -->
<h4 id="categories">Categories</h4>
<!-- /wp:heading -->
<!-- wp:categories {"showPostCounts":true} /--></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"top":"1em","right":"1em","bottom":"1em","left":"1em"}}}} -->
<div class="wp-block-column" style="padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em;flex-basis:50%"><!-- wp:query {"queryId":10,"query":{"perPage":"2","pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list","columns":2},"align":"wide","className":"is-style-default"} -->
<div class="wp-block-query alignwide is-style-default"><!-- wp:post-template -->
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"className":"vertical-query-pattern","layout":{"inherit":false}} -->
<div class="wp-block-group vertical-query-pattern" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-featured-image {"className":"mb-0"} /-->
<!-- wp:cover {"overlayColor":"tertiary","minHeight":360,"isDark":false,"style":{"spacing":{"margin":{"top":"0"},"padding":{"top":"30px","right":"40px","bottom":"20px","left":"40px"}}}} -->
<div class="wp-block-cover is-light" style="margin-top:0;padding-top:30px;padding-right:40px;padding-bottom:20px;padding-left:40px;min-height:360px"><span aria-hidden="true" class="has-tertiary-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:post-title {"isLink":true,"linkTarget":"_blank","textColor":"primary"} /-->
<!-- wp:post-excerpt {"textColor":"primary","fontSize":"small"} /--></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"25%","style":{"spacing":{"padding":{"top":"1em","right":"1em","bottom":"1em","left":"1em"}}}} -->
<div class="wp-block-column" style="padding-top:1em;padding-right:1em;padding-bottom:1em;padding-left:1em;flex-basis:25%"><!-- wp:search {"label":"Search","buttonText":"Search","className":"is-style-small-search"} /-->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:calendar /-->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"facebook.com/wordpress","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://twitter.com/wordpressdotcom","service":"twitter"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":"64px"} -->
<div style="height:64px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
@Nostravinci
Copy link

Please forgive my ignorance on this—where do I place/insert the above code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment