7

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 article in atwix makes sense but you will have to learn the basic of Module creation to achieve it. – Dexter Oct 17 '14 at 11:05
  • Thanks @Dexter I didn't even know about modules which is probably why I am struggling with the atwix tutorial. I am going to look into module creation. – fnk Oct 17 '14 at 11:11
16

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.

  • Ha. StackExchange_Example. That's a really good name for examples. I will start using this from now on in here (if I have your permission). This way people that work on projects after the ones that ask questions in here will maybe realize the value of SE :). – Marius Jan 23 '15 at 12:12
  • @Marius of course you have my permission, I guess it is better than seeing easy life ;) – David Manners Jan 23 '15 at 12:15
  • 1
    Thanks for the permission. but I have to disagree...nothing is better than an easy life :). – Marius Jan 23 '15 at 12:15
  • 2
    Was really helpful, even better than atwix. Just a correction though: You have mentioned Path to your Observer and sql install files in app/code/community , while your xml file for module defines it in 'local' codepool. Just mentioned it for newbies, in case they get confused. – Ajay Bisht Jan 21 '16 at 12:46
  • @DavidManners maybe its a bit late/outdated but i cant get it to save the value! i did it three times and although i get it to show on the cms page, i cannot save its value! what am i missing! – hahaha Feb 16 '17 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.