Create a Custom Call-to-Action Block in WordPress

Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. This tutorial is perfect for beginners wanting to learn each step of the process from setting up your environment to coding with React.

A Call-to-Action (CTA) is an essential tool in guiding users toward your desired action, be it signing up for a newsletter, registering for a webinar, or making a purchase. WordPress, with its Gutenberg Block Editor, allows for extensive customization, enabling you to craft a unique CTA that resonates with your audience. This tutorial will guide you through creating a custom CTA block using React, from setup to implementation.

Prerequisites

• A local WordPress environment.
• Node.js and npm installed.
• Basic knowledge of React and JavaScript.

Step 1: Environment Setup

First, ensure your local WordPress environment is ready. You should have a theme activated that supports the Block Editor. Install Node.js and npm if you haven’t already, as they’re essential for managing the project’s dependencies.

Step 2: Create a Plugin for Your Block

Your custom block will reside within a WordPress plugin.

1. Navigate to your WordPress plugins directory: wp-content/plugins.
2. Create a new directory for your plugin, e.g., my-custom-blocks.
3. Inside this directory, create a PHP file for the plugin, e.g., my-custom-blocks.php, and add the plugin header:

<?php
/*
Plugin Name: My Custom Blocks
Description: A plugin for custom Gutenberg blocks.
Version: 1.0
Author: Your Name
*/

Step 3: Scaffold Your Block

WordPress CLI (WP-CLI) provides an easy way to scaffold new blocks.

• Install WP-CLI following the instructions on their website.
• Run the following command in your plugin directory to create a new block:

wp scaffold block cta-block --title="Call to Action" --plugin=my-custom-blocks

This command generates the initial files for your block.

Step 4: Edit the Block’s JavaScript

Navigate to the generated src directory in your block’s folder. Open index.js and replace its content with:

const { registerBlockType } = wp.blocks;
const { RichText, URLInputButton } = wp.blockEditor;

registerBlockType('my-custom-blocks/cta-block', {
    title: 'Call to Action',
    icon: 'megaphone',
    category: 'layout',
    attributes: {
        title: { type: 'string' },
        content: { type: 'string' },
        url: { type: 'string' },
    },
    edit: ({ attributes, setAttributes }) => {
        return (
            <div>
                <RichText
                    tagName="h2"
                    placeholder="Your CTA Title"
                    value={attributes.title}
                    onChange={(title) => setAttributes({ title })}
                />
                <RichText
                    tagName="p"
                    placeholder="Your CTA Content"
                    value={attributes.content}
                    onChange={(content) => setAttributes({ content })}
                />
                <URLInputButton
                    url={attributes.url}
                    onChange={(url, post) => setAttributes({ url })}
                />
            </div>
        );
    },
    save: ({ attributes }) => {
        return (
            <div>
                <h2>{attributes.title}</h2>
                <p>{attributes.content}</p>
                <a href={attributes.url}>Click Here</a>
            </div>
        );
    },
});

Step 5: Enqueue Block Scripts

Back in your plugin’s PHP file, enqueue the block’s JavaScript file using the enqueue_block_editor_assets hook.

function my_custom_blocks_enqueue() {
    wp_enqueue_script(
        'my-custom-blocks-cta',
        plugins_url('/build/index.js', __FILE__),
        array('wp-blocks', 'wp-editor'),
        true
    );
}

add_action('enqueue_block_editor_assets', 'my_custom_blocks_enqueue');

Step 6: Build and Test Your Block

• Compile your JavaScript. If you’re using @wordpress/create-block, you can run npm start to build your block.
• Activate your plugin through the WordPress admin.
• Add a new post or page, and you should see your “Call to Action” block available in the Gutenberg editor.

Conclusion

Congratulations! You’ve successfully created a custom CTA block for the WordPress Gutenberg editor. This block can now be used across your website to drive user engagement and conversions. Custom blocks like these enhance the functionality of your site and can be tailored to fit your specific needs. Continue experimenting with different block configurations and React components to further customize your WordPress site.