Tag: Genesis Blocks

Categories
Genesis Tutorials

Add Email Optin Form Block To Hero Header In Essence Pro

By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you’ll get :

  1. A custom reusable block you can import.
  2. And a file named blocks.php you can upload to display your reusable email optin block like this :

Note : The code in the blocks.php file shows you how to use a few lines of PHP code to display any block in any location in any theme.

Demo Video

Shows you how to integrate your MailChimp email form in the header hero section on the front page of the Essence Pro child theme by StudioPress.

Also provides the PHP code snippet which shows you how to display a block in any hook position using PHP code.

Installation Steps

There’s 2 steps once you’ve setup your email newsletter block using the Genesis Blocks plugin:

Note : This solution assumes you’re using MailChimp API keys in the Genesis Blocks > Settings > Newsletter Block settings.

You can access your reusable blocks page using these steps :

  1. # Find your MailChimp audience I.D and edit the newsletter-optin.json file with the 10 digit mailingList number. On your Reusable blocks page, import the newsletter-optin.json file. Once imported, edit the block to grab the post id from the address bar which you’ll need in step 2.

    2.  

  2. # Edit the file named blocks.php on line 66 replacing the 83 with the id for your reusable block as seen using the 1st red arrow in the screenshot in step 1. You can then upload the file to your Essence Pro themes blocks folder.

    3.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Replace The Image With Video In Monochrome Pro

This solution enables you to add a responsive video with cover text which overlays the video on all screen sizes.

In this case, we replace the background image with a video and custom text using a .json import and a few lines of custom CSS which produces what you see in the following screenshot :

Demo Video

Shows you how to follow the installation steps and replace the image background with a video with cover text.

Tested using the Monochrome Pro child theme by StudioPress however will work in any other Genesis child theme.

Installation Steps

This solution assumes you have setup your Monochrome Pro theme using the block editor and imported the demo content using the starter pack which includes setup your front page with a full width image background and overlaying text for the first section.

Go to your WordPress Dashboard > Genesis > Child Theme Setup to get started.

There’s 5 steps which you can view in the above demo video.:

  1. # Edit the front page and remove the default image background block which we’ll replace with a re-usable block for the video.

    2.  

  2. # Upload your video to your WordPress Media library and copy the link to the video. Using a code editor, swap out all instances of the video link with the link to your own self hosted video. There should be 2 instances of this video URL.

    3.  

  3. # Go to http://yourdomain/wp-admin/edit.php?post_type=wp_block and import the mp-video.json file as a re-usable block. Swap out your domain in the link to your own so it takes you to the reusable blocks page.

    4.  

  4. # Edit your front page and insert the re-usable block named Monochrome Pro Video Overlay

    5.  

  5. # Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

    6.  

Download Folder

That’s it! As seen in the demo video, you have replaced the section 1 image with a video background on your Monochrome Pro themes home page.

Categories
Genesis Tutorials

Change Post & Page Grid Class in Genesis Blocks

By default, Genesis Blocks wraps the featured image ( as seen in the following images ) in the gb-block-post-grid-image class when using the Genesis Post & Page Grid block.

If you want to remove this class and replace it with your own custom class ( in this example new-grid-image-class ), you can use PHP code in your child themes functions file or custom functions plugin which produces what you see in the image on the right :

These 2 images show the HTML output is exactly the same before adding the code, the only change being the name of the class.

Demo Video

Shows the default CSS class wrapping the Genesis Post & Page Grid removed and replaced with a new custom class.

Tested using the free Genesis Sample child theme by StudioPress using the free Genesis Blocks plugin. Also tested using the Genesis Blocks Pro plugin, free for StudioPress Pro Plus Package members.

Code Installation

There’s only 1 step :

Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions.php file or custom functions plugin.

Download Folder

Categories
Genesis Tutorials

Modify HTML Tags In Genesis Blocks

This code enables you to change the HTML tags ( opening & closing ) in the Genesis accordion block or any other Genesis or WordPress block.

In this case, we’ll change the HTML tags for the gb-accordion-text on the front end so the changes can be seen when inspecting the source code using inspect element like this :

In this example, we change both the opening & closing p tags to h3 tags.

Demo Video

Shows the accordion text list items wrapped in h3 tags

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme or any WordPress theme using Genesis Blocks.

Download Folder

Installation

There’s only 1 step :

Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions.php file or custom functions plugin.

Related Code Snippets

Categories
Genesis Tutorials

Custom Block To Select Individual Entries Unique On Each Single Post

The code in this download folder adds a custom block which enables you to select individual entries from posts, pages & custom post types displayed in any number of grid columns.

The above screenshot shows the block added on a single Edit Post screen which includes a drop down list of single posts you can select for inclusion in your grid. Watch the following demo video to learn more.

Demo Video

Shows a Selected Posts box added after the editor on the Edit Post screen enabling the user to select specific posts to display in a grid on specific single posts and pages.

Tested using the Genesis Sample child theme & the 2021 default theme for WordPress. Works in any WordPress theme.

Installation Steps

There’s 3 steps :

  1. # Upload the folder named selected-posts to your child themes blocks folder like this :

    2.  

  2. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file.

    3.  

  3. # Install ACF, in your Dashboard, go to Custom Fields > Tools and import the .json file.

    4.  

The code works with the Genesis Custom Blocks plugin and the Advanced Custom Fields ( ACF ) plugin by Elliot Condon.

Download Folder

Theme Specific Code

The block.php file contains code which works in any WordPress theme as well as code which only works in Genesis child themes ( by default, this code is commented out ). Only use 1 solution.

This is the demo video showing the custom block working in the Twenty twenty One default theme for WordPress.

Categories
Genesis Tutorials

Genesis Custom Block for Related Posts

The block files in this download folder enable you to create a custom block for related posts using WP_Query in Genesis child themes.

You can insert the related posts block anywhere in your editor before, after or within the content area of any single post type as seen in the following demo video.

Demo Video

Shows you how to create a custom block for related posts using the free version of the Genesis Custom Blocks plugin and custom code in your Genesis child theme.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps

  1. # Upload the folder named related-posts to your child themes blocks folder. If your child theme does not include a blocks folder, create one like this :

    2.  

  2. # Create a new custom block named Related Posts using the Genesis Custom Blocks plugin with the Genesis Blocks plugin as seen in the demo video.

    3.  

Download Folder

You can then insert the related posts block using the WordPress block editor.

Related Tutorials