WIP: Implement shortcode for take-action widgets. #25

merged 12 commits into from Jan 12, 2017


None yet

1 participant


This PR does a lot to clean up the take-action widgets on the home page.

  • Implements the widgets via shortcode, instead of HTML.
  • Uses SVGs rather than images for the graphics.
  • Redraws the illustrations from scratch, to replace the original placeholders.

So now, instead of this:

<div class="action-widget register">
<img src="http://justonetree.strikingwork.com/wp-content/uploads/2013/01/register-300x295.png" alt="register" width="300" height="295" class="alignnone size-medium wp-image-2817" />
<h3>Register trees</h3>
Register the lemon tree you've got or other lemon trees you spot around the city.
<a class="button" href="#">Register a tree</a>

We can use this:
[take-action slug="register" title="Register trees" text="Register the lemon tree you’ve got or other lemon trees you spot around the city." button-link="#" button-text="Register a tree"]

And it's easier to edit without accidentally breaking things.

Might be worth implementing shortcake UI here, although I expect these won't be used often (and honestly Shortcake isn't great from a UI perspective anyway...)

Fixes #21 when finished.


screenshot 2017-01-12 02 22 12

screenshot 2017-01-12 02 25 55

These illustrations may still require a bit of further tweaking at a later stage because I'm obsessive.

@sarahmonster sarahmonster merged commit 4c2f7ea into master Jan 12, 2017
@sarahmonster sarahmonster deleted the take-action branch Jan 12, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment