Blog content

Create content dividers with the WordPress Wavy Divider plugin – WP Tavern

Kevin Batdorf, the lead project developer at Extendify, posted the Corrugated Divider Plugin earlier this week. It’s described as “a colorful, fun and lightweight divider block to energize your website with character and pizzazz.”

As someone who believes that every Friday should be officially titled “Fun Friday”, how could I not install and activate it?

I haven’t seen many block plugins use a random design option before, and Wavy Divider may be the first. Its most important setting is a “shuffle waves” control. When a user clicks on it, the divider is regenerated with new locations for its peaks and valleys.

Added the first Wavy Divider.

I have mixed feelings about the blending option. One side of me wants to know what I’m getting before I hit the button, and the other side enjoys the randomness of it all. Users who prefer tight control over every point where each wave rises or falls may want to look elsewhere.

The plugin isn’t entirely a jumble of unpredictability. It offers a handful of other options allowing users to exercise some control over its output. There are toggles for the smoothness and direction of the divider. The first toggles between the default wavy style and its stiff straight-line counterpart. The latter moves the wave flow from bottom to top and vice versa.

Users can set the height, points and opacity of the separator. There is also a color option.

If you really want to get creative, your best option is to mix and match it with the basic Group and Cover blocks. The plugin documentation walks users through create a mirrored gradient effect by using two separators inside a group. I followed the instructions and built a gradient river that flowed across the screen:

A wavy orange, pink, purple and blue gradient running across the screen.
Two separators inside a Group block with a gradient.

In the right hands, it’s entirely possible to tone down some of the roughness, adding a professional shine on top of it all.

I created an intro section for a fitness or adventure blog. The goal was to create the look of a site owner with personality. However, top designers will use it to put together something unique to their brands.

Section with sunset gradient background above a mountain shaped black divider.
Adventure blog intro section with bottom divider.

Half the fun of this plugin is trying out unusual combinations with other blocks. The other half discovers new forms via the shuffle option.

You can also use the plugin for your next low budget horror movie cover art (it was absolutely an experience got weird when testing this plugin, but figured I’d share anyway ):

A portrait-oriented box with the woods and the moon in the background.  It is covered with a green slime that flows from top to bottom.

There’s a little something for anyone with the imagination or enough time to repeatedly click the “mix waves” button until they land on that perfect wave shape. Like I said, it’s Friday, and we should all let loose and have a little fun.

I tend to tag projects with well-structured code for my own edification, and Wavy Divider fits that mold. For developers looking to study relatively simple examples of block development, it would be hard to go wrong using these as a starting point. The code is available on GitHub.