Timed Content Plugin

The Timed Content plugin allows users to specify that a portion of a Page or Post should appear/be visible or disappear/be invisible based on given time characteristics. Suppose, for example, you embed a video into a Post; once the viewer has enough information from the video, the request to take a specific action can be set to appear. You can also make portions of a Post or Page be visible at certain dates and times; you can even set up a schedule!

The plugin adds the following:

  • A "client-side" shortcode that allows the marking of content to appear or disappear after a given time interval; a "fade" effect is included. This functionality is intended to be used for special effects only, as content marked in this manner is still visible in the HTML source and, therefore, not a secure method of hiding content.
  • Two "server-side" shortcodes that allow the marking of content to be visible only during specified date/time intervals. This functionality can be used as a secure method of hiding content, because the marked content will be included in the Page/Post only when viewed in the specified date/time intervals.

A TinyMCE dialog is included to help users build the shortcodes. See the Screenshots tab for more info.

Download

Download from WordPress

Installation

Note: XXX refers to the current version release.

Automatic method

  1. Click 'Add New' on the 'Plugins' page.
  2. Upload timed-content-XXX.zip using the file uploader on the page

Manual method

  1. Unzip timed-content-XXX.zip and upload the timed-content folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the 'Plugins' menu in WordPress

Examples

[timed-content-client show="1:00"]Show me after one minute.  Since we don't want a fade-in, we can leave it out of the "show" attribute completely.[/timed-content-client]
[timed-content-client show="1:00:1000"]Show me after one minute with a 1000 millisecond (1 second) fade-in.[/timed-content-client]
[timed-content-client hide="1:00:1000"]Hide me after one minute with a 1000 millisecond (1 second) fade-out.[/timed-content-client]
[timed-content-client show="1:00:500" hide="5:00:2000"]Show me after one minute with a 500 millisecond (a half-second) fade-in, then hide me after five minutes with a 2000 millisecond (2 seconds) fade-out.[/timed-content-client]
[timed-content-server show="2013-Sep-13 20:30:00 -0600"]Show me starting at 8:30 PM Central Standard Time on September 13th, 2013. I will not be displayed before then.[/timed-content-server]
[timed-content-server hide="2013-Sep-13 20:30:00 America/Chicago"]Hide me starting at 8:30 PM Central Daylight Time (i.e., the same timezone as Chicago) on September 13th, 2013.  I will not be displayed after then[/timed-content-server]
[timed-content-server show="2013-Sep-13 20:30:00 -0600" hide="2013-Sep-13 21:30:00 -0600"]Show me starting at 8:30 PM Central Standard Time on September 13th, 2013, then hide me an hour later. I will not be displayed before or after then.[/timed-content-server]
[timed-content-rule id="164"]Display me based on the settings for the Timed Content Rule whoseID is 164.[/timed-content-rule]

Usage

NOTE: All shortcodes can be built using the TinyMCE dialog. When in doubt, use the dialog to create correctly formed shortcodes.

The timed-content-client shortcode

[timed-content-client show="mm:ss:fff" hide="mm:ss:fff"]Example Text[/timed-content-client]
  • show - Specifies the time interval after loading the web page when the marked content should be displayed. The attribute consists of three parts, separated by colons: mm - minutes, ss - seconds, and fff - if greater than 0, a fade-in effect lasting fff milliseconds is applied.
  • hide - Specifies the time interval after loading the web page when the marked content should be hidden. The attribute consists of three parts, separated by colons: mm - minutes, ss - seconds, and fff - if greater than 0, a fade-out effect lasting fff milliseconds is applied.

Both attributes are optional, but at least one attribute must be included. Leading zeros (0) are optional. The shortcode's behaviour depends on which attributes are used:

  • show only - Marked content is initially not visible, then appears mm minutes and ss seconds after loading with a fff millisecond fade-in.
  • hide only - Marked content is initially visible, then disappears mm minutes and ss seconds after loading with a fff millisecond fade-out.
  • show and hide - Marked content is initially not visible, then appears according to the values set in show, then disappears according to the values set in hide.

Your users must have JavaScript enabled for this shortcode to work.

The timed-content-server shortcode

[timed-content-server show="datetime" hide="datetime" debug="true|false"]Example Text[/timed-content-server]
  • show - Specifies the date/time when the marked content should start being included on the web page. The attribute consists of datetime - a human-readable date/time description. The plugin uses PHP's strtotime function to process dates/times, so anything it can understand can be used.
  • hide - Specifies the date/time after which the marked content should stop being included on the web page. The attribute consists of datetime - a human-readable date/time description. The plugin uses PHP's strtotime function to process dates/times, so anything it can understand can be used.
  • debug - If true, adds some debugging statements to the web page as HTML comments. Defaults to false.

