• 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 » Tutorial

Tutorial

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

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