{"id":13475,"date":"2024-04-03T10:26:02","date_gmt":"2024-04-03T17:26:02","guid":{"rendered":"https:\/\/wordherd.io\/?p=13475"},"modified":"2026-07-02T11:37:53","modified_gmt":"2026-07-02T15:37:53","slug":"create-a-custom-call-to-action-block-in-wordpress","status":"publish","type":"post","link":"https:\/\/wordherd.io\/fr\/blog\/create-a-custom-call-to-action-block-in-wordpress\/","title":{"rendered":"Cr\u00e9er un bloc d\u2019action personnalis\u00e9 dans WordPress"},"content":{"rendered":"<p class=\"intro wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"kt-adv-heading13475_a67711-27 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13475_a67711-27\"><strong>Prerequisites<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A local WordPress environment.<\/li>\n\n\n\n<li>Node.js and npm installed.<\/li>\n\n\n\n<li>Basic knowledge of React and JavaScript.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Environment Setup<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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&#8217;t already, as they&#8217;re essential for managing the project&#8217;s dependencies.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Create a Plugin for Your Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Your custom block will reside within a WordPress plugin.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to your WordPress plugins directory: <code>wp-content\/plugins<\/code>.<\/li>\n\n\n\n<li>Create a new directory for your plugin, e.g., <code>my-custom-blocks<\/code>.<\/li>\n\n\n\n<li>Inside this directory, create a PHP file for the plugin, e.g., <code>my-custom-blocks.php<\/code>, and add the plugin header:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;?php\n\/*\nPlugin Name: My Custom Blocks\nDescription: A plugin for custom Gutenberg blocks.\nVersion: 1.0\nAuthor: Your Name\n*\/<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">&lt;?<\/span><span style=\"color: #D8DEE9FF\">php<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">\/*<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">Plugin Name: My Custom Blocks<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">Description: A plugin for custom Gutenberg blocks.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">Version: 1.0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">Author: Your Name<\/span><\/span>\n<span class=\"line\"><span style=\"color: #616E88\">*\/<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Scaffold Your Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress CLI (WP-CLI) provides an easy way to scaffold new blocks.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install WP-CLI following the instructions on their website.<\/li>\n\n\n\n<li>Run the following command in your plugin directory to create a new block:<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>wp scaffold block cta-block --title=\"Call to Action\" --plugin=my-custom-blocks<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">wp<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">scaffold<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">block<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">cta-block<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">--title=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Call to Action<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">--plugin=my-custom-blocks<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This command generates the initial files for your block.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Edit the Block&#8217;s JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Navigate to the generated <code>src<\/code> directory in your block&#8217;s folder. Open <code>index.js<\/code> and replace its content with:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const { registerBlockType } = wp.blocks;\nconst { RichText, URLInputButton } = wp.blockEditor;\n\nregisterBlockType('my-custom-blocks\/cta-block', {\n    title: 'Call to Action',\n    icon: 'megaphone',\n    category: 'layout',\n    attributes: {\n        title: { type: 'string' },\n        content: { type: 'string' },\n        url: { type: 'string' },\n    },\n    edit: ({ attributes, setAttributes }) => {\n        return (\n            &lt;div>\n                &lt;RichText\n                    tagName=\"h2\"\n                    placeholder=\"Your CTA Title\"\n                    value={attributes.title}\n                    onChange={(title) => setAttributes({ title })}\n                \/>\n                &lt;RichText\n                    tagName=\"p\"\n                    placeholder=\"Your CTA Content\"\n                    value={attributes.content}\n                    onChange={(content) => setAttributes({ content })}\n                \/>\n                &lt;URLInputButton\n                    url={attributes.url}\n                    onChange={(url, post) => setAttributes({ url })}\n                \/>\n            &lt;\/div>\n        );\n    },\n    save: ({ attributes }) => {\n        return (\n            &lt;div>\n                &lt;h2>{attributes.title}&lt;\/h2>\n                &lt;p>{attributes.content}&lt;\/p>\n                &lt;a href={attributes.url}>Click Here&lt;\/a>\n            &lt;\/div>\n        );\n    },\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">registerBlockType<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wp<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">blocks<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">const<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">RichText<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">URLInputButton<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">wp<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">blockEditor<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">registerBlockType<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">my-custom-blocks\/cta-block<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">title<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">Call to Action<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">icon<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">megaphone<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">category<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">layout<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">attributes<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">title<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">type<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">string<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">content<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">type<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">string<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">type<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">string<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">edit<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">({<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">setAttributes<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">})<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">RichText<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">tagName<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">h2<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">placeholder<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Your CTA Title<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">onChange<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">setAttributes<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">RichText<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">tagName<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">p<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">placeholder<\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Your CTA Content<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">value<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">onChange<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">setAttributes<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;<\/span><span style=\"color: #8FBCBB\">URLInputButton<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">url<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                    <\/span><span style=\"color: #8FBCBB\">onChange<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">post<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">setAttributes<\/span><span style=\"color: #D8DEE9FF\">(<\/span><span style=\"color: #ECEFF4\">{<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">save<\/span><span style=\"color: #ECEFF4\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">({<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">})<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=&gt;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;h2&gt;{<\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">title<\/span><span style=\"color: #81A1C1\">}&lt;\/h2&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;p&gt;{<\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">content<\/span><span style=\"color: #81A1C1\">}&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #81A1C1\">&lt;a<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">href<\/span><span style=\"color: #81A1C1\">={<\/span><span style=\"color: #D8DEE9\">attributes<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">url<\/span><span style=\"color: #81A1C1\">}&gt;<\/span><span style=\"color: #D8DEE9FF\">Click Here<\/span><span style=\"color: #81A1C1\">&lt;\/a&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">},<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><span style=\"color: #D8DEE9FF\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Enqueue Block Scripts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Back in your plugin&#8217;s PHP file, enqueue the block&#8217;s JavaScript file using the <code>enqueue_block_editor_assets<\/code> hook.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>function my_custom_blocks_enqueue() {\n    wp_enqueue_script(\n        'my-custom-blocks-cta',\n        plugins_url('\/build\/index.js', __FILE__),\n        array('wp-blocks', 'wp-editor'),\n        true\n    );\n}\n\nadd_action('enqueue_block_editor_assets', 'my_custom_blocks_enqueue');<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">my_custom_blocks_enqueue<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #88C0D0\">wp_enqueue_script<\/span><span style=\"color: #ECEFF4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">        <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">my-custom-blocks-cta<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">        plugins_url<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">\/build\/index.js<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #81A1C1\">__FILE__<\/span><span style=\"color: #ECEFF4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">        <\/span><span style=\"color: #81A1C1\">array<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">wp-blocks<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">wp-editor<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">        <\/span><span style=\"color: #81A1C1\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">    <\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">add_action<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">enqueue_block_editor_assets<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #88C0D0\"> <\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #A3BE8C\">my_custom_blocks_enqueue<\/span><span style=\"color: #ECEFF4\">&#39;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Build and Test Your Block<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Compile your JavaScript. If you&#8217;re using <code>@wordpress\/create-block<\/code>, you can run <code>npm start<\/code> to build your block.<\/li>\n\n\n\n<li>Activate your plugin through the WordPress admin.<\/li>\n\n\n\n<li>Add a new post or page, and you should see your &#8220;Call to Action&#8221; block available in the Gutenberg editor.<\/li>\n<\/ul>\n\n\n\n<p class=\"kt-adv-heading13475_1cece2-37 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading13475_1cece2-37\"><strong>Conclusion<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Congratulations! You&#8217;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.<\/p>","protected":false},"excerpt":{"rendered":"<p>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, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":14324,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"builders":[673],"industry":[],"platform":[],"class_list":["post-13475","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","builders-gutenberg"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a Custom Call-to-Action Block in WordPress - WordHerd WordPress Migration<\/title>\n<meta name=\"description\" content=\"Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. Perfect for beginners, this tutorial covers everything from setting up your environment to coding with React. Elevate your website&#039;s user experience and engagement with a personalized CTA block today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wordherd.io\/fr\/blog\/create-a-custom-call-to-action-block-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Custom Call-to-Action Block in WordPress - WordHerd WordPress Migration\" \/>\n<meta property=\"og:description\" content=\"Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. Perfect for beginners, this tutorial covers everything from setting up your environment to coding with React. Elevate your website&#039;s user experience and engagement with a personalized CTA block today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wordherd.io\/fr\/blog\/create-a-custom-call-to-action-block-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WordHerd WordPress Migration\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/wordherdio\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-03T17:26:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-02T15:37:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wordherd.io\/wp-content\/uploads\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1477\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"WordHerd\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wordherdio\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"WordHerd\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/\"},\"author\":{\"name\":\"WordHerd\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/person\\\/373419b97c0fbc45a3a16462bdba0fac\"},\"headline\":\"Create a Custom Call-to-Action Block in WordPress\",\"datePublished\":\"2024-04-03T17:26:02+00:00\",\"dateModified\":\"2026-07-02T15:37:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/\"},\"wordCount\":420,\"publisher\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/\",\"name\":\"Create a Custom Call-to-Action Block in WordPress - WordHerd WordPress Migration\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg\",\"datePublished\":\"2024-04-03T17:26:02+00:00\",\"dateModified\":\"2026-07-02T15:37:53+00:00\",\"description\":\"Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. Perfect for beginners, this tutorial covers everything from setting up your environment to coding with React. Elevate your website's user experience and engagement with a personalized CTA block today.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg\",\"contentUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg\",\"width\":2560,\"height\":1477,\"caption\":\"illustration of website elements for web design stockpack adobe stock scaled 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/blog\\\/create-a-custom-call-to-action-block-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wordherd.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Custom Call-to-Action Block in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#website\",\"url\":\"https:\\\/\\\/wordherd.io\\\/\",\"name\":\"WordHerd WordPress Migration\",\"description\":\"Website Migration Services\",\"publisher\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wordherd.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#organization\",\"name\":\"WordHerd WordPress Migration\",\"url\":\"https:\\\/\\\/wordherd.io\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-trademark.png\",\"contentUrl\":\"https:\\\/\\\/wordherd.io\\\/wp-content\\\/uploads\\\/wordherd-trademark.png\",\"width\":1000,\"height\":315,\"caption\":\"WordHerd WordPress Migration\"},\"image\":{\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wordherd.io\\\/#\\\/schema\\\/person\\\/373419b97c0fbc45a3a16462bdba0fac\",\"name\":\"WordHerd\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g\",\"caption\":\"WordHerd\"},\"sameAs\":[\"https:\\\/\\\/wordherd.io\",\"https:\\\/\\\/www.facebook.com\\\/wordherdio\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wordherd\",\"https:\\\/\\\/x.com\\\/wordherdio\"],\"url\":\"https:\\\/\\\/wordherd.io\\\/fr\\\/blog\\\/author\\\/wordherd\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Custom Call-to-Action Block in WordPress - WordHerd WordPress Migration","description":"Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. Perfect for beginners, this tutorial covers everything from setting up your environment to coding with React. Elevate your website's user experience and engagement with a personalized CTA block today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wordherd.io\/fr\/blog\/create-a-custom-call-to-action-block-in-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Create a Custom Call-to-Action Block in WordPress - WordHerd WordPress Migration","og_description":"Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. Perfect for beginners, this tutorial covers everything from setting up your environment to coding with React. Elevate your website's user experience and engagement with a personalized CTA block today.","og_url":"https:\/\/wordherd.io\/fr\/blog\/create-a-custom-call-to-action-block-in-wordpress\/","og_site_name":"WordHerd WordPress Migration","article_author":"https:\/\/www.facebook.com\/wordherdio\/","article_published_time":"2024-04-03T17:26:02+00:00","article_modified_time":"2026-07-02T15:37:53+00:00","og_image":[{"width":2560,"height":1477,"url":"https:\/\/wordherd.io\/wp-content\/uploads\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg","type":"image\/jpeg"}],"author":"WordHerd","twitter_card":"summary_large_image","twitter_creator":"@wordherdio","twitter_misc":{"\u00c9crit par":"WordHerd","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/"},"author":{"name":"WordHerd","@id":"https:\/\/wordherd.io\/#\/schema\/person\/373419b97c0fbc45a3a16462bdba0fac"},"headline":"Create a Custom Call-to-Action Block in WordPress","datePublished":"2024-04-03T17:26:02+00:00","dateModified":"2026-07-02T15:37:53+00:00","mainEntityOfPage":{"@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/"},"wordCount":420,"publisher":{"@id":"https:\/\/wordherd.io\/#organization"},"image":{"@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg","articleSection":["Uncategorized"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/","url":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/","name":"Create a Custom Call-to-Action Block in WordPress - WordHerd WordPress Migration","isPartOf":{"@id":"https:\/\/wordherd.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg","datePublished":"2024-04-03T17:26:02+00:00","dateModified":"2026-07-02T15:37:53+00:00","description":"Learn how to enhance your WordPress site by adding a custom Call-to-Action (CTA) block with our comprehensive guide. Perfect for beginners, this tutorial covers everything from setting up your environment to coding with React. Elevate your website's user experience and engagement with a personalized CTA block today.","breadcrumb":{"@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#primaryimage","url":"https:\/\/wordherd.io\/wp-content\/uploads\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg","contentUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/illustration-of-website-elements-for-web-design-stockpack-adobe-stock-scaled-2.jpg","width":2560,"height":1477,"caption":"illustration of website elements for web design stockpack adobe stock scaled 2"},{"@type":"BreadcrumbList","@id":"https:\/\/wordherd.io\/blog\/create-a-custom-call-to-action-block-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wordherd.io\/"},{"@type":"ListItem","position":2,"name":"Create a Custom Call-to-Action Block in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wordherd.io\/#website","url":"https:\/\/wordherd.io\/","name":"Migration de WordHerd vers WordPress","description":"Services de migration de sites web","publisher":{"@id":"https:\/\/wordherd.io\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wordherd.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/wordherd.io\/#organization","name":"Migration de WordHerd vers WordPress","url":"https:\/\/wordherd.io\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/wordherd.io\/#\/schema\/logo\/image\/","url":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-trademark.png","contentUrl":"https:\/\/wordherd.io\/wp-content\/uploads\/wordherd-trademark.png","width":1000,"height":315,"caption":"WordHerd WordPress Migration"},"image":{"@id":"https:\/\/wordherd.io\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/wordherd.io\/#\/schema\/person\/373419b97c0fbc45a3a16462bdba0fac","name":"WordHerd","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bf8c7166601a64c6c57b67ffbeab8f8c6a378cca786da9a326c1a34a2ec6f860?s=96&d=mm&r=g","caption":"WordHerd"},"sameAs":["https:\/\/wordherd.io","https:\/\/www.facebook.com\/wordherdio\/","https:\/\/www.linkedin.com\/company\/wordherd","https:\/\/x.com\/wordherdio"],"url":"https:\/\/wordherd.io\/fr\/blog\/author\/wordherd\/"}]}},"_links":{"self":[{"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/posts\/13475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/comments?post=13475"}],"version-history":[{"count":1,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/posts\/13475\/revisions"}],"predecessor-version":[{"id":15218,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/posts\/13475\/revisions\/15218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/media\/14324"}],"wp:attachment":[{"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/media?parent=13475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/categories?post=13475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/tags?post=13475"},{"taxonomy":"builders","embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/builders?post=13475"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/industry?post=13475"},{"taxonomy":"platform","embeddable":true,"href":"https:\/\/wordherd.io\/fr\/wp-json\/wp\/v2\/platform?post=13475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}