Admin Panel Widget

One of my first pieces of code to test out the ScriptManager plugin was to put a Google Maps image of our church here in Tak, Thailand in the admin panel. Since I already had the code for the Google Maps image, creating the widget was very easy. Let me show you how.

First, create an HTML script called ‘googlemap’. Go to Google Maps and get the code for displaying the map of your area. It is the icon to the left of the map that looks like chain links. When you click that, it will give you a short url and the HTML code to past into your web site. Copy that HTML code into your new HTML script called ‘googlemap’.

Now, create an WordPress Action called ‘wp_dashboard_setup’. In this Action, place the following code:


This is the Script Manager Dashboard Widget.

"; // // You can insert any other Script Manager code in the section bellow. // ?> [CodeInsert lang='HTML' name='googlemap' param='']

After you save the code and go to your admin panel, you will see the new widget at the bottom. You will have to play around with the ‘googlemap’ HTML to get the size down to fit in the column.

Everything that is in lines 6-16 generates the contents of your admin panel widget. Notice how the ‘googlemap’ HTML script is imbedded into the function. You can place any script you create in ScriptManage in the panel in like manner.

Notice the ‘wp_add_dashboard_widget()’ function. This WordPress function does all the work. It creates a div with the classes and styling needed to make an admin panel widget. It then uses the function, ‘ScriptManager_dashboard_widget_function’, that you made to insert the contents into the panel.

Creating your own admin panel widget is that simple. Take this beginning and create whatever you want.

comments powered by Disqus