How to edit Custom Type

Updated: July 12, 2014, 5:11 pm

Check out our new Directory Extension plugin that will allow you to extend Directory and Business Finder item fields easily right from the admin panel.

01_preview



You can also extend item fields manually using the below guide

Following tutorial shows how to add few simple fields into your Item custom type in Directory theme (basically steps to edit other custom types in other themes are very similar…).

Adding additional information for some custom type require:
1. Modify backend where you can store information for custom type.
2. Modify frontend codes to show these new information on your site.

1. Modify backend – settings of custom type

In our themes structure of settings in admin area is saved in files with extension *.neon
Neon files you can find in theme folder ./wp-content/themes/themeName/config – there are files with settings structures as AIT General Settings and AIT Appearance (these settings are in file theme-config.neon)
Neon files for custom types are in folders of each custom type: ./wp-content/themes/themeName/AIT/Framework/CustomTypes/folderOfCustomType

For example for custom type Item in Directory theme, is structure of settings in file ./wp-content/themes/directory/AIT/Framework/CustomTypes/dir-item/dir-item.neon

Following image shows how the structure looks. For example Opening Hours in Item custom type:

Let’s try add some additional information for this Item custom type, for example some information about contact person for this Item.
We’ll create new section with name Contact Person, and for each Item we will be able store information:
1. contact person name
2. contact person phone
3. some additional information for this contact person.

Following structure of Opening Hours section, we can create something like that:

"Contact Person" : section
contactPersonName:
	label: Name
	type: text
contactPersonPhone:
	label: Phone
	type: text
contactPersonInfo:
	label: Additional Info
	type: textarea

Following image shows what is the result of these few lines:

Now we can store for each Item custom type new information.
We’ll need now edit frontend code to show new information on site.

2. Modify frontend – show information on site

Template files with main html codes for site are in folder “Templates” (./wp-content/themes/themeName/Templates).
In this example we want show new information on the single page of Item custom type – for this page is used file ./wp-content/themes/directory/Templates/single-ait-dir-item.php

Following image shows which code represent section with Opening Hours.

We are using Nette framework in our themes, more information about Nette Framework here: http://doc.nette.org/en/

Opening Hours are inside “if” condition to do not show items which are not filled for current Item custom type.

Similar we can show new section with Contact Person information for example below Opening Hours:

And this is result of changes above:

Available types of inputs

In the list of inputs below you can see how to write new inputs in neon file, and also how to render saved data in html (in template php file) – frontend of your website.
List of inputs which might be used in our .neon files:

1. Text Input – standard one line text field

Structure in .neon file:
myNewTextInput:
	label: My New Text Input
	type: text
	default: "default value - not required"
Structure in html layout
{if (!empty($options['myNewTextInput']))}
	<p>{__"Value from my input is: "}<span>{!$options['myNewTextInput']}</span></p>
{/if}

2. Textarea

Structure in .neon file:
myNewTextarea:
	label: "My New Textarea"
	type: textarea
	default: "default value - not required"
Structure in html layout
{if (!empty($options['myNewTextarea']))}
	<p>{__"Value from my textarea is: "}<span>{!$options['myNewTextarea']}</span></p>
{/if}

3. Checkbox

Group of checkboxes must be created like group of separated checkboxes.

Structure in .neon file:
myNewCheckbox:
	label: "My New Checkbox"
	type: checkbox
	default:
		enable:
			label: "Yes"
Structure in html layout
{if isset($options['featured'])}
	<p>{__'Checkbox is selected'}</p>
{else}
	<p>{__'Checkbox is not selected'}</p>
{/if}

4. Radiobuttons

Structure in .neon file:
myNewRadioButtons:
	label: "My New Radio Buttons"
	type: radio
	default:
		radio1:
			label: "Radio Button 1"
			checked: true
		radio2:
			label: "Radio Button 2"
		radio3:
			label: "Radio Button 3"
Structure in html layout
{if isset($options['myNewRadioButtons'])}
	{if $options['myNewRadioButtons'] == 'radio1'}<p>Selected is radio button 1</p>{/if}
	{if $options['myNewRadioButtons'] == 'radio2'}<p>Selected is radio button 2</p>{/if}
	{if $options['myNewRadioButtons'] == 'radio3'}<p>Selected is radio button 3</p>{/if}
{/if}

5. Selection

Structure in .neon file:
myNewSelection:
	label: "My New Selection"
	type: select
	default:
		value1:
			label: "My Value 1"
			checked: true
		value2:
			label: "My Value 2"
		value3:
			label: "My Value 3"
Structure in html layout
{if isset($options['myNewSelection'])}
	{if $options['mySelection'] == 'value1'}<p>Selected is value 1</p>{/if}
	{if $options['mySelection'] == 'value2'}<p>Selected is value 2</p>{/if}
	{if $options['mySelection'] == 'value3'}<p>Selected is value 3</p>{/if}
{/if}