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.

syntax quickstart

To insert some text, first you need to pick a text shape. We'll start with the simplest shape, plain.

[slate_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.

    fill="stripes"

We will now set values to the two colors, color1 and color2, like so:

    fill_stripes_color1="#dd9933
    fill_stripes_color2="#dd3333

This particular fill pattern lets us specify a rotation angle for the stripes:

    fill_stripes_tilt="33"

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 [/slate_plain].

[/slate_plain]

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:

download

Visit the download area to get this plugin, or visit the SVG shortcode examples if you wish to see more examples of SVG shortcodes!