Home  //  Blog  //  WordPress Functions  //  How to Add and Style Custom Modules on the WordPress Dashboard

How to Add and Style Custom Modules on the WordPress Dashboard

Posted on July 25, 2010 in WordPress Functions

Wouldn’t it be nice to have the ability to add new custom module on the dashboard in your WordPress builds? The following code will do just that, simply add it to your functions.php file and add whatever you want within the echo and voila!

// Create the function to output the contents of our Dashboard Widget
function example_dashboard_widget_function() {
 
	// Display whatever it is you want to show
	echo ' INSERT SOMETHING HERE ';
} 
 
// Create the function use in the action hook
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'Site Documentation', 'example_dashboard_widget_function');
} 
 
// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

In the following example I have created a 2 column table with inline styles that features an unordered list that I normally use to create a tutorials and documentation module for each of my clients.

// Create the function to output the contents of our Dashboard Widget
function example_dashboard_widget_function() {
 
	// Display whatever it is you want to show
	echo '
<div id="docs-left" style="float:left;width:48%;">
<p style="font-size:12px;font-weight:bold;margin-top:0;color:#333333">Basic Tutorials
<ul style="padding: 0 0 0 18px">
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 1</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 2</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 3</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Basic Tutorial 4</a>
<li>
		</ul>
</div>
<div id="docs-right" style="float:right;width:48%;">
<p style="font-size:12px;font-weight:bold;margin-top:0;color:#333333">Advanced Tutorials
<ul style="padding: 0 0 0 18px">
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 1</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 2</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 3</a>
<li>
<li style="list-style-type:disc"><a href="#" target="_blank">Advanced Tutorial 4</a>
<li>
		</ul>
</div>
<div style="clear:both"></div>
 
	';
} 
 
// Create the function use in the action hook
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'Site Documentation', 'example_dashboard_widget_function');
} 
 
// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

Let's Get Social

Use these icons to share this post with friends and colleagues on various social media avenues.

Seems that there are no comments on this post yet. Be the first to have your say!

Submit Your Comment

Please leave a comment by filling out the form below. Comment must be approved before it becomes visible.

Your Comment

Note: You may use these HTML tags and attributes within your comment: <a href="" title="">, <em>, <strong>. To start a new paragraph, make sure you have a full line space between them using two returns.

© Troy Chaplin 2010  //  Site built using a Macbook Pro, Coda and Photoshop and is proudly powered by WordPress