![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/10\/dashboard.jpg\")
<\/a>A Basic Dashboard Widget<\/h2>\n
The anatomy of a dashboard widget is extremely simple. First you need to use the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Before I break that down, don’t forget that this should be placed in a plugin. If you want to test this real quick you can also get away with adding it to your theme’s The first step is to hook a function into The second step is creating the display function In some situations, you may want to show important information or functionality at the top of your dashboard. WordPress doesn’t have a great API for handling this, but with some fiddling around you can get it done. We’ll need to add some extra code into our registration function, here’s the full code for an example widget.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Seven additional lines for a simple rearranging is a bit much but since no other method is available, this will have to do. The first step is to globalize the The next step is to grab our registered widget from the array of widgets. This is stored in the The next step is to merge the contents of The main way you can enhance dashboard widgets is by creating some nice styles or applying some Javascript functionality. Let’s create a widget that shows the number of comments our website has received each week for the past five weeks. This will be a simplified example, a proof of concept if you will.<\/p>\n We’ll be building the example above with CSS only, no Javascript required. To get it done we will use the following HTML structure:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n It will be styled using a CSS file and also some inline CSS which will take care of the heights and widths for us.<\/p>\n The height of the whole container ( The stylesheet is added in the usual fashion, by enqueueing it:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Note that we check the value of the The content of the stylesheet itself is the following, the remaining few styles will be added inline.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Instead of grabbing comment counts, let’s work with an array of numbers similar to what we will end up with in the end:<\/p>\n This array represents the comments we received each week for the past 5 weeks. So based on this, how do we figure out the bar dimensions. Let’s start with width since it’s easier.<\/p>\n In the stylesheet we’ve added a 1% margin to each side of the bars. This means that for each bar we have, we have 2% less space available to divide between the bars. So if we use 100% as the total width we can figure out the percentage width of one bar like this:<\/p>\n On to the height! The bar with the highest value will always be set to fill out the whole height of the container. In our example, the third bar (with the value of 40) is the largest so it will be the maximum height of 120px. Whenever a bar is smaller we add a top margin to it.<\/p>\n Exactly how much top margin is added depends on ratio between the size of a bar and the largest bar in the set. In our example the first bar is exactly half the size of the third bar. Therefore we would need to add a 60px top margin, exactly half of the maximum 120px. Here’s how this looks in code:<\/p>\n If we put everything we’ve done together we’ll end up with a nice little bar chart, although the numbers are hard coded in. Let’s take a look!<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The last step is grabbing the comment counts dynamically. Unfortunately, WordPress does not have a function for this so we’ll need to write our own little query. The version below is quick and dirty but will work. Simply replace the array with the following:<\/p>\nwp_add_dashboard_widget()<\/code> function to register it with WordPress. Then you create a function which handles the content display. Here’s the template code you can use to create one quickly.<\/p>\nfunctions.php<\/code> file.<\/p>\nwp_dashboard_setup<\/code>. The contents of this function is a simple call to wp_add_dashboard_widget()<\/code> with three parameters:<\/p>\n\n
my_dashboard_widget_display()<\/code> and filling it with content.<\/p>\nForcing Widgets to the Top<\/h2>\n
$wp_meta_boxes<\/code> variable which contains information about all registered widgets. To make things easier on the eyes I’ve separated out the widgets which are displayed on the dashboard into the $dashboard<\/code> variable.<\/p>\n$my_widget<\/code> variable because we need to unset it in the next line and then re-add it.<\/p>\n$my_widget<\/code> and $dashboard<\/code>. The array_merge()<\/code> function appends the second array to the first so our widget will now be the first one in the new $sorted_dashboard<\/code> array. The last step is to replace the original dashboard array with our new sorted one.<\/p>\nAdding Functionality<\/h2>\n
<\/a>HTML Structure<\/h3>\n
Styling the Bars<\/h3>\n
.comment-stat-bars<\/code>) is a fixed 120px high. The bars themselves are actually also 120px hight. The seemingly different heights are achieved by adding a top border height. This ensures that the bars start from the bottom and by setting the overflow:hidden<\/code> on the container we can hide the unwanted bits.<\/p>\n$hook<\/code> variable to make sure the style is only used on the dashboard page, there really is no need for it anywhere else. If you’re adding the code to your theme’s functions file you’ll want to use get_template_directory_uri()<\/code> instead of plugins_uri()<\/code>.<\/p>\nCalculating Heights<\/h3>\n
\r\n$comment_counts = array( 20, 29, 40, 33, 17 );\r\n<\/pre>\n
\r\n\/\/ ( 100 \/ number of bars ) - 2\r\n$data_points = count( $comment_counts );\r\n$bar_width = 100 \/ $data_points - 2\r\n<\/pre>\n
\r\n$highest_value = max( $comment_counts );\r\nforeach( $comment_counts as $count ) :\r\n\t$count_percentage = $count\/$highest_value;\r\n\t$bar_height = $total_height * $count_percentage;\r\n\t$border_width = $total_height - $bar_height;\r\n}\r\n<\/pre>\n
Displaying A Static Graph<\/h3>\n
Pulling Comment Counts<\/h3>\n