New Version of My Action Network Plugin

I’ve released version 1.1 of my Action Network plugin for WordPress. You can see some of the new features on the new UE Research and Education Fund website. If you like the new features, why not head over there and contribute a few bucks to the organization that essentially supported the development.

Here’s a quick overview, with more details below.

New options and widget for actions

The [actionnetwork] shortcode has five new optional attributes which can be used to control how the “thank-you” screen displays (details below).

The plugin also now provides an “Action Network Action” widget which can be set to display any action in the system.

New shortcode and widget to list actions

The plugin now provides an [actionnetwork_list] shortcode which will list and link to the most recent actions in your account, and an Action Network List widget which does the same thing. See below for detailed specifications of shortcode attributes/widget options.

Miscellaneous bug fixes for calendar shortcode and widget

This version includes some small bug fixes for the calendar shortcode and widget; namely, link_format values that use {{ event.link }} will now work properly. I have included full documentation of the calendar shortcode attributes/widget options below.

AJAX submission and tags for signup widget

The signup widget, which provides a lightweight non-Action-Network form which allows users to sign up for your list, now displays checkboxes that allow you to add tags to anyone who signs up via the form (the tags need to be created in your Action Network backend).

The signup widget also now supports submission via AJAX, so users won’t have to reload the whole page (especially potentially confusing on mobile). Various things about the animation and appearance are controlled via css, and it provides custom javascript events, all of which are detailed below.

More efficient backend code

This shouldn’t have any effect on regular users, but anyone who does WordPress development might want to check out the code in actionnetwork-widgets.class.php and uwfWidgetControls.class.php. The uwfWidgetsControls php class will take a widget object, widget instance, and structured array and render the HTML for a widget options form (allowing the developer to add or change widget options in actionnetwork-widgets.class.php by just modifying an associative array).

Detailed specifications

[actionnetwork] attributes/widget options

The id attribute is required; it is an integer identifying the action stored in the backend, and is displayed on the Action Network page on the WordPress backend.

Use the thank_you and help_us attributes to modify the “Thank You for Your Support” and “help us using sharing tools” messages.

Set hide_social, hide_email, or hide_embed options to 1 to hide specific sharing tools.

Shortcodes for actions synced via the API can take two additional attributes:

The size attribute can be set to full or standard (standard is the default)

The style attribute can be set to default, layout_only, or no (layout_only is the default)

[actionnetwork_list] attributes/widget options

These are all optional:

n: number of actions to list (defaults to five)
action_types: comma-separated list of types of actions to display. Defaults to petition,advocacy_campaign,fundraising_page,form (i.e., everything other than event and ticketed_event, which in most use cases would be handled by the [actionnetwork_calendar] shortcode & widgets – but it can handle events and ticketed events).
link_format: defaults to {{ action.link }} (i.e., the link to the action on actionnetwork.org) but could be modified, using {{ action.link }} or {{ action.id }}, to a custom URL.
link_text: defaults to {{ action.title }} (i.e., the public title of the action).
container_element: HTML element to wrap the list in. Defaults to ul to create an unordered list
container_class: Class to apply to container element. Defaults to actionnetwork-list
item_element: HTML element that contains each list item. Defaults to li.
item_class: Class to apply to list item element. Defaults to actionnetwork-list-item
no_actions: Text to display if there are no current actions. Defaults to “No current actions.” Widget version can include HTML.
no_actions_hide: If set to 1, the shortcode/widget won’t display at all if there are no current actions (especially useful for widgets)
json: If set to 1, will output as JSON rather than HTML (it is up to you to write script to use the JSON)

The list can also be templated using a very simplified twig-like format, in between [actionnetwork_list] and [/actionnetwork_list]. It must follow the following structure, because it doesn’t actually use twig (yet):

your container HTML…
{% for action in actions %}
your iterated item HTML…
{% else %}
your “no actions” HTML…
{% endfor %}
your container-closing HTML…

Twig variables available are {{ action.link }}, {{ action.id }} and {{ action.title }}. {{ action.link }} is modified by the link_format attribute before being passed to the template. The link_text attribute is irrelevant if a custom template is used.

[actionnetwork_calendar] attributes/widget options

These are all optional:

n: number of events to list (defaults to all)
date_format: php date formatter for date. Defaults to F j, Y.
link_format: defaults to {{ event.link }} (i.e., the link to the event on actionnetwork.org) but could be modified, using {{ event.link }} or {{ event.id }}, to a custom URL.
link_text: defaults to {{ event.title }} (i.e., the public title of the event).
container_element: HTML element to wrap the calendar in. Defaults to ul to create an unordered list
container_class: Class to apply to container element. Defaults to actionnetwork-calendar
item_element: HTML element that contains each list item. Defaults to li.
item_class: Class to apply to list item element. Defaults to actionnetwork-calendar-item
no_events: Text to display if there are no current events. Defaults to “No upcoming events.” Widget version can include HTML.
location: Formatter for event location. Defaults to {{ event.location }} wrapped in an HTML div element with class actionnetwork-calendar-location.
description: Formatter for event description. Defaults to {{ event.description }} wrapped in an HTML div element with class actionnetwork-calendar-description.
embed_style: Embed style to use if the shortcode is displaying a single event. Defaults to embed_standard_layout_only_styles.
ignore_url_id: By default, the [actionnetwork_calendar] shortcode will display the full embed for a single event if that event’s id is appended the the URL. If set to 1, this will be overridden.
json: If set to 1, will output as JSON rather than HTML (it is up to you to write script to use the JSON)

The calendar can also be templated using a very simplified twig-like format, in between [actionnetwork_calendar] and [/actionnetwork_calendar]. It must follow the following structure, because it doesn’t actually use twig (yet):

your container HTML…
{% for event in events %}
your iterated item HTML…
{% else %}
your “no events” HTML…
{% endfor %}
your container-closing HTML…

Twig variables available are {{ event.link }}, {{ event.id }}, {{ event.title }}, {{ event.date }}, {{ event.location }}, and {{ event.description }}. {{ event.link }} is modified by the link_format attribute before being passed to the template. The link_text attribute is irrelevant if a custom template is used.

Example of using the templating system

[actionnetwork_calendar]
<ul>
{% for event in events %}
    <li>
        <h3><a href="{{ event.link }}">{{ event.title }}</a></h3>
        Date: {{ event.date }}<br />
        Location: {{ event.location }}
        <p>{{ event.description }}</p>
    </li>
{% else %}
    <li>No events currents scheduled</li>
{% endfor %}
</ul>
[/actionnetwork_calendar]

Signup widget AJAX submission

The CSS animations for AJAX submission are contained in the signup.css file. If the form is being submitted via ajax, the javascript in signup.js will add the submitting class to the form while it is being submitted and the submitted class when it has been submitted.

The javascript will also trigger custom javascript events on the document element: actionnetwork_signup_submitted when the form is submitted and actionnetwork_signup_complete when the submission is complete.