Both show and hide attributes are optional, but at least one attribute must be included. The shortcode's behaviour depends on which attributes are used:

  • show only - Marked content is outputted only after the date/time set here.
  • hide only - Marked content is outputted only before the date/time set here.
  • show and hide - Marked content is outputted only during the time period defined by the show and hide attributes.

The timed-content-rule shortcode

[timed-content-rule id="rule_id"]Example Text[/timed-content-rule]

You can find the correct shortcode from the Timed Content Rules overview page, or use the TinyMCE dialog.

Screenshots

  1. timed-content screenshot 1

    An example showing use of the [timed-content-client] shortcode. The "alarm clock" button on the editor menubar brings up a dialog box to help build the Timed Content shortcodes. All of the Admin-side screenshots are from WordPress 3.7, but the functionality is the same for 3.8.

  2. timed-content screenshot 10

    An example showing use of the [timed-content-server] shortcode with debug set to true. You'll only see it if you're logged in and it's on a Page/Post you can edit (Your regular visitors won't see this at all).

  3. timed-content screenshot 2

    The "Add Timed Content shortcode" dialog showing the Client tab. Check the attribute you want to add and fill in the textboxes.

  4. timed-content screenshot 3

    The "Add Timed Content shortcode" dialog showing the Server tab. Check the attribute you want to add, then click on the Date and Time textboxes.

  5. timed-content screenshot 4

    The date and time pickers help you format a correct date and time. Here's the jQuery UI Datepicker in action.

  6. timed-content screenshot 5

    The "Add Timed Content shortcode" dialog showing the Timed Content Rules tab.

  7. timed-content screenshot 6

    You can use both shortcodes together and with other shortcodes supported by your WordPress installation.

  8. timed-content screenshot 7

    The Timed Content Rules overview page. Timed Content Rules allow you to set up a schedule for showing/hiding your content.

  9. timed-content screenshot 8

    Editing a Timed Content Rule. Here, you can see the jQuery UI Timepicker in action.

  10. timed-content screenshot 9

    Check the Scheduled Dates/Times to verify when your rule will be active.

Changelog

2.2

  • Much improved I18N
  • New Spanish translation - Many thanks to Andrew Kurtis and Jelena Kovacevic from WebHostingHub (Nueva traducción de español - Muchas gracias a Andrew Kurtis y Jelena Kovacevic desde WebHostingHub)

2.1.5

  • Unified dashicons among all of my plugins.
  • Minor improvements in TinyMCE dialog UI and Date/Time UI controls

2.1.4

  • Fixed TinyMCE editor button for TinyMCE 4.x

2.1.3

  • Removed support for PHP4 in customFieldsInterface.php.
  • Fixed WordPress version check for deciding which image to use for TinyMCE button.
  • Fixed "Strict Standards" warning in PHP 5.4 in __getNextWeek()

2.1.2

  • Dashicons support for WP 3.8 + added. Support for old-style icons in Admin/TinyMCE is deprecated.
  • Added versioning to all wp_enqueue_style() calls.

2.1.1

  • CSS for JQuery UI now loaded locally as required by WordPress plugin repository rules
  • Improved UX on TinyMCE dialog and Timed Content Rules detail page

2.1

  • Fixed inconsistency in how the days of week to repeat on were being set up between the front and back ends
  • Fixed variable scope bug that occurred on activation
  • Improved i18n

2.0

  • Added Timed Content Rules.
  • Replaced AnyTime plugin with jQuery UI Timepicker (http://fgelinas.com/code/timepicker) and WordPress's internal jQuery UI Datepicker
  • HTML code created by [timed-content-client] can now either be enclosed in either <div> or <span> tags
  • Debugging statements for [timed-content-server] now displayed on Post/Page (only if logged in and have the rights to edit that Post/Page - no more digging into the HTML source)
  • Improved code documentation

1.2

  • Upgraded AnyTime jQuery plugin
  • timed-content.js is now always loaded (Size > 1KB, so not a lot of extra overhead); fixes bug when multiple/nested shortcodes are used

1.1

  • Fixed some internal filename discrepancies.

1.0

  • Initial release.

Search Our Site

Client Website Showcase