• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Genesis
    • WooCommerce
    • WordPress
  • Premium
  • Blog
  • About
    • Tools I Use
  • Contact
  • Login
Home » How to use Genesis Custom Blocks

How to use Genesis Custom Blocks

2020-10-15 by Gabor Leave a Comment

WP Engine released the Genesis Custom Blocks plugin, that’s going to be replace the famous Advanced Custom Fields plugin. Best for all, that it works not only with Genesis Themes, but will also you can use with any WordPress theme that supports Gutenberg Block Editor.

1) Install and activate Genesis Custom Blocks plugin

2) Create some custom fields

genesis-custom-blocks settings

3) Create a folder in your theme named blocks and a template file with block-{slug}.php

genesis-custom-blocks template file

Just copy and paste the following snippet in your template file

4) Let’s go ahead and add your just created block with Gutenberg wherever You want

add genesis-custom-block with gutenberg

5) Now You can edit each content field from the block editor

6) The content is going to be shown in the front end

7) After I added some styling to the content, it will be look like this

This is an SCSS code, so need to compile it to make it work.

genesis-custom-blocks cta

Now you have nothing to do but drag and drop the widget wherever You want to be shown up this nice looking CTA section.

Filed Under: Free Content, Tutorial, WordPress Tagged With: custom fields

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Snippets

Force full-width layout on specific single page in Genesis

Universal Parallax in Genesis

Change Genesis Search Widget’s Placeholder Text

Change breadcrumbs home text in Genesis

Remove sidebar from cart and checkout page in Genesis WooCommerce

Custom single post template for specific category in Genesis

Custom Post Type Pagination in Genesis

Echo something conditionally on the single page of specific Custom Post Type Taxonomy

Split Menu Around the Logo in Genesis Sample

How to remove ‘Menu’ text in Genesis mobile navigation

How to force hamburger menu on desktop in Genesis

Add Three Column Layout to Genesis Front Page and Two Column for Other Pages

Remove “You are here” from Genesis breadcrumb

How to add SVG logo to Genesis

Genesis translations

Add page title with featured image in Genesis

Hide header when scrolling down, show it when scrolling up in Genesis

Genesis Loop with Pagination

Full-width hero image on category / tag / taxonomy archive pages in Genesis

How to add Page Title Background with ACF

1

Primary Sidebar

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
WP Rocket - WordPress Caching Plugin
UpdraftPlus Premium

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy
  • Flames Design
© 2021 WP Flames - All Right Reserved