688 Tutorial - Custom shape plugin - Where did I break this?

Hi, I’m experiencing a problem after going through this tutorial: https://kb.wpbeaverbuilder.com/article/688-tutorial-add-a-custom-shape-layer

Where did I break this?

Here’s the svg file code:


/*Contents of the <svg> element with fl-shape class added */

<g class="fl-shape" transform="matrix(1,0,0,1,-10,-38)">

<style type="text/css">
<polygon class="st0" points="0,0 1556,289 1920,0 1920,328 0,328 "/>
<polygon class="st1" points="0,0 1370,319 1919.5,0.5 1919.5,329 0,329 "/>


and implementation function:

Plugin Name: Hero V Custom Shape for Beaver Builder
Description: Adds a V shape to the list of custom shapes in Beaver Builder
Author: <Daniel Furfaro>
Version: 1.6

if ( ! class_exists( 'FLBuilder' ) ) {

function bb_register_custom_shapes() {

        'label' => __( 'Hero V', 'bb-custom-shapes-hero-v' ),
        'name' => 'herov',

        /* Optional x and y origin values, from SVG viewBox
         ex: viewBox="x y width height" */
        // 'x' => 0,
        // 'y' => 0,
        /* Required width and height values from SVG definition */
        'width' => 347,
        'height' => 85,
        /* Optional aspect ratio setting, from the SVG element - see svg spec */
        // 'preserve_aspect_ratio' => 'none' 

    /* Include the path to your artwork */
        'render' => dirname(__FILE__) . '/shapes/hero-v.svg.php',
add_action('init', 'bb_register_custom_shapes');

I am pleased you asked this. I have been through the same using the example git hub files and can not get it to work.

I wish there was a working plugin example (ideally that allows a few SVG to be registered) then I think I could reverse engineer this.

I tried your code it draws something

1 Like

Wow! Okay that’s farther then I got. So what I’m trying to get it to look like is something like this. Or if I have to just have one shape for now for simplicity that’s OK:

@pross You made it farther then me if you have the ‘Hero V’ shape available in the dropdown for rows. Any chance I could see the .zip and try to customize it? (not sure if sharing files is a thing with these threads I’m still new to the BB forum so apolgies in advance if I shouldn’t ask)

shape-test.zip (1.3 KB)

Here is the code I used.

Aha! The bb_register_custom_shapes function determines how you crop the shapes. This fixed it being cropped oddly: (previously it was 347 x 85, way to small)

Thanks very much for the code @pross. So far it’s working well. Good enough for this project. However I’m going to try to combine the fixed-color polygon with the fully-editable g shape, and see if if we can add more color customization when adding multiple shapes in a single plugin.