Custom Dynamic Content without a Page Builder

There are some really cool page builder plugins on the market. At LimeCuda we’re looking into expanding the way we offer some of our services. For this, one of the key tools we’re looking into is the Beaver Builder plugin. We’re looking that direction so we can more quickly create dynamic front-end layouts as well as allow less technical developers cut their teeth on real world projects.

But, when building custom web solutions for a client, I truly believe page builder plugins are the wrong tool for the job.

In these cases, there are specific structures that need to be created. There are intentional relationships that are built between content and content types that need to be maintained.

How Content displays within an element must be defined and controlled.

If we’re providing a custom solution, is it best to give something that has a lot of options they’ll never need or use? Or more commonly, a lot of options that will need to be repeated every time an element is added so it matches the intended design?

We can do better than that.

So what’s the alternative?

When looking for a solution, there were a few things we wanted to accomplish:

• Be able to define our own components and options
• Define and control how content displays within our components
• A simple interface for users to manage those options
• A true WYSIWYG experience in the dashboard

The best approach that we have found (so far) has been to take advantage of another really awesome plugin, Shortcake. If you’re not familiar with the plugin, I encourage you to check it out. The short story is that it allows you to add a UI component for building shortcodes and it displays the output within the WYSIWYG.

Eating our own dog food

So, as we’re building a brand new site for LimeCuda, we wanted to try this new approach to get a feel for how an end-user would work with a Shortcake-based solution.

Here’s a video showing the result of what we came up with

How it’s done!

I won’t go into full detail for recreating the exact banner. Just showing you all the steps you’ll need to take. Your output and associated styles may be completely different than above.

Get the plugin!

The first thing you’ll need to do is install the Shortcake (Shortcode UI) plugin.

Create the shortcode

All the elements are added to the content via the use of shortcodes. So, to start, we need to create our shortcode. Below is the sample functions that we used to build the banner shortcode in the video above.

Register the UI settings

Now that we have the shortcode, we can register the UI settings to make it easier to configure the options. Here are all the setting options available with Shortcake. Below are the settings we used for the Banner shortcode

Style the things!

From here, it’s just up to styling all the elements! The colors are controlled by content classes so you’ll want to account for each color within your stylesheet. Same thing for the image placement.

The only thing of real note for styles is the ability to display the components full-width even though they’re being added to the content area, which is typically contained to a center column.

For this, I took a solution from the great Aesop Story Engine plugin. To allow for this, we need to make sure the containing block for each of our shortcodes includes the “limecuda-case-study-component” class. From there, we can add the following to our stylesheet.

This solution is specifically for themes using the Genesis Framework. If you’re integrating on a different theme, you’ll need to modify the selectors here to match your theme markup. 

A true WYSIWYG experience

The final part here (and honestly the coolest part for me) is ensuring the WYSIWYG outputs the shortcode with the same styles as the front-end.

The best part here is that Shortcake is handling all the content output for us. We just need to add our styling for our components.

This is as simple as adding add_editor_style(); and then including your styles in an “editor-style.css” file in the root of your theme. And Voila!

This part can also be made much simpler if you choose to use Sass. You can write your styles once, include the partials on your editor-style.scss file and have the stylesheet created automatically.