Introducing the New WordPress Smart Actions – with Pine Adventures Tutorial

Making websites should be easy, right? How about creating custom WordPress themes? It should be easy too!

You can do that with the help of our app, Pinegrow with WordPress Theme Builder (short PGWP). And we just released a new version of the Pinegrow theme builder that makes the process even simpler.

At the end of this article we’ll create a WordPress theme together, so that you can see how it works in practice.

What is PGWP?

First of all, PGWP is not one of those WordPress plugins and frameworks that let you rearrange the theme with drag & drop.

PGWP is also not a theme generator, a black box, that spits out a bunch of PHP files and tells you: “Here you go. Take it or leave it!”

No. PGWP is a desktop app that let’s you transform any HTML website into a standard PHP-based WordPress theme. With PGWP we keep full control over our theme. Every piece of HTML code, every CSS rule and every line of PHP code are under our control. And we accomplish that without actually doing any PHP coding.

How it works?

We take an existing HTML website and open it in Pinegrow — or — we create a website with Pinegrow (Pinegrow is also a fully featured HTML and CSS visual editor).

Then we add various WordPress related actions to HTML elements. For example, we select the H1 and add the Post title action to it.

When we export the theme, Pinegrow creates standard PHP WordPress theme files according to these instructions. In the above case:

<h1>Upcoming Trips</h1>

in the source HTML will be replaced by

<h1><?php the_title(); ?></h1>

in the exported code.

Introducing Smart actions

In the latest release, Pinegrow got a set of 14 smart WordPress actions that are easy to use — but in the background they do a lot of work and they free us from thinking about many boring detail.

The old way

More than 200 existing — regular, non-smart — WordPress actions in Pinegrow accurately represent various WordPress template tags and their numerous arguments. So, until now, you had to combine a couple of these actions to accomplish a single logical task.

For example, to create and use a Customizer control we had to use three different actions: one for creating the control, one for creating a Customizer section and one for actually using the value.

The new — smart — way

Now, we just add a single Customizable Field smart action on the element, fill in the field id & name, and tell it what part of the element should be editable.

Pinegrow will take care of everything else.

If we need to edit another aspect of the same element — for example, its background image — we just click on Add field, fill in the id & name and select “Background image” from the list.

And this is the preview of the generated PHP code — the code we don’t have to write:

Another example is the Post & Loop action that creates the main loop and adds post id and classes to the article element. Not only that, it can also creates a custom WP_Query loop and registers a custom post type, like here:

Between them, these two smart actions:

• Register the custom post type Testimonials,
• Create a custom WP_Query that reads testimonials,
• Loop through results,
• Add class active to the first item (we’re showing them in a Bootstrap slider),
• Add post classes and post ids to post elements and
• Display the content of testimonial posts.

And the code preview for that is here:

When we save the page or export the theme, Pinegrow combines all these pieces of code and writes them in standard WordPress theme file structure, including functions.php and support for template parts.

One more example, the Post Content smart action decides if its element should be replaced by the post content or if the element should remain and just contain the content.

Smart Actions to Regular Actions

You’re maybe thinking: “O, you promised me complete control over my theme. But now these smarty-pants actions are deciding things instead of me.”

That’s true — smart actions do that.

But when we need more fine-grained control over the behavior of a certain element or action, we just click on the “Change to regular WordPress actions” icon. The smart action is replaced by one or more advanced WordPress actions that map almost 1:1 to WP theme tags. We can customize those as much as we want. PGWP has more than 200 of these actions and even has the ability to add custom PHP code.

When doing that with our Testimonials Post & Loop example, the Post & Loop smart action will transform into 4 different regular WordPress actions, including a custom WP_Query with so many different arguments, that they don’t even fit on a single screen.

Have your cake and eat it too

So we get the best of both worlds: super simple approach for 95% of situations and the full power to handle the other 5%.

The result is that WordPress theme creation in Pingorow is now even faster and — even more significant — it is actually fun.

When was the last time you created a WordPress theme with a bunch of custom post types and Customizer controls for the sheer fun of doing it?

With PGWP you can do that. There’s no copy-pasting and tweaking the old boring boiler plate WordPress PHP code. Instead you just use Smart actions to tell Pinegrow what you want to do!

The added benefit of this process is that all WordPress actions that we add to the page are stored in standard HTML attributes on HTML elements. That means that doing the HTML to WordPress conversion in Pinegrow doesn’t destroy the source HTML files.

This is the HTML code of our Title example:

<h1 wp-the-title>Upcoming Trips</h1>

The whole life cycle of creating and maintaining a WordPress theme can stay HTML based, so that your whole team — designers, front-end developers and CMS integrators — can keep working together on the same code base.