How to add WordPress Dashboard Widget with Custom Options / Fields – WP Dashboard API
In this tutorial, you will learn how to create a custom dashboard widget using the Dashboard API and we are also going to add a few custom options/fields so you can easily update your website details with ease.
The first thing that you need to do is to Open your WordPress Theme files in your favourite editor. To keep it simple, locate your functions.php file and this is where we will add the following code.
<?PHP
// Custom Dashboard Widget
add_action('wp_dashboard_setup', 'custom_dashboard_widget_contact_details');
function custom_dashboard_widget_contact_details(){
if (current_user_can('manage_options')) {
wp_add_dashboard_widget('custom_contact_widget', 'Contact Details', 'custom_dashboard_contact');
}
}
// Display Form
if(!function_exists('custom_dashboard_contact')) {
function custom_dashboard_contact() { ?>
<div class="wrap">
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>
<table>
<tr>
<th scope="row" width="120" align="left" valign="top">Phone Number:</th>
<td>
<input type="text" name="phone_number" size="255" value='<?php echo get_option('phone_number');?>' style="width:100%" />
</td>
</tr>
<tr>
<th scope="row" width="120" align="left" valign="top">Email Address:</th>
<td>
<input type="text" name="email_address" size="255" value='<?php echo get_option('email_address');?>' style="width:100%" />
</td>
</tr>
</table>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="phone_number, email_address" />
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
<?php }
}That should get you going. By now you should have your Dashboard Widget on the Admin Dashboard of your WordPress website. If you would like to know what each function does, please watch the full video above.
Now let’s display the custom options that we created (Phone Number and Email Address) on your website. Find the place where you want to display the options and add the following code.
// Echo the Phone Number
<?php echo get_option('phone_number'); ?>
// Echo the Email Address
<a href="mailto:<?php echo get_option('email_address'); ?>"><?php echo get_option('email_address'); ?></a>That’s it! This code should get you started developing your custom WordPress dashboard widget.
One last thing, in the video I mentioned that you might want to strip the HTML Entities. Here is an example of how you can do that:
<?php echo htmlentities(get_option('phone_number')); ?> Thank for reading or watching this tutorial. It would be awesome if you could subscribe to my YouTube Channel.
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
