It often happens that you have various pieces of information that appear multiple times on a website. These are often contact details such as the address, email address, or phone number of a company. When these pieces of information change, it can become difficult to update all parts of the website.
But there is a simple solution to this problem: an “Options” page where you can manage this data. In this article, you will learn how to easily integrate an options page into your WordPress site.
The end result looks something like this:
1. What data do you need?
At the beginning, make a shortlist of the information you want to manage on your options page. Typically, this includes data such as email address, phone number, or address. This list is important so that you don’t forget any data later on.
2. Open the functions.php file or create a plugin
Tip: If you encounter any issues editing the functions.php file, take a look at my blog article about this important file! Edit the appropriate functions.php file - you can find information on the appropriate file in the mentioned blog article, but here’s the info again:
- If you developed the theme you are using, you can directly edit the functions.php file of that theme.
- If you are using a child theme, you can use the functions.php of the child theme.
- If you want the options page to be independent of your theme, it’s best to implement the code in a plugin.
- You can also use a plugin to insert the code without editing the themes or setting up a custom plugin.
3. Implement the code
Now it’s time to implement the code that makes the options page possible.
First, you need to register the options in the database:
function register_gcf_settings() {
register_setting( 'gcf-group', 'gcf_telefon' );
register_setting( 'gcf-group', 'gcf_firmenname' );
register_setting( 'gcf-group', 'gcf_adresse' );
register_setting( 'gcf-group', 'gcf_email' );
register_setting( 'gcf-group', 'gcf_fax' );
}Next, you need to tell WordPress to execute this code:
add_action("admin_init", "register_gcf_settings");Now you can implement the frontend of the page:
function global_custom_fields_settings_page() {
?>
<div class="wrap">
<h1>Company Data</h1>
<form method="post" action="options.php">
<?php settings_fields( 'gcf-group' );?>
<?php do_settings_sections( 'gcf-group' );?>
<table class="form-table">
<tr valign="top">
<th scope="row">Company Name</th>
<td><input type="text" name="gcf_firmenname" value="<?php echo esc_attr( get_option('gcf_firmenname') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Address</th>
<td><input type="text" name="gcf_adresse" value="<?php echo esc_attr( get_option('gcf_adresse') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Phone Number</th>
<td><input type="text" name="gcf_telefon" value="<?php echo esc_attr( get_option('gcf_telefon') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Email Address</th>
<td><input type="text" name="gcf_email" value="<?php echo esc_attr( get_option('gcf_email') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Fax</th>
<td><input type="text" name="gcf_fax" value="<?php echo esc_attr( get_option('gcf_fax') ); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}Feel free to experiment with this page if you want to make any changes. I’m confident that you will quickly learn how to modify various elements! You will also find very helpful articles on the official WordPress site. If you encounter any problems or need further assistance, feel free to reach out to me.
Finally, you need to add the page as a menu item in the WordPress admin area:
function setup_theme_admin_menus() {
add_menu_page( 'Company Data', 'Company Data', 'manage_options', 'gcf-companydata', 'global_custom_fields_settings_page', 'dashicons-building');
}
add_action("admin_menu", "setup_theme_admin_menus");Here’s the entire code again:
function register_gcf_settings() {
register_setting( 'gcf-group', 'gcf_telefon' );
register_setting( 'gcf-group', 'gcf_firmenname' );
register_setting( 'gcf-group', 'gcf_adresse' );
register_setting( 'gcf-group', 'gcf_email' );
register_setting( 'gcf-group', 'gcf_fax' );
}
function global_custom_fields_settings_page() {
?>
<div class="wrap">
<h1>Company Data</h1>
<form method="post" action="options.php">
<?php settings_fields( 'gcf-group' );?>
<?php do_settings_sections( 'gcf-group' );?>
<table class="form-table">
<tr valign="top">
<th scope="row">Company Name</th>
<td><input type="text" name="gcf_firmenname" value="<?php echo esc_attr( get_option('gcf_firmenname') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Address</th>
<td><input type="text" name="gcf_adresse" value="<?php echo esc_attr( get_option('gcf_adresse') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Phone Number</th>
<td><input type="text" name="gcf_telefon" value="<?php echo esc_attr( get_option('gcf_telefon') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Email Address</th>
<td><input type="text" name="gcf_email" value="<?php echo esc_attr( get_option('gcf_email') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Fax</th>
<td><input type="text" name="gcf_fax" value="<?php echo esc_attr( get_option('gcf_fax') ); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
function setup_theme_admin_menus() {
add_menu_page( 'Company Data', 'Company Data', 'manage_options', 'gcf-companydata', 'global_custom_fields_settings_page', 'dashicons-building');
}
add_action("admin_init", "register_gcf_settings");
add_action("admin_menu", "setup_theme_admin_menus");If you’ve inserted this code at the right place, you now have a working options page! Congratulations!
Shortcode for reading the data
Now that you know how to easily build your own options page, how do you use the data on your website? The best way is through a shortcode!
You just need to add a short code snippet:
function get_option_shortcode($atts) {
$atts = shortcode_atts(array(
'name' => '',
), $atts);
if (empty($atts['name'])) {
return 'Please provide the name of the option.';
}
$option_value = get_option($atts['name']);
return $option_value;
}
add_shortcode('get_option_value', 'get_option_shortcode');Now you can use the filled data anywhere on your website. To display the phone number, for example, use the shortcode like this:
[get_option_value name="gcf_telefon”]You just enter the “name” of the field. Have fun with it!
Conclusion
Thank you for reading this article! Please let me know if you have any further questions. I also welcome feedback! Enjoy your new WordPress options page.