If you need to extend Magento 2 Blog Module by Magefan and add a new custom text field to Blog Post edit page in Magento 2 Admin panel (Content  > Blog > Posts) you must to create a simple custom Magento 2 Extension.

You can download a sample extension from our GitHub page or you can create it manually using the steps below:

1. Create composer.json file

app/code/Magefan/BlogCustomField/composer.json
{
"name": "magefan/module-blog-custom-field",
"description": "Implements Blog functionality on Magento 2 store",
"require": {
"magefan/module-blog" : ">=2.8.0"
},
"type": "magento2-module",
"version": "2.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [ "registration.php" ],
"psr-4": {
"Magefan\\BlogCustomField\\": ""
}
}
}

 

2. Create registration.php file

app/code/Magefan/BlogCustomField/registration.php
<?php
/**
* Copyright © Magefan ([email protected]). All rights reserved.
* See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magefan_BlogCustomField',
__DIR__
);

 

3. Create module.xml file

app/code/Magefan/BlogCustomField/etc/module.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magefan ([email protected]). All rights reserved.
* See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magefan_BlogCustomField" setup_version="2.0.0">
<sequence>
<module name="Magefan_Blog"/>
</sequence>
</module>
</config>

 

4. Create InstallSchema.php file

app/code/Magefan/BlogCustomField/Setup/InstallSchema.php
<?php
/**
* Copyright © Magefan ([email protected]). All rights reserved.
* See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
*/
namespace Magefan\BlogCustomField\Setup;
use Magento\Framework\Setup\InstallSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
use Magento\Framework\DB\Adapter\AdapterInterface;
/**
* Blog setup
*/
class InstallSchema implements InstallSchemaInterface
{
/**
* {@inheritdoc}
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{
$setup->startSetup();
/* Add one custom text field */
$table = $setup->getTable('magefan_blog_post');
$setup->getConnection()->addColumn(
$setup->getTable($table),
'custom_field',
[
'type' => \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
'length' => 255,
'nullable' => true,
'comment' => 'Custom Field',
]
);
$setup->endSetup();
}
}

 

5. Create blog_post_form.xml file

app/code/Magefan/BlogCustomField/view/adminhtml/ui_component/blog_post_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magefan ([email protected]). All rights reserved.
* See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="additional_options">
<field name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Custom Field</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">post</item>
<item name="sortOrder" xsi:type="number">999</item>
<item name="dataScope" xsi:type="string">custom_field</item>
<!--
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
-->
</item>
</argument>
</field>
</fieldset>
</form>

Once all the extension files have been created, please run CLI commands to install the extension:

php bin/magento setup:upgrade
php bin/magento cache:clean

Navigate to the Magento 2 Admin Panel > Content > Blog > Posts > Edit Post. You will see the new field.

Magento 2 Blog Module Custom Field

To display the value of this field on storefront use the code

<?= $post->getData('custom_field') ?>

If you add this code to view/frontend/templates/post/view.phtml template file, e.g:

<?php if ($_post->getData('custom_field')) { ?>
    <h2><?= $block->escapeHtml($_post->getData('custom_field')) ?></h2>
<?php } ?>

you will see

Magento 2 Blog Extension Custom Field Example