iPanel 2.0

Wordpress option panel framework

created: 03/03/2014
latest update: 03/17/2014
by: Vahidd
email: vahidd.com@gmail.com

The new version is completely written and redesigned. Also there are a lot of changes in the way of making panel and defining fields.

So if you've created your panel and now you want to load new version files in your project, Please read this documentation completely then edit your files.

This documentation covers only new version.

Also I'm truly sorry for this huge changes.

To understand this documantion you need to have basic knowledge of PHP and wordpress coding.

To get started with iPanel you need to do the following steps:

Short description:

1- Copy ipanel folder which you've download from envato into you plugin or theme folder.

2- Load ipanel.php with php require_once function.

3- Then filter "ipanel_options".

Also there are theme-sample and plugin-sample folders in package.

First copy ipanel folder in the download file from envato into your plugin or theme folder.

Now you need to include ipanel.php file in your code:

require_once 'ipanel/ipanel.php';

Now you are ready to filter ipanel_options.

A simple example of filtering is:

add_filter(
	'ipanel_options',
	'ipanel_sample_panel'
);
function ipanel_sample_panel( $panels ){

	$panels['THIS_IS_YOUR_PANEL_ID'] = array( // Dont forget the ID

	'settings' => array(

		'name' => 'Panel Name',
		'url' => 'THE URL OF IPANEL DIRECTORY'

	),
	'fields' => array(

		array(
			'type' => 'tab',
			'name' => 'Sample Tab',
			'id' => 'sample_tab'
		),
		array(

			'type' => 'text',
			'name' => 'Sample Field',
			'id' => 'field_id'

		)

	)

	);
	return $panels; // DO NOT FORGET TO RETURN $panels
}

Now you are ready to register your menu and display ipanel in it.

Assuming we've registered a menu with these code:

add_action( 'admin_menu', 'ipanel_register_theme_menu' );
function ipanel_register_theme_menu(){
	$hook = add_menu_page( 'iPanel in theme', 'iPanel in theme', 'manage_options', 'ipanel_in_theme', 'ipanel_menu_callback_in_theme', null, 6 );
}
function ipanel_menu_callback_in_theme(){
	echo 'Its works!';
}

Now we need to make some changes in this code and display iPanel.

First we should display iPanel's HTML in callback(Its works text). If you remember we registered our panel with "THIS_IS_YOUR_PANEL_ID" ID. So change the

echo 'Its works!';

echo $GLOBALS['ipanel']['THIS_IS_YOUR_PANEL_ID']->callback();

The next step is tell to iPanel that we are using ipanel in which page.

Insert the line below in line 3 (after $hook variable):

add_action( 'load-'.$hook, create_function( '', '$GLOBALS["ipanel"]["THIS_IS_YOUR_PANEL_ID"]->load();' ) );

Now you should see the "iPanel in theme" menu in wordpress menus.

Also the final code of a simple admin panel would be:

add_filter(
	'ipanel_options',
	'ipanel_sample_panel'
);
function ipanel_sample_panel( $panels ){

	$panels['THIS_IS_YOUR_PANEL_ID'] = array(

	'settings' => array(

		'name' => 'Panel Name',
		'url' => 'http://127.0.0.1/wp/wp-content/themes/theme-sample/ipanel/'

	),
	'fields' => array(

		array(
			'type' => 'tab',
			'name' => 'Sample Tab',
			'id' => 'sample_tab'
		),
		array(

			'type' => 'text',
			'name' => 'Sample Field',
			'id' => 'field_id'

		)

	)

	);
	return $panels; // DO NOT FORGET TO RETURN $panels
}

add_action( 'admin_menu', 'ipanel_register_theme_menu' );
function ipanel_register_theme_menu(){
	$hook = add_menu_page( 'iPanel in theme', 'iPanel in theme', 'manage_options', 'ipanel_in_theme', 'ipanel_menu_callback_in_theme', null, 6 );
	add_action( 'load-'.$hook, create_function( '', '$GLOBALS["ipanel"]["THIS_IS_YOUR_PANEL_ID"]->load();' ) );
}
function ipanel_menu_callback_in_theme(){
	echo $GLOBALS['ipanel']['THIS_IS_YOUR_PANEL_ID']->callback();
}

There are some options in settings item and you can find them useful.

