Now that you got all the basics for options, let’s see how to organize and create powerful and custom admin panel options for your theme.
Before starting, let’s organize the groups that you want to create. This is an important phase of the process that will help you to organize the module and the project workflow better.
In this case, we are going to create the following groups of options:
- Typography settings
- Header settings
- Footer settings
Feel free to organize the code as you like! You can see the result of what we are going to create. The following screenshot shows you how the groups appear in the admin once you create it:
To create the main structure of the options group, let’s start by creating all the groups inside the <bookstore> sections in the <groups> tags, which is always in the system.xml file. Perform the following steps:
- Create the group for the TYPOGRAPHY options as follows:
<!– TYPOGRAPHY GROUP –>
<typography translate=”label” module=”themeoptions”>
<label>Typography</label>
<frontend_type>text</frontend_type>
<sort_order>01</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<!– insert the option fields here –>
</fields>
</typography>
- Then, create the group for the HEADER options as follows:
<!– HEADER GROUP –>
<header translate=”label” module=”themeoptions”>
<label>Header Settings</label>
<frontend_type>text</frontend_type>
<sort_order>02</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<!– insert the option fields here –>
</fields>
</header>
- Finally, create the group for the FOOTER options as follows:
<!– FOOTER GROUP –>
<footer translate=”label” module=”themeoptions”>
<label>Social Settings</label>
<frontend_type>text</frontend_type>
<sort_order>03</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<!– insert the option fields here –>
</fields>
</footer>
The first group of options called Typography contains only custom drop-down options and, as I promised previously, I will now show you how to create these useful options.
1. Creating a custom dropdown field
To create a custom dropdown options field, such as the selection of a family font or the font size, we need to perform the following steps:
- Create a new field defining the source model from your module as follows:
<font_text translate=”label”>
<label>Text Font: </label>
<comment>Custom Source model Font</comment>
<frontend_type>select</frontend_type>
<sort_order>1</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<source_model>themeoptions/source_font</source_model>
</font_text>
- Now, we need to create our custom model where we will insert all the dropdown options. So, navigate into the module in app/code/local/ BookStore/ThemeOptions/Model and create the Source Inside the Source folder, create the Font.php file with the following code:
<?php
class BookStore_ThemeOptions_Model_Source_Font
{
public function toOptionArray()
{
return array(
array(‘value’ => ‘serif’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (‘Georgia, Times New Roman, Times, serif’)),
array(‘value’ => ‘sansserif’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (‘Arial, Helvetica, sans-serif’)),
array(‘value’ => ‘monospace’, ‘label’ => Mage::helper(‘themeoptions’)-> (‘”Courier New”, Courier, monospace’))
);
}
}
The result in the admin will be the following dropdown selection of Text Font:
Done! Now we will also create a font size selection with the same method by creating a new field in system.xml with a custom source model, as follows:
<font_text_size translate=”label”>
<label>Text Font Size: </label>
<comment>Custom Source Model Fontsize</comment>
<frontend_type>select</frontend_type>
<sort_order>2</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<source_model>themeoptions/source_fontsize</source_model>
</font_text_size>
Create a new source model file called Fontsize.php in the Source folder with the following code:
<?php
class BookStore_ThemeOptions_Model_Source_Fontsize
{
public function toOptionArray()
{
return array(
array(‘value’ => ’12px’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (’12px’)),
array(‘value’ => ’13px’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (’13px’)),
array(‘value’ => ’14px’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (’14px’)),
array(‘value’ => ’15px’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (’15px’)),
array(‘value’ => ’16px’, ‘label’ =>
Mage::helper(‘themeoptions’)-> (’16px’))
);
}
}
The result is a dropdown with font size selection as shown in the following screenshot:
If you understand the power and the flexibility of the fields, you can create a custom admin panel with a lot of configurations.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.