How to Create a Sidebar Widget to Display a Call to Action (CTA) in WordPress

In this tutorial, we will walk through creating a custom Gutenberg block called the “Sidebar Design Block.” This block allows users to add a sidebar design with editable content, including a heading, text, image, and button with custom styling options. The block also supports changing background colors, padding, border radius, and text color. Additionally, we’ll incorporate font selection functionality to give users even more customization options.

Step 1: Setting Up the Plugin

We start by defining the plugin information at the top of the file. This includes the plugin name, description, version, and author.

/**
 * Plugin Name: Sidebar Design Block
 * Description: Adds a Gutenberg block with editable content for sidebar design.
 * Version: 1.9.1
 * Author: Kishores
 */

Next, we enqueue the necessary JavaScript to load the Gutenberg block editor assets.

function sidebar_design_block_enqueue_assets() {
    wp_register_script(
        'sidebar-design-block',
        '',
        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components'],
        null
    );

    // Localize script with theme customizer settings
    wp_localize_script('sidebar-design-block', 'sidebarDesignBlockSettings', [
        'buttonBackgroundColor' => get_theme_mod('button_background_color', '#BAFF96'),
        'buttonTextColor' => get_theme_mod('button_text_color', '#121212'),
    ]);

We define default settings, like button colors, using the WordPress customizer, and pass these settings into the block editor.

Step 2: Registering the Block

We use the registerBlockType function to register our block in the editor. This function defines various block attributes like heading text, button text, and background colors.

registerBlockType('custom/sidebar-design-block', {
    title: 'Sidebar Design Block',
    icon: 'layout',
    category: 'widgets',
    attributes: {
        heading: {
            type: 'string',
            source: 'html',
            selector: 'h2',
            default: 'Need Quality Design at Scale'
        },
        headingAlignment: {
            type: 'string',
            default: 'center'
        },
        headingFontSize: {
            type: 'number',
            default: 24
        },
        headingColor: {
            type: 'string',
            default: '' // Default to inherit theme color
        },
        // Additional attributes go here...
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const { heading, headingAlignment, headingFontSize, headingColor, content, contentAlignment, contentFontSize, contentColor, buttonText, buttonUrl, buttonBackgroundColor, buttonTextColor, imageUrl, paddingBottom, borderRadius, widgetBackgroundColor } = attributes;

        // Use localized settings passed from PHP
        const themeButtonBgColor = window.sidebarDesignBlockSettings.buttonBackgroundColor;
        const themeButtonTextColor = window.sidebarDesignBlockSettings.buttonTextColor;

In the edit function, we define how the block will appear in the editor. This includes:

RichText Components: For the heading and content, allowing users to edit them.
ColorPalette Components: To allow users to select text and background colors.
MediaUpload Component: For selecting an image.

Step 3: Adding Font Selection

To add font selection functionality, we will modify the block’s settings. We’ll introduce a Select Control to choose fonts, and we’ll update the block’s styles to reflect the selected font.

First, we need to create a font selection control in the block settings panel:

el(
    PanelBody,
    { title: 'Font Settings', initialOpen: false },
    el(
        'label',
        {},
        'Heading Font Family'
    ),
    el(
        SelectControl,
        {
            value: headingFontFamily,
            options: [
                { label: 'Arial', value: 'Arial, sans-serif' },
                { label: 'Georgia', value: 'Georgia, serif' },
                { label: 'Times New Roman', value: 'Times New Roman, serif' },
                { label: 'Courier New', value: 'Courier New, monospace' },
            ],
            onChange: (font) => setAttributes({ headingFontFamily: font }),
        }
    ),
    el(
        'label',
        {},
        'Content Font Family'
    ),
    el(
        SelectControl,
        {
            value: contentFontFamily,
            options: [
                { label: 'Arial', value: 'Arial, sans-serif' },
                { label: 'Georgia', value: 'Georgia, serif' },
                { label: 'Times New Roman', value: 'Times New Roman, serif' },
                { label: 'Courier New', value: 'Courier New, monospace' },
            ],
            onChange: (font) => setAttributes({ contentFontFamily: font }),
        }
    )
);

Next, we need to apply the selected font families to the heading and content text. Here’s how we can modify the inline styles:

style: {
    textAlign: headingAlignment,
    fontSize: headingFontSize + 'px',
    color: headingColor || 'inherit',
    fontFamily: headingFontFamily || 'Arial, sans-serif', // Apply selected font
}

And for the content:

style: {
    textAlign: contentAlignment,
    fontSize: contentFontSize + 'px',
    color: contentColor || 'inherit',
    fontFamily: contentFontFamily || 'Arial, sans-serif', // Apply selected font
}

Step 4: Rendering the Block on the Frontend

The save function is responsible for rendering the block content on the frontend of the website. Here we extract the block attributes and use them to generate the block’s HTML.

function render_sidebar_design_block($attributes) {
    // Extract attributes
    $attributes = wp_parse_args($attributes, [
        'heading' => 'Need Quality Design at Scale',
        'headingAlignment' => 'center',
        'headingFontSize' => 24,
        'headingColor' => '',
        'content' => 'We can help. Contact upnrunn!',
        'contentAlignment' => 'center',
        'contentFontSize' => 16,
        'contentColor' => '',
        'buttonText' => 'Book a call',
        'buttonUrl' => '#',
        'buttonBackgroundColor' => get_theme_mod('button_background_color', '#BAFF96'),
        'buttonTextColor' => get_theme_mod('button_text_color', '#121212'),
        'imageUrl' => 'https://dummyimage.com/300x150/cccccc/000000&text=Sidebar+Image',
        'paddingBottom' => 25,
        'borderRadius' => 8,
        'widgetBackgroundColor' => '',
    ]);

    // Generate the HTML content
    $html = '<div class="sidebar-widget" style="'
        . 'background-color: ' . esc_attr($attributes['widgetBackgroundColor'] ?: 'inherit') . '; '
        . 'padding-bottom: ' . esc_attr($attributes['paddingBottom']) . 'px; '
        . 'border-radius: ' . esc_attr($attributes['borderRadius']) . 'px; '
        . 'text-align: center; font-family: Arial, sans-serif; max-width: 300px; margin: 0 auto;">';
    // ... Continue generating HTML for image, heading, content, and button ...
}

Download

Final Thoughts

This block provides a flexible sidebar design that can be easily customized through the block editor. Users can adjust the heading, content, button styles, and even upload their own images. With the addition of font selection functionality, users have full control over the typography, making it a powerful tool for custom sidebar designs.