Line 3: Change the plugin name to what you want to appear as the plugin title. This information appears in the plugin title and description in Plugins > All plugins on the WordPress admin panel. Make the following changes to the plugin description in Lines 2-7. '/shapes/',Īdd_action('init', 'bb_register_custom_shapes') * Optional aspect ratio setting, from the SVG element - see svg spec */ * Required width and height values from SVG definition */ * Optional x and y origin values, from SVG viewBox 'label' => _( 'Boomerang', 'bb-custom-shapes-boomerang' ), Move the PHP file you created in the previous task into the shapes folder.Ĭreate a new file in a text editor and paste in the following code. Create a folder and give it the name (ID) of the plugin.To help visualize the following instructions. Here's a screenshot of the folder structure created for the boomerang example Create the folder structure for the plugin In the boomerang example, this is the tag in Line 5 of the following file:Ĭopy Lines 1-4 of the code displayed in the previous step and paste it into the top of your file. Ĭreate a new file in a text editor and paste in the SVG markup that you copied in the previous task.Īdd the fl-shape class to the outermost element of the SVG shape definition. This is a required value in the plugin code.Ĭopy the contents of the tag, in other words everything in between and. Height (initial height of the shape, in pixels). This is a required value in the plugin code. Width (initial width of the shape, in pixels). This is also an optional value in the plugin settings. The value 15 means 15px below the top edge of the viewbox. Y position (vertical position: 0 means the top edge of the viewbox).

This is an optional value to set in the plugin code, generally used in cases in which the value is other than 0.

The value 10 means 10px to the right of the left edge of the viewbox. X position (horizontal position: 0 means the left edge of the viewbox). The four values (in this example, '0 0 347 85') represent the following information. Make a note of the values in the viewBox attribute, which appears in Line 1 in this example, because you'll use at least the width and height values in the plugin code.

G clip-path on top of other g