Adding Custom Settings to Theme Options

Updated on July 4, 2018

In this article we’ll describe how to add new options in Theme Options. In Jupiter 5.5 version we added filters to be able to achieve this through child theme.

How to create child theme you can read in the article Installing Jupiter Theme and Child Theme.


Creating Functions.php File in the Child Theme

To be able to add custom options you need write your code in the functions.php file in your child theme.

From the link above you found instruction how to create a child theme. Now add functions.php file:

1Connect to your server.

You can do this via FTP client such as Filezilla or go to your local computer if you installed your website locally on your machine.

2Access the directory below:

wp-content > themes > jupiter-child

3Create a new file with the name functions.php

Now that you have the file inside the Child Theme you can make the code changes you want.


Adding Custom Code for a Custom Option

Open functions.php file in the child theme with your favorite editor and write the code of an option you want to add, in our case we’ll add the option Portfolio Archive Layout 2 that allows to define the layout of Portfolio Archive page as full width without sidebar, left sidebar or right sidebar:

function mk_add_theme_options_custom_menu()
{ echo '<li><a href="#mk_options_custom_menu"> <svg width="18px" height="30px" viewBox="0 0 18 30" enable-background="new 0 0 18 30" xml:space="preserve"> <path d="M11.557,3.532l-1.151,9.345L10.266,14h1.133h4.578L6.443,26.467l1.152-9.345L7.734,16H6.602H2.023 L11.557,3.532z M0,17h6.602L5,30l13-17h-6.602L13,0L0,17z"/> </svg> <span> ' . __("Custom menu", "mk_framework") . '</span></a></li>'; }
add_action('mk_jupiter_theme_options_main_menu', 'mk_add_theme_options_custom_menu');
// ---------------------------------------------------
function mk_add_custom_sub_menu( $options )
{ $options = mk_theme_options_add_sub_menu( $options, 0, 'mk_options_custom_settings', 'Custom Settings' ); return $options; }
add_filter('mk_jupiter_theme_options_settings', 'mk_add_custom_sub_menu');
// ----------------------------------------------------
function mk_add_custom_sub_menu_settings_page( $options )
{ $options = mk_theme_options_add_sub_menu_settings_page( $options, 0, "mk_options_custom_settings", "Custom Settings", "some descripiton" ); return $options; }
add_filter('mk_jupiter_theme_options_settings', 'mk_add_custom_sub_menu_settings_page');
// ----------------------------------------------------
function mk_add_custom_settings( $options )
{ $settings = array( "name" => __("Portfolio Archive Layout 2", "mk_framework") , "desc" => __("This option allows you to define the layout of Portfolio Archive page as full width without sidebar, left sidebar or right sidebar.", "mk_framework") , "id" => "archive_portfolio_layout_2", "default" => "right", "options" => array( "left" => __("Left Sidebar", "mk_framework") , "right" => __("Right Sidebar", "mk_framework") , "full" => __("Full Layout", "mk_framework") ) , "type" => "dropdown" ); $options = mk_theme_options_add_settings( $options, 0, 9, $settings ); return $options; }
add_filter('mk_jupiter_theme_options_settings', 'mk_add_custom_settings');
//------------------------------------

Here we added sub menu Custom Settings, option page Portfolio Archive Layout 2 and options Full Layout, Left Sidebar, Right Sidebar.

Checking Theme Options in WP Dashboard

Now you can check the result of your customization in the Theme Options of WP Dashboard. As you can see in the screenshot the Custom Settings submenu appeared  in General section of Theme Options.

You can create other options using the code in the example above.

Did this answer your question?