Adding custom fields in the cms – Magento

I am new to Magento and I have some static pages that I am trying to integrate into the CMS.

I have been looking for days for a way to add custom fields to the CMS in a similar way to how WordPress has this feature.

I found a couple of links:

http://www.atwix.com/magento/adding-custom-attribute-to-a-cms-page/ <- Too confusing/not clear on what I need to do in this tutorial.

http://mrpalvinder.wordpress.com/2014/05/30/how-to-add-custom-fields-in-cms-edit-page-admin-panel/ <- Not helpful

I need this feature because some of my content sits in different places on the site and adding it all into one content editor isn’t enabling me to split the content up like I want it to. I then want to be able to call this content in my template files.

Whether I can do this programmatically or using an extension any help would be appreciated.

Thanks.

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

So as mentioned the atwix blog is actually a very good on for this but I will expand on it to include the main module parts also.

Create Module

So firstly to create out module we will need a module xml file so create the file under app/etc/modules/StackExchange_Example.xml. It should look as follows.

<?xml version="1.0"?>
<config>
    <modules>
        <StackExchange_Example>
            <active>true</active>
            <codePool>local</codePool>
            <depends/>
        </StackExchange_Example>
    </modules>
</config>

All this does is basically let Magento know that the extension should be found in the local code pool. Now we need to create the actual module config and this should be under the folder app/code/local/StackExchange/Example/etc/config.xml. Now what this file does it tell Magento what this extension will actually do and what items it has like Models, Blocks and controllers.

In our case we currently only need a model definition for an observer, to listen to one event adminhtml_cms_page_edit_tab_content_prepare_form so that we can add a new field to the cms tab and to have a resource so that we can add a column to the database.

So the config.xml file will appear as follows.

<?xml version="1.0"?>
<config>
    <modules>
        <StackExchange_Example>
            <version>0.1.0</version>
        </StackExchange_Example>
    </modules>
    <global>
        <models>
            <stackexchange_example>
                <class>StackExchange_Example_Model</class>
            </stackexchange_example>
        </models>
        <events>
            <adminhtml_cms_page_edit_tab_content_prepare_form>
                <observers>
                    <stackexchange_example_page_edit_tab_content>
                        <type>singleton</type>
                        <class>stackexchange_example/observer</class>
                        <method>addNewCmsField</method>
                    </stackexchange_example_page_edit_tab_content>
                </observers>
            </adminhtml_cms_page_edit_tab_content_prepare_form>
        </events>
        <resources>
            <stackexchange_example_setup>
                <setup>
                    <module>StackExchange_Example</module>
                </setup>
            </stackexchange_example_setup>
        </resources>
    </global>
</config>

Add field to table

Now what we will need to do is add the field to the database table so that it can be saved at the same time as the rest of the cms page content. To do this you will need to create a php file under app/code/community/StackExchange/Example/sql/stackexchange_example_setup/install-0.1.0.php. What this file will do is simply load the table and add a new column to it.

<?php
$installer = $this;
/* @var $installer Mage_Core_Model_Resource_Setup */

$installer->startSetup();

$conn = $installer->getConnection();
$table = $installer->getTable('cms_page');

$conn->addColumn(
        $table,
        'your_column',
        Varien_Db_Ddl_Table::TYPE_TEXT,
        '255',
        array(
            'nullable' => false
        ),
        'Your Column Desc'
    );

$installer->endSetup();

Now obviously here you can add your column with any requirements you need.

Add column to admin section

Now we already have the event in place to listen to to add the column so what we do now is create the observer and function. So we can create the file app/code/community/StackExchange/Example/Model/Observer.php and the file will look as follows.

<?php

class StackExchange_Example_Model_Observer
{
    public function addNewCmsField($observer)
    {
        //get CMS model with data
        $model = Mage::registry('cms_page');
        //get form instance
        $form = $observer->getForm();
        //create new custom fieldset 'stackexchange_content_fieldset'
        $fieldset = $form->addFieldset('stackexchange_content_fieldset', array('legend'=>Mage::helper('cms')->__('Custom'),'class'=>'fieldset-wide'));
        //add new field
        $fieldset->addField('your_column', 'text', array(
            'name'      => 'your_column',
            'label'     => Mage::helper('cms')->__('Your Column'),
            'title'     => Mage::helper('cms')->__('Your Column'),
            'disabled'  => false,
            //set field value
            'value'     => $model->getYourColumn()
        ));

    }
}

Now this should be enough so that when you save the cms page the item is also saved into the database, so you are half way there. Now we simply need to get it to display on the frontend.

Frontend display

Now the second way that is described by atwix is actually very nice. Basically you need to add a customer layout.xml snippet to the cms page via the admin and then simply have a template file.

So under the cms page in the admin you will find CMS -> Pages -> Your page -> Design, what you can do here is add specific layout xml to happen only for this cms page.

<reference name="content">
    <block type="core/template" name="home" template="stackexchange/example/cmsattribute.phtml"/>
</reference>

This layout will add a new block with the template stackexchange/example/cmsattribute.phtml after the main content of your page.

Now simply create the template app/design/frontend/base/default/template/stackexchange/example/cmsattribute.phtml and in this template you simply need to load the current cms page and get the attribute data.

<?php echo Mage::getBlockSingleton('cms/page')->getPage()->getContentCustom(); ?>

Now as I said the atwix blog is very good so all I have done here is combine the two posts and add the part about the database update.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0