1- name

This item is required and you should add your panel name to it.

2- url

The URL of iPanel directory. This item is required. sample:

http://google.com/wp/wp-content/themes/theme-sample/ipanel/

3- option_name

iPanel uses wordpress's option API to save and get panel data. By default the name option is "ipanel_PANEL_ID".

You can use your own option name with this setting.

4- text_domain

This option is optional and the default value is "default".

4- help_tabs

This option is optional and adds help tabs to the panel page.

'help_tabs' => array(

 array(

   'title' => 'Title',

   'content' => "Content"

 ),

 array(

   'title' => 'Title',

   'content' => "Content"

 )

)

iPanel supports about 12 field types and each field has its custom options.

1- Tab

Tab field type is for tabs and has 3 options: type, id, name.

Example:

array(

"type" => "tab",

'name' => 'Sample Tab Name',

"id" => "tab_id"

)

2- Sub tab

Sub tab options are like the tab field.

Example:

array(

"type" => "subtab",

'name' => 'Sample Tab Name',

"id" => "tab_id"

)

3- Text Field

This field type is for one line text inputs. The text field type should contain name, id, type items.

Example of all items:

array(

'type' =>  "text",

'name' =>  'Sample Text Field',

'id'  =>  "text_field_id", 

'type'  =>  "text", 

'std' => "my value", // default value

'prefix' => '@', // Adds a prefix box before the input

'suffix' => 'px', // Adds a suffix box after the input

'desc' => "description here", // Field description

'width' => "40%", // The width of input

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Textarea Field

This field type is for multi-line text input.

Example of all items:

array(

'name' =>  'Sample Textarea Field',

'id'  =>  "textarea_field_id", 

'type'  =>  "textarea", 

'std' => "my value", // default value

'desc' => "description here", // Field description

'rows' => "3", // Value if textarea rows attribute

'cols' => "50", // Value if textarea cols attribute

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Code Field

This field types allows you to write code in highlighted input.

Example of all items:

array(

'name' =>  'Sample Code Field',

'id'  =>  "code_field_id", 

'std' => "Hi World!", // default value

'type' => "code", // default value

'desc' => "description here", // Field description

'width' => "100%", // The width of editor

'height' => "150px", // The height of editor

/*
	Language of code editor.
	Supported languages:
	 'abap', 'actionscript', 'ada', 'apache_conf', 'asciidoc', 'assembly_x86', 'autohotkey',
	 'batchfile', 'c9search', 'c_cpp', 'cirru', 'clojure', 'cobol', 'coffee',
	 'coldfusion', 'csharp', 'css', 'curly', 'd', 'dart', 'diff', 'django', 'dot',
	 'ejs', 'erlang', 'forth', 'ftl', 'gherkin', 'glsl', 'golang', 'groovy', 'haml',
	 'handlebars', 'haskell', 'haxe', 'html', 'html_completions', 'html_ruby', 'ini', 'jack',
	 'jade', 'java', 'javascript', 'json', 'jsoniq', 'jsp', 'jsx', 'julia', 'latex',
	 'less', 'liquid', 'lisp', 'livescript', 'logiql', 'lsl', 'lua', 'luapage', 'lucene',
	 'makefile', 'markdown', 'matlab', 'mel', 'mushcode', 'mushcode_high_rules', 'mysql', 'nix',
	 'objectivec', 'ocaml', 'pascal', 'perl', 'pgsql', 'php', 'plain_text', 'powershell',
	 'prolog', 'properties', 'protobuf', 'python', 'r', 'rdoc', 'rhtml', 'ruby', 'rust',
	 'sass', 'scad', 'scala', 'scheme', 'scss', 'sh', 'sjs', 'smarty', 'snippets', 'soy_template',
	 'space', 'sql', 'stylus', 'svg', 'tcl', 'tex', 'text', 'textile', 'toml', 'twig', 'typescript',
	 'vbscript', 'velocity', 'verilog', 'vhdl', 'xml', 'xquery', 'yaml' 
*/
'lang' => "html",

/*
	Theme of code editor.
	Supported themes:
	 'ambiance', 'chaos', 'chrome', 'clouds', 'clouds_midnight',
	 'cobalt', 'dawn', 'dreamweaver', 'eclipse', 'github', 'idle_fingers',
	 'katzenmilch', 'kr', 'kuroir', 'merbivore', 'merbivore_soft',
	 'mono_industrial', 'monokai', 'pastel_on_dark', 'solarized_dar',
	 'solarized_light', 'terminal', 'textmate', 'tomorrow', 'tomorrow_night',
	 'tomorrow_night_blue', 'tomorrow_night_bright',
	 'tomorrow_night_eighties', 'twilight', 'vibrant_ink', 'xcode' 	
*/
'theme' => "twilight",

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Color Picker Field

This field type adds a jquery color picker to yuor panel.

Example of all items:

array(

'name' =>  'Sample Color Field',

'id'  =>  "color_field_id", 

'type'  =>  "color", 

'std' => "#333", // default value

'desc' => "description here", // Field description

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Wordpress Color Picker Field

This field type adds a wordpress color picker to your panel.

Example of all items:

array(

'name' =>  'Sample Wordpress Color Picker Field',

'id'  =>  "wp_color_field_id", 

'type'  =>  "wp_color", 

'std' => "#333", // default value

'desc' => "description here", // Field description

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Wordpress Editor Field

This field type adds wordpress WYSIWYG editor (TinyMCE) to your panel.

Example of all items:

array(

'name' =>  'Sample Wordpress Editor Field',

'id'  =>  "wp_editor_field_id", 

'type'  =>  "wp_editor", 

'std' => "my value", // default value

'desc' => "description here", // Field description

'settings' => array( 'media_buttons' => false ), // The settings array which is the wp_editor argument. This example disables media buttons

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Checkbox Field

This field type allows you to add checkbox to your admin panel.

Example of all items:

array(

'name' =>  'Sample Checkbox Field',

'id'  =>  "checkbox_field_id", 

'type'  =>  "checkbox", 

'std' => "1", // Default value. 0 or 1

'label' => "Check me!", // Label of checkbox

'desc' => "description here", // Field description

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Multi-Checkbox Field

This field type allows you to add multi-checkbox to your admin panel.

Example of all items:

array(

'name' =>  'Sample Multi-Checkbox Field',

'id'  =>  "multi_checkbox_field_id", 

'type'  =>  "multicheckbox", 

// Items array. This item is required and should be an array.
'options' => array( 
	"option_1" => "Option 1",
	"Option 2" => "Option 2",
	"Option 3" => "Option 3"
),

'std' => array( "option_1", "option_3" ), // Default value. should be an array which items are the default values

'desc' => "description here", // Field description

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Select Field

This field type allows you to add select fields to your admin panel.

Example of all items:

array(

'name' =>  'Sample Select Field',

'id'  =>  "select_field_id", 

'type'  =>  "select", 

// Items array. This item is required and should be an array.
'options' => array( 
	'option1' => 'Option 1',
	'option2' => 'Option 2',
	'option3' => 'Option 3',
	'option4' => 'Option 4',
	'option5' => 'Option 5'
), // 

'std' => "option1", // Default value.

/*
	You can pass select2 options as array in here:
	http://ivaynberg.github.io/select2/
	Also you can set this to false and this field will not use select2
*/
'select2' => array( ),

'width' => "40%", // Width of input.

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Multi-Select Field

This field type allows you to add mutli-select fields to your admin panel.

Example of all items:

array(

'name' =>  'Sample Select Field',

'id'  =>  "multiselect_field_id", 

'type'  =>  "multiselect", 

 //Items array. This item is required and should be an array.
'options' => array( 
	'option1' => 'Option 1',
	'option2' => 'Option 2',
	'option3' => 'Option 3',
	'option4' => 'Option 4',
	'option5' => 'Option 5'
), // 

'std' => array( "option_1", "option_3" ), // Default value. should be an array which items are the default values

/*
	You can pass select2 options as array in here:
	http://ivaynberg.github.io/select2/
	Also you can set this to false and this field will not use select2
*/
'select2' => array( ),

'sortable' => true, // If you've enabled select2 for this field you can make the items sortable with this options.

'width' => "", // Width of input.

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Radio Field

This field type adds radio button field to your panel.

Example of all items:

array(

'name' =>  'Sample Radio Field',

'id'  =>  "radio_field_id", 

'type'  =>  "radio", 

 //Items array. This item is required and should be an array.
'options' => array( 
	'option1' => 'Option 1',
	'option2' => 'Option 2',
	'option3' => 'Option 3',
	'option4' => 'Option 4',
	'option5' => 'Option 5'
), // 

'std' => "option1", // Default value.

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Image Radio Field

This field type adds image radio field to your panel.

Example of all items:

array(

'name' =>  'Sample Image Radio Field',

'id'  =>  "image_radio_field_id", 

'type'  =>  "image_radio", 

 //Items array. This item is required and should be an array.
'options' => array( 
	'option1' => array(
		'label' => 'Option 1',
		'image' => 'URL TO THE IMAGE'
	),
	'option2' => array(
		'label' => 'Option 2',
		'image' => 'URL TO THE IMAGE'
	),
	'option3' => array(
		'label' => 'Option 3',
		'image' => 'URL TO THE IMAGE'
	),
	'option4' => array(
		'label' => 'Option 4',
		'image' => 'URL TO THE IMAGE'
	)
	
), // 

'std' => "option1", // Default value.

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Wordpress Media Field

This field type adds wordpress media uploader to your panel.

Example of all items:

array(

'name' =>  'Sample Media Field',

'id'  =>  "media_field_id", 

'type'  =>  "media", 

'std' => array(
	'URL OF FILE',
	'URL OF FILE',
	'URL OF FILE',
	'URL OF FILE'
), // Default value. should be an array.

'button-text' => 'Open Media', // The text of button which opens media frame

'frame-title' => 'Frame Title', // The title of frame

'frame-button-text' => 'Select', // The title of frame button

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Ajax Uploader Field

This field type adds ajax uploader to your panel.

Example of all items:

array(

'name' =>  'Ajax Uploader Field',

'id'  =>  "ajax_uploader_field_id", 

'type'  =>  "ajax_uploader", 

'multiple' => true, // Multiple or not

'sortable' => true, // You can make uploaded file sortable with this option

'std' => array(
	array(
		'url' => 'URL TO FILE',
		'file' => 'SERVER PATH TO FILE'
	),
	array(
		'url' => 'URL TO FILE',
		'file' => 'SERVER PATH TO FILE'
	),
	array(
		'url' => 'URL TO FILE',
		'file' => 'SERVER PATH TO FILE'
	)
), // Default value. should be an array.


'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Date Picker Field

This field type adds jquery ui date picker to your panel.

Example of all items:

array(

'name' =>  'Date Picker Field',

'id'  =>  "date_uploader_field_id", 

'type'  =>  "date", 

'std' => '', // Default value.


/*
	You can pass jquery ui options as array in this item.
	http://jqueryui.com/datepicker/
*/
'options' => array(

),

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Slider Field

This field type adds jquery ui slider input to your panel.

Example of all items:

array(

'name' =>  'Slider Field',

'id'  =>  "slider_uploader_field_id", 

'type'  =>  "slider", 

'tooltip' => "%s px", // You can add a tooltip next to slider handle. The "%s" is the value

/*
	You can pass slider options as array in this item.
	http://jqueryui.com/slider/
*/
'options' => array(
	'min' => 50,
	'max' => 240
),

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Typography Field

This field type adds typography field to your panel.

Example of all items:

array(

'name' =>  'Typography Field',

'id'  =>  "typography_field_id", 

'type'  =>  "typography",

'color'  =>  true, // If false the color input will not be shown


'font-style'  =>  true, // If false the font style input will not be shown
'font-style-options'  =>  array( // Font style options
	'normal' => 'Normal',
	'italic' => 'Italic',
	'oblique' => 'Oblique',
	'initial' => 'Initial',
	'inherit' => 'Inherit'
),


'font-size'  =>  true, // If false the font size input will not be shown
'font-size-options'  =>  array( // Font size options
	'13' => '13px',
	'14' => '14px',
	'15' => '15px',
	'16' => '16px',
	'17' => '17px'
),


'font-family'  =>  true, // If false the font family input will not be shown
'font-family-options'  =>  ipanel_get_google_fonts(), // This will show list of google fonts



'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Export Field

This field allows you to export your panel data in file or plain text.

Example of all items:

array(

'name' =>  'Export Field',

'id'  =>  "export_field_id", 

'type'  =>  "export",

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Import Field

This field allows you to import your panel data with file or plain text.

Example of all items:

array(

'name' =>  'Import Field',

'id'  =>  "impot_field_id", 

'type'  =>  "import",

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Sorter Field

This field adds sorter blocks to your panel.

Example of all items:

array(

// This field does not accept std value. You can to modify the "groups" item

'name' =>  'Sorter Field',

'id'  =>  "sorter_field_id", 

'type'  =>  "sorter",

'groups'  => array(
	'group1' => array(
		'label' => 'GROUP 1',
		'items' => array(
			'g1_1' => 'Group 1 Block 1',
			'g1_2' => 'Group 1 Block 2',
			'g1_3' => 'Group 1 Block 3'
		)
	),
	'group3' => array(
		'label' => 'GROUP 3',
		'items' => array(
			'g3_1' => 'Group 3 Block 1',
			'g3_2' => 'Group 3 Block 2',
			'g3_3' => 'Group 3 Block 3'
		)
	)
),

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

3- Repeater Field

This field adds repeatable block of inputs to your panel.

Example of all items:

array(

'name' =>  'Repeater Field',

'id'  =>  "repeater_field_id", 

'type'  =>  "repeater",

'title'  =>  "Item %d", // The title of repeater items. %d will be replaced with item index.

/*
	This item is required and should be filled with repeater fields
	
	Only these field types can be used in repeater:
	text, textarea, code, color, wp_color, checkbox, multicheckbox, image_checkbox, select, multiselect, image_select, radio, image_radio
	media, ajax_uploader, typography, slider, date
*/
'options' => array( 
	array(
		'id' => 'repeater_text',
		'type' => 'text',
		'name' => 'Repeater Text'
	),
	array(
		'id' => 'repeater_textarea',
		'type' => 'textarea',
		'name' => 'Repeater Textarea'
	)
	// ....
),

'std' => array(
	array(
		'repeater_text' => 'Repeater Text Field Value 1',
		'repeater_textarea' => 'Repeater Textarea Field Value 1'
	),
	array(
		'repeater_text' => 'Repeater Text Field Value 2',
		'repeater_textarea' => 'Repeater Textarea Field Value 2'
	)

)

'desc_in_tooltip' => true, // if true the description will be shown in tooltip

)

iPanel uses wordpress option API to store data.

The name of options can be defined in settings array. By default ipanel uses "ipanel_PANEL_ID" for option name.

So you can make a global variable of panel data in this way:

$GLOBALS['data'] = get_option( ipanel_get_panel_option_name( 'YOUR PANEL ID' ), array() );

Then you can get any field value in this way:

$field_id = 'sample_text_input';

echo $data[ $field_id ];

Conditional logic lets you to display or hide a field based on another field value change.

Assuming you have defined a text field like this:

array(   
   'name' => 'Text Field',
   'type' => 'text',
   'id' => 'field_id'
 )

Now we add conditional logics to field:

array(
  'name' => 'Text Field',
  'type' => 'text',
  'id' => 'field_id',
  'conditional_logic' => array(
    array(
      'value' => 'test',
      'operator' => '==',
      'result' => array(
        'hide' => 'target_id'
      )
    )
  )
)

Now if the value of field changes to "test", Field with "target_id" will be hidden.

Notes:

In the line 7 we defined the value of logic. It should be a string or integer.

In the line 8 we defined the operator. You can use this operators: ==, ===, !=, !==. Default operator is ==.

In the line 9 we defined the result. You can also use show to display a field.

Only this field types support conditional logics:

text
textarea
code
wp_editor
select
radio
image_radio
checkbox

iPanel 2.0

Wordpress option panel framework

New version

Get started

Settings array options

Field Types

1- Tab

2- Sub tab

3- Text Field

3- Textarea Field

3- Code Field

3- Color Picker Field

3- Wordpress Color Picker Field

3- Wordpress Editor Field

3- Checkbox Field

3- Multi-Checkbox Field

3- Select Field

3- Multi-Select Field

3- Radio Field

3- Image Radio Field

3- Wordpress Media Field

3- Ajax Uploader Field

3- Date Picker Field

3- Slider Field

3- Typography Field

3- Export Field

3- Import Field

3- Sorter Field

3- Repeater Field

Retrieving Options

Conditional Logics