Custom WordPress Dashboard Widgets with Configurable Content

After working with WordPress dashboard widgets in a recent project I wanted to present a complete example with arguments and usage of the control callback for saving widget options. Using the code in the Gist below you will be able to configure custom content for this widget with the native WYSIWYG editor. When you hover over the widget’s title bar the “Configure” link will be revealed – you must be an Administrator to configure the widget.

custom-dashboard-widget-01

Widget Display

custom-dashboard-widget-02

Widget Configuration

There are couple of special things to note. The first is the workaround to enable the autoembed functions for content output (lines 12-16). The dashboard has no post ID and without a post ID that evaluates to true autoembed will fail to do its job. The second thing to note is code to set the widget priority (lines 81-85). However, once a user manually positions a dashboard widget this code is no longer effective.

You may find this code useful for developing a “getting started” widget to help users use custom WordPress admin features you’ve developed.

EventDispatcher Component Usage Example

As I was browsing through Composer packages on Packagist I came across the EventDispatcher component from the Symfony framework, which can be used independent of Symfony (I believe all components of Symfony are now modular).

The EventDispatcher component allows you to adopt the observer pattern – events/listeners, events/observers (Magento and others), actions/hooks (WordPress), etc. They all follow the same basic pattern but have different implementations.

Once you run composer require symfony/event-dispatcher in your project’s directory you’ll be ready to try it out. If you’re not familiar with Composer, get acquainted now. I don’t think we’d be having a PHP revolution without it.

I’ve put together a simple but complete example of how it can be used in the following Gist:

Note: Adjust the path to autoload.php as needed.

Loose comparisons with ==

My ZCE studies didn’t expose me to these edge cases, well except for the first one.

If you use == watch out for these and related:

<?php
echo ((0 == 'hello') ? 'true' : 'false').PHP_EOL; //true
echo ((0 == '1hello') ? 'true' : 'false').PHP_EOL; //false
echo (('0' == '0e0') ? 'true' : 'false').PHP_EOL; //true
echo (('0' == '0e0e') ? 'true' : 'false').PHP_EOL; //false
echo (('0' == '0ee') ? 'true' : 'false').PHP_EOL; //false
echo ((0 == '0x0') ? 'true' : 'false').PHP_EOL; //true
echo ((0 == '0x0x') ? 'true' : 'false').PHP_EOL; //true
echo ((0 == '0x0b') ? 'true' : 'false').PHP_EOL; //false
?>

Whoa, we don’t want any of these to return true, what’s a developer to do?

Strict comparisons with ===

<?php
echo ((0 === 'hello') ? 'true' : 'false').PHP_EOL; //false
echo ((0 === '1hello') ? 'true' : 'false').PHP_EOL; //false
echo (('0' === '0e0') ? 'true' : 'false').PHP_EOL; //false
echo (('0' === '0e0e') ? 'true' : 'false').PHP_EOL; //false
echo (('0' === '0ee') ? 'true' : 'false').PHP_EOL; //false
echo ((0 === '0x0') ? 'true' : 'false').PHP_EOL; //false
echo ((0 === '0x0x') ? 'true' : 'false').PHP_EOL; //false
echo ((0 === '0x0b') ? 'true' : 'false').PHP_EOL; //false
?>

Much better.

Learn more at http://php.net/manual/en/types.comparisons.php

Escape HTML Function for Browser Output Prevents XSS (Cross-Site Scripting)

I don’t know about you but my fingers get tired of escaping output by typing the long-winded htmlspecialchars($str, ENT_QUOTES, 'UTF-8'); over and over again in small PHP projects that don’t need a full-blown framework with automatic output filtering (e.g. CodeIgniter). No matter how small your project is though filtering your output is extremely important so that you prevent malicious users from executing XSS (Cross-Site Scripting) JavaScript code.

So I decided to give my fingers some relief and finally write a short little helper function and share it. See the code and example in the gist below.