Adding Custom Settings to Theme Options

Last Updated on

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.

In this article


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:

1
Connect 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.

2
Access the directory below:

wp-content > themes > jupiter-child

3
Create 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.

x
Magic: The important point of this method is that your changes will be safe, it will not be deleted after the theme update.

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.

 

If you experience any difficulties, submit a ticket to our support staff.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket