{P.S.}

Postscript: A WordPress plugin for data visualization and multimedia

Postscript is a new plugin for journalists who create interactive and multimedia presentations in WordPress. It lets users:

  • Add JavaScript files and style sheets for individual posts.
  • Track which posts use which script/style files.
  • Optimize file loading for better page performance.

The old way: sitewide slow or spaghetti code cluttered

Many WordPress sites load scripts and styles on every page just so a few posts can use them. Or they jam “spaghetti code” (see image below) into a post’s content to get the files to load. Both of these practices hurt website performance. Postscript makes both obsolete.

Cluttered post content box before using Postscript plugin
Cluttered post content box before using Postscript plugin
Clean post content box after using Postscript plugin
Clean post content box after using Postscript plugin
Use Postscript box to load scripts and styles
Use Postscript box to load scripts and styles

The Postscript way: fast and clean

Postscript lets users choose specific files for a specific post. It uses WordPress “enqueuing” to optimize file loads and dependencies, and prevents a file from loading twice.

Administrators control which users and post types can use the plugin (including custom post types) and which files list in the plugin’s checkboxes. Postscript also allows users to add CSS class-names to a post’s HTML body tag and to the WordPress post class.

Postscript is designed for small- to mid-size publications, especially those without a team of programmers to code interactive, data visualization, and multimedia pages. To get the most from it, users should know how to register scripts in WordPress.

An example: data visualization

You’re building an interactive chart and map using JavaScript libraries, your own custom scripts and styles, an icon font, and
a data file (JSON).

Use the Postscript checkboxes, pictured at right, to select the required font (e.g., font-awesome) and libraries (e.g., d3, open-layers). Note: Only registered script/styles can have checkboxes. Next, use the URL fields to enter custom script, style, and data files.

Postscript then loads your selected files efficiently: CSS in the document head and JavaScript in the footer. After using Postscript, data visualizations at Headwaters Economics loaded up to 20 percent faster.

Headwaters Economic interactive: Benefits of National Parks
Headwaters Economic interactive: Benefits of National Parks

For a complete how-to, and to see Postscript in action, go to the plugin’s home on the Hearing Voices public radio site.

This plugin is part of the Storytelling Tools, my fellowship project at the Donald W. Reynolds Journalism Institute, which involved researching news website performance and journalists’ digital workflow.

Please download Postscript, give it a try and tell us what you think. How can we make it better? What features would you like to add? Has using Postscript resulted in page-performance improvements at your site?

Related Stories

Expand All Collapse All
Comments

Comments are closed.