How to Create a Custom Genesis Block in WordPress
To create a custom Genesis block, you’ll need to create a custom block plugin. This plugin will register a new block in the WordPress block editor (Gutenberg) and define its settings, attributes, and rendering function. Here’s a step-by-step guide to creating a custom Genesis block:
Step 1: Set Up Your Plugin File Structure
Create a new folder for your custom block plugin in the WordPress plugins directory. Inside the folder, create the main plugin file (e.g., custom-genesis-block.php). This file will contain the plugin metadata and initialization code.
Step 2: Define the Plugin Metadata
Open custom-genesis-block.php and add the plugin metadata. At a minimum, it should include the plugin name, version, author, and description:
<?php
/*
Plugin Name: Custom Genesis Block
Version: 1.0
Author: Your Name
Description: A custom block for the Genesis Framework.
*/
Step 3: Enqueue the Block Assets
In the same custom-genesis-block.php file, enqueue the necessary JavaScript and CSS files for your custom block:
<?php
function custom_genesis_block_enqueue_assets() {
// Enqueue the block's JavaScript file
wp_enqueue_script(
'custom-genesis-block',
plugin_dir_url(__FILE__) . 'js/custom-genesis-block.js',
array('wp-blocks', 'wp-element')
);
// Enqueue the block's CSS file
wp_enqueue_style(
'custom-genesis-block-style',
plugin_dir_url(__FILE__) . 'css/custom-genesis-block.css'
);
}
add_action('enqueue_block_editor_assets', 'custom_genesis_block_enqueue_assets');
Step 4: Create Block JavaScript and CSS Files
Inside your plugin folder, create a js and css directory. In the js directory, create a file named custom-genesis-block.js. In this file, define your block settings, attributes, and rendering function:
(function (blocks, element) {
var el = element.createElement;
blocks.registerBlockType('custom-genesis-block/custom-block', {
title: 'Custom Genesis Block',
icon: 'smiley', // Replace with a relevant Dashicon or custom SVG icon
category: 'genesis', // Categorize the block under 'Genesis' category
attributes: {
// Define your block attributes here
},
edit: function (props) {
// Block edit mode UI
return el('div', { className: 'custom-genesis-block-edit' },
'Custom Genesis Block Edit Mode'
);
},
save: function (props) {
// Block output on the frontend
return el('div', { className: 'custom-genesis-block-save' },
'Custom Genesis Block Save Mode'
);
},
});
})(
window.wp.blocks,
window.wp.element
);
In the css directory, create a file named custom-genesis-block.css to style your block:
/* Add your custom block styles here */
.custom-genesis-block-edit {
/* Styles for the block in the editor */
}
.custom-genesis-block-save {
/* Styles for the block on the frontend */
}
Step 5: Register the Block
Finally, in the custom-genesis-block.php file, register the block using the register_block_type function:
<?php
function custom_genesis_block_register_block() {
register_block_type(
'custom-genesis-block/custom-block',
array(
'editor_script' => 'custom-genesis-block',
'editor_style' => 'custom-genesis-block-style',
)
);
}
add_action('init', 'custom_genesis_block_register_block');
Now, your custom Genesis block is registered, and you can find it in the block editor under the “Genesis” category. Customize the block’s JavaScript and CSS to suit your specific needs, and you can extend its functionality further if required.