introducing SVG shortcodes...
With the SVG Logo and Title Effects plugin you can create visually stunning text and insert it into your page content using shortcodes. Shortcodes are a WordPress feature that allows you to insert special content, such as SVG. To write a shortcode you write pairs of attributes and values that you specify within square brackets, "[" and "]".
To read more on WordPress shortcodes in general, read the relevant documentation here.
To see examples of SVG shortcodes that you can use with SLATE, visit the examples section.
...that you don't need to learn
The plugin provides you with a powerful and extensible shortcode syntax that you really don’t need to learn: Just copy & paste the examples given here into your editor, then tweak the attribute values to your liking.
To insert some text, first you need to pick a text shape. We'll start with the simplest shape, plain.
then we'll add some attributes that are common throughout all shapes, such as font family and font size. These start with an underscore:
_font_family="Lobster" _font_size="64pt" _stroke="#1e73be" _stroke_width="2px"
You can always omit any parameters.
Next we'll pick a fill pattern out of the available ones. Let's use "stripes". This is a fill pattern consisting of two consecutive lines with different colors and widths.
We will now set values to the two colors,
color2, like so:
This particular fill pattern lets us specify a rotation angle for the stripes:
Let's also define a drop shadow to our text. Shadows are filters that we can specify if we need them or omit them if we don't:
filter_shadow_radius="5" filter_shadow_xoff="8" filter_shadow_yoff="8"
We've specified enough SVG text attributes for now.
Let's close the
slate_plain shortcode tag with a closing square bracket and type in our text.
] <i>Hello</i> <u>SVG</u> <b>world</b>
Notice how we're free to use basic HTML formatting such as
<u> for underline or
<i> for italics. When using the WordPress editor, you can use the text formatting buttons from the editor's toolbar to do this.
Finally, we need to close the shortcode with a matching
And that's it.
Here's the code again, all in one go:
[slate_plain _font_family="Lobster" _font_size="64pt" _stroke="#1e73be" _stroke_width="2px" fill="stripes" fill_stripes_color1="#dd9933" fill_stripes_color2="#dd3333" fill_stripes_tilt="33" filter_shadow_radius="5" filter_shadow_xoff="8" filter_shadow_yoff="8"] <i>Hello</i> <u>SVG</u> <b>world</b> [/slate_plain]
This example can be inserted anywhere into your WordPress content and will produce the following:
SVG shortcodes tutorial
Updated on 2016-09-30T13:37:34+00:00, by .