Probably you would have seen theme
options page in WordPress theme. It is good to have this page because
it improves the usability and accessibility. You can modify the theme
with the help of options provided in theme options page without
changing theme files.
Most themes come with the options page.
While creating your own, you can add as many options as you need like
background color, fonts and more other options which can help you to
modify the look of the theme.
Here we will discuss basics of theme
options page, so you can easily understand and create page with your
own options.
You can do all the coding inside
theme’s function file, so let’s open functions.php.
Here in first step you need to create
menu for options page in the admin. I will create this menu under
appearance. To create menu you have to decide the place where it
need to display. Create a function that have a code for menu.
function option_menu() {
add_theme_page( 'Options page',
'Options', 'edit_theme_options ', 'option_page', 'options_list' );
}
This function will add a menu with
name “Options”.
Highlists on arguments for
add_theme_page function.
options page – It is a title of the
page.
options – It is a menu name, will
display under appeareance.
edit_theme_options = Capability for the
user.
option_page = It is a slug, you will
see this in urls
(www.websites.com/wp-admin/themes.php?page=option_page) .
option_list – Callback function for
output the content (Options).
In second step you need to register the
above function under admin_menu hook.
add_action( 'admin_menu', 'option_menu'
);
Now in third step we will define
callback function option_list.
function options_list()
{
}
Inside this function you have to create
a form.
<form method="post"
action="options.php">
Open a form tag and add below two
functions after this.
settings_fields( 'myoption-group' );
do_settings_sections( 'myoption-group'
);
Now add the submit button and close the
form.
<?php submit_button(); ?>
</form>
At this moment form is blank, you need to add some fields of your choice like below.
<form method="post"
action="options.php">
<?php
settings_fields( 'myoption-group' );
do_settings_sections( 'myoption-group'
);
?>
<input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" />
<?php submit_button(); ?>
</form>
I have added only one field here you can add more fields of your choice.
Now then you need to register the setting for form fields. To do this create a function and add the code for register setting. It generate the setting page.
function register_mysettings() { // whitelist options
register_setting( 'myoption-group', 'new_option_name' );
}
register_setting( 'myoption-group', 'new_option_name' );
}
Then you need to register this function with admin_init hook.
add_action( 'admin_init', 'register_mysettings' );
Now look at the name of the form field name="new_option_name", as you can see this is assigned to myoption-group to register this field and this group set with the help settings_fields and do_settings_sections functions. So the name(myoption-group) should be the same for register_setting and for these two functions.
Here I have added a text field in the form and now i need to display it in the theme somewhere. So need to call the bellow function somewhere in the template file where you want to display the option, here i will show it in the top of the sidebar.
echo $options = get_option('new_option_name');
The argument for this function is the name of the form field.
If you want to add some more options then you need to add more fields inside the form with the same format but with different field name for example option for background color of the theme.
<form method="post"
action="options.php">
<?php
settings_fields( 'myoption-group' );
do_settings_sections( 'myoption-group'
);
?>
<input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" />
<input type="text" name="background-color" value="<?php echo get_option('background-color'); ?>" />
<?php submit_button(); ?>
</form>
Now need to register this field.
function register_mysettings() { // whitelist options
register_setting( 'myoption-group', 'new_option_name' );
register_setting( 'myoption-group', 'new_option_name' );
register_setting( 'myoption-group', 'background-color' );
}
}
How will you apply this in the theme?
Simply call the get_option function in body tag. You can add conditional tag if the options are blank so they will not give any error.
All in all these all are the fundamentals of the option page and with the help of this you can add your own option page in your theme easily.
0 Comment