Customizing modules & tabs in theme settings

Customizing Theme Config

The modules and tabs in Themify Panel are defined by a series of arrays declarated in the file theme-config.php, located in the theme root directory.

Sample arrays can be seen below (You can see entire variables by opening the theme-config.php file)

[code type=php] array(
'src' => 'uploads/'
)
);

/* Settings Panel
/***************************************************************************/
$themify_theme_config['panel']['settings']['tab']['general'] = array(
'title' => __('General', 'themify'),
'custom-module' => array(
array(
'title' => __('Favicon', 'themify'),
'function' => 'favicon',
'target' => 'uploads/favicon/'
),
array(
'title' => __('Custom Feed URL', 'themify'),
'function' => 'custom_feed_url'
),
array(
'title' => __('Header Code', 'themify'),
'function' => 'header_html'
),
array(
'title' => __('Footer Code', 'themify'),
'function' => 'footer_html'
),
array(
'title' => __('Search Settings', 'themify'),
'function' => 'search_settings'
),
array(
'title' => __('Feed Settings', 'themify'),
'function' => 'feed_settings'
),
array(
'title' => __('Open Graph', 'themify'),
'function' => 'open_graph_options'
)
)
);
...........................

/* Styling Panel
/***************************************************************************/
$themify_theme_config['panel']['styling']['tab']['background'] = array(
'title' => __('Background', 'themify'),
'element' => array(
array(
'title' => __('Body Background', 'themify'),
'id' => 'body_background',
'selector' => 'body',
'module' => array(
array(
'name' => 'image-preview',
'src' => 'uploads/bg/'
),
array(
'name' => 'background-image',
'target' => 'uploads/bg/'
),
'background-color',
'background-repeat',
'background-position'
)
),
)
);
?>
[/code]

Customizing tabs & modules

Customization of theme-config.php definitions to add or remove tabs or modules can be performed in two ways:

  • Creating a custom-config.php file
  • Using the themify_theme_config_setup filter

Using the custom-config.php file

Using a custom file is pretty straight forward, you need to:

  1. Duplicate the theme-config.php file renaming it to custom-config.php in your theme directory
  2. Start adding or removing tabs and modules

Using the Filter

Create custom-functions.php in your theme or functions.php if you're using a child theme

Hook filter:

themify_theme_config_setup

Define the function as shown below:

[code type=php]
[/code]

Example

Remove General and Default Layouts side tabs

[code type=php]
[/code]

Add new side tab with modules

[code type=php] 'New Layouts',
'custom-module' => array(
array(
'title' => 'New Index Layout (archive, category, search, tag pages, etc.)',
'function' => 'default_layout'
),
array(
'title' => 'New Post Layout (single post)',
'function' => 'default_post_layout'
)
)
);
?>
[/code]

Remove existing style background

[code type=php]
[/code]

Add new style

[code type=php] 'New Style',
'element' => array(
array(
'title' => 'New Styles',
'id' => 'new_styles',
'selector' => '.new-style',
'module' => array(
'font-family',
'color',
'font-size',
'line-height'
)
),

array(
'title' => 'New Style a:link',
'id' => 'new_style_a_link',
'selector' => '.new_style a',
'module' => array(
'color',
'text-decoration'
)
),

array(
'title' => 'New Style a:hover',
'id' => 'new_style_a_hover',
'selector' => '.new_style a:hover',
'module' => array(
'color',
'text-decoration'
)
)
)
);
?>
[/code]

Complete code:

[code type=php] 'New Layouts',
'custom-module' => array(
array(
'title' => 'New Index Layout (archive, category, search, tag pages, etc.)',
'function' => 'default_layout'
),
array(
'title' => 'New Post Layout (single post)',
'function' => 'default_post_layout'
)
)
);

// remove existing styling
// remove background
unset($arg['panel']['styling']['tab']['background']);

// add new styling options
$arg['panel']['styling']['tab']['new_style'] = array(
'title' => 'New Style',
'element' => array(
array(
'title' => 'New Styles',
'id' => 'new_styles',
'selector' => '.new-style',
'module' => array(
'font-family',
'color',
'font-size',
'line-height'
)
),

array(
'title' => 'New Style a:link',
'id' => 'new_style_a_link',
'selector' => '.new_style a',
'module' => array(
'color',
'text-decoration'
)
),

array(
'title' => 'New Style a:hover',
'id' => 'new_style_a_hover',
'selector' => '.new_style a:hover',
'module' => array(
'color',
'text-decoration'
)
)
)
);

return $arg;
};
add_filter('themify_theme_config_setup', 'theme_themify_theme_config_setup');
?>
[/code]