Delivering Widgets to WordPress Sites

If you make a widget coded with HTML and CSS, the widget can be delivered to most WordPress websites. (Widgets are displayed on WordPress posts and pages in the navigation and footer sections of the web page.)

If you already have a widget, I'll show you how to deliver it. If you don't have one, the article contains a widget you can practice with.

Your widget may be used to present (as examples):

• The local temperature.
• A short poem of the day.
• The latest news (of any category).
• A song or other sound track of the day.
• A video of the day.
• An ad.
• A subscription form.
• A cartoon of the day.

The widget is either constructed by you or obtained from somewhere. So long as the widget delivered to other websites is composed of nothing more than HTML and inline CSS, the system in this article can be used for the delivery.

This article provides information and code you need to deliver your widget to WordPress sites.

How it Works

On your server, you have a widget for WordPress websites.

A PHP script on your server is designed to pull in your widget file, then send it to whatever website asked for it.

Interested site owners and managers paste code you provide into their WordPress dashboard to display your widget.

The Widget

Widgets can be pretty much anything, so long as they are created with HTML and CSS. For CSS, inline CSS can be used.

Until you construct your own widget, you can use the one below. Or continue using it, if you would like. It delivers the current Greenwich Mean Time on the WordPress page.

Here is example output.

And here is the code of the widget. It determines what to display in the widget on the WordPress page.

<div style="
   display:table; 
   border:3px solid #ccc; 
   border-radius:.5em; 
   padding:.5em;
   margin:0 auto;">
Greenwich Mean Time: 
<?php echo(gmdate('l, F j, Y \a\t H:i:s')); ?>
</div>

You'll notice that the widget has PHP code embedded within it. This is allowed because the PHP code runs before the widget is delivered to the WordPress website. The PHP helps to construct the widget.

Upload your widget to your server. The file on the server needs to end with .php if the widget uses PHP. Otherwise, any valid file name extension for web pages is allowed, such as *.html or *.htm. (The following instructions assume you named it nice-widget.php

When uploaded, make a note of the widget code's URL.

The PHP Script to Deliver the Widget

Now, with the widget uploaded to your server, let's upload the PHP script that will deliver the widget to WordPress posts and pages that request it.

Here is the source code. The one customization is addressed below.

<?php
$WidgetURL = 'https://example.com/nice-widget.php';
header('Access-Control-Allow-Origin: *');
echo file_get_contents($WidgetURL);
?>

In the above code, replace https://example.com/nice-widget.php with the URL to your widget code file.

Name the PHP script deliver-widget.php (or other *.php file name) and upload it to your server. Make a note of its URL.

The Code for the WordPress Website

Below is the code that is pasted in to create a Widget through the WordPress dashboard.

<div id="__my-special-widget-container"></div>
<script type="text/javascript">
var divID = "__my-special-widget-container";
var url = "https://example.com/deliver-widget.php>";
var http = new XMLHttpRequest();
if(http)
{
   http.onreadystatechange = function()
   { 
      if(http.readyState == 4 && http.status == 200) 
      { document.getElementById(divID).innerHTML=http.responseText; }
   }
   http.open("GET",url,true);
   http.send();
}
</script>

In the above code, replace https://example.com/deliver-widget.php with the URL to the PHP script on your server that will deliver the widget to WordPress websites.

The __my-special-widget-container value must be consistent in both places — the div id value and the value of the JavaScript variable divID. (Note that the id value must be unique to the web page it appears on. Using two underline characters as the beginning of the id value makes it very likely to be unique on whatever website your code ends up on.)

When the edits are made, the code is ready for WordPress owners to add your widget to their web page navigation or footer widget areas.

Test the code before giving it away, though, by adding it to your own WordPress site.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager