{"id":1284,"date":"2024-03-22T17:07:34","date_gmt":"2024-03-22T11:37:34","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=1284"},"modified":"2025-01-11T21:18:11","modified_gmt":"2025-01-11T15:48:11","slug":"how-to-add-custom-button-in-cms-page-search-engine-optimization-section-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-add-custom-button-in-cms-page-search-engine-optimization-section-in-magento-2\/","title":{"rendered":"How To Add Custom Button In CMS Page Search Engine Optimization Section In Magento 2"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to Add Custom Button in the CMS Page in Magento 2.<\/p>\n\n\n\n

If you want to Enhance Backend CMS page with custom functionality one requirement is to Add Custom Button In CMS page.<\/p>\n\n\n\n

In this blog we add a custom button in the Search Engine Optimization Section of the CMS Page. <\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Custom Button in Backend CMS Page in Magento 2.<\/p>\n\n\n\n

STEPS FOR ADD CUSTOM BUTTON IN CMS PAGE IN MAGENTO 2<\/strong><\/p>\n\n\n\n

Step 1: Create cms_page_form.xml file<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/view\/adminhtml\/ui_component\/cms_page_form.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0" encoding="UTF-8"?>\n\n\u00a0<form xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n\n\u00a0\u00a0<fieldset name="search_engine_optimisation" sortOrder="20">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<field name="meta_title" formElement="input" sortOrder="21">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<argument name="data" xsi:type="array">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="config" xsi:type="array">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<item name="source" xsi:type="string">page<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/item>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/argument>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<settings>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<dataType>text<\/dataType>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label translate="true">Meta Title<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<dataScope>meta_title<\/dataScope>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/settings>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/field>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<container name="cms_meta_title_button_container" sortOrder="25">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<htmlContent name="html_content">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<argument name="block" xsi:type="object">Vendor\\Extension\\Block\\Adminhtml\\Cms\\Edit\\Cmsbutton<\/argument>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/htmlContent>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/container>\n\n\u00a0\u00a0\u00a0<\/fieldset>\u00a0\n\n<\/form>\n<\/pre><\/div>\n\n\n
Step 2: Create Cmsbutton.php file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Block\/Adminhtml\/Cms\/Edit\/Cmsbutton.php<\/strong><\/p>\n\n\n
\n<?php\u00a0\n\nnamespace Vendor\\Extension\\Block\\Adminhtml\\Cms\\Edit;\n\nclass Cmsbutton extends \\Magento\\Backend\\Block\\Template\n\n{\n\n\u00a0\u00a0\u00a0\u00a0protected $_template = 'Vendor_Extension::cms\/button.phtml';\n\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Backend\\Block\\Template\\Context $context,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = []\n\n\u00a0\u00a0\u00a0\u00a0) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $data);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function getButtonHtml()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$button = $this->getLayout()->createBlock('Magento\\Backend\\Block\\Widget\\Button')->setData(['id' => 'custom_button', 'label' => __('Save'),'class'=>'action- scalable save primary']);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $button->toHtml();\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Create button.phtml file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/view\/adminhtml\/templates\/cms\/button.phtml<\/strong><\/p>\n\n\n
\n<div class="admin__field" data-bind="css: $data.additionalClasses, attr: {'data-index': index}, visible: visible">\n\n\u00a0\u00a0\u00a0\u00a0<div class="admin__field-control" style="text-align: center;">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo $block->getButtonHtml();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\n<\/div>\n<\/pre><\/div>\n\n\n
Step 4: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento cache:clean\n\n$ php bin\/magento cache:flush\n<\/pre><\/div>\n\n\n
Step 5: Output:<\/strong><\/p>\n\n\n\n
go to Content -> Elements -> Pages -> <select any page> -> Edit<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/strong><\/p>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Add Custom Button in Backend CMS Page in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>