Buttons

Shortcode Options:

  • title=”…” (The title of the button)
  • color=”…” (Can be set with preset colors: ocean, coal, blush, violet or with any hex color value) Need a hex color generator?
  • type=”normal, normal-rounded, big, big-rounded”
  • position=”…” (Optional _ Can be filled with: left – right – top – bottom)
  • target=”…” (Optional _ Can be set with: “new” to open the link in a new page or “same” to load the page on current window)
  • url=”…” (Enter the destination url desired)

Normal Color Preset Buttons:
Ocean Coal Blush VioletSage Hazel Blaze SandOrange Blue Pink Green
[sp_button title="Default Color" color=ocean position=right target=same url=# type="normal"]

Normal-Rounded Color Preset Buttons:
Ocean Coal Blush VioletSage Hazel Blaze SandOrange Blue Pink Green
[sp_button title="Default Color" color=ocean position=right target=same url=# type="normal-rounded"]

Big Color Preset Buttons:
Ocean

Custom Hex Color Buttons:

[sp_button title="Custom Color" color=#2c2a00 position=right target=same url=]


Facebook, Twitter & Google Plus One

Shortcode Options:

  • url=”…” (Optional _ Enter the url that you wish to be liked)
  • url=”…” (If left empty the button will auto pick the page url where it is placed)

[sp_fblike url="http://splashingpxiels.com"]

Shortcode Options:

  • url=”…” (Optional _ Enter the url that you wish to be tweeted)
  • url=”…” (If left empty the button will auto pick the page url where it is placed)

[sp_tweet url="http://splashingpixels.com"]

Shortcode Options:

  • url=”…” (Optional _ Enter the url that you wish to be liked)
  • url=”…” (If left empty the button will auto pick the page url where it is placed)
  • count=”…” (Optional – Enter true or false to enable/disable the counter – Note: Counter is always on in tall mode).
  • size=”…” (Optional – choose from small, standard, medium, tall)

[sp_gplusone url="http://splashingpxiels.com"]


Grid System

Flexible Columns allow you to build flexible columns with ease.

Shortcode options:

  • span=”…” (one_half, one_third, one_fourth, and two_third)
  • last=”…” (true – you want to set this to true whenever you are declaring the last or only column so the rest of the content will clear properly)

NOTE: You will see a space after the trailing forward slash on the closing shortcode tag. Remove that space when you’re using this shortcode. We had to add this space in our examples or else the grid system gets triggered.

One Half

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_half]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

One Half

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_half last=true]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)


One Fourth

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_fourth]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

One Fourth

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_fourth]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

One Fourth

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_fourth]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

One Fourth

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_fourth last=true]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)


One Third

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_third]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

Two Thirds

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=two_third last=true]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)


One Fourth

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_fourth]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

One Fourth

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_fourth]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)

One Third

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.
[sp_grid span=one_half last=true]Your Content[/ sp_grid] (NOTE: remove space after the forward slash)


Check Login

Any content placed in between this shortcode will be visible only to members that are logged in and not visible to others.

[sp_check_login] ... [/sp_check_login]


Display Google Maps

Shortcode Options:

  • width=”…px or %” (Optional _ Set the width of the map in pixels. If left empty it will automatically set to 500px default width)
  • height=”…px or %” (Optional _ Set the height of the map in pixels. If left empty it will automatically set to 500px default height)
  • zoom=”…” (Optional _ Set the level of zoom desired (1-20), no % symbol needed)
  • address= … (Enter your desired address to display on the map)

 

[sp_map width=100% height=300px zoom=15 address="Dolores Park, San Francisco, CA"]


Lightbox

Shortcode Options:

  • title=”…” (Optional – Insert the title you want to display when the Lightbox Pops up)
  • url=”…” (Enter the url of the video source or image)
  • group=”…” (Use this option to group images in the same lighbox)
  • thumbnail=”…” (Choose between “large” and “small” to show the default video thumbnail)
  • enter in between [ sp_lightbox … ] and [ /sp_lightbox ] the image or text you want to use to trigger the lightbox
  • slideshow=”…” (Optional – you can set “true” to enable slideshow for your images, default is “false”)
  • theme=”…” (Choose different themes for your lightbox “facebook,light_rounded,dark_rounded,light_square,dark_square. Default is “facebook”)
  • show_social=”…” (Enter “true” if you want to display social tools for your lightbox. Default is “false”)

Small Youtube Thumbnail

Small Vimeo Thumbnail

Custom Youtube / Vimeo Thumbnails [sp_lightbox title="..." video url="..."] <img src="..."> or any text [/sp_lightbox]

Default Youtube / Vimeo Thumbnails [sp_lightbox thumbnail=small title="..." video url="..."]


Image Lightbox

Shortcode Options:

  • title=”…” (Optional – Insert the text you want to display when the Lightbox Pops up)
  • url=”…” (Enter the url of the big image )
  • group=”…” (Use this option to group images in the same lighbox)
  • enter in between [ sp_lightbox … ] and [ /sp_lightbox] the image or text you want to use to trigger the lightbox
  • slideshow=”…” (Optional – you can set “true” to enable slideshow for your images, default is “false”)
  • theme=”…” (Choose different themes for your lightbox “facebook,light_rounded,dark_rounded,light_square,dark_square. Default is “facebook”)
  • show_social=”…” (Enter “true” if you want to display social tools for your lightbox. Default is “false”)

[sp_lightbox group="..." title="..." url="..."] <img src="..."> or any text [/sp_lightbox]


Horizontal Rules

With this shortcode you can place custom color horizontal rulers, insert any hex color directly in the shortcode
[sp_hr color="#ffffff"]
(Need a hex color generator?)















Lists

There are 8 different styles you can chose from:
“bullets”, “circle”, “none”, “decimal”, “lower-alpha”, “upper-alpha”, “upper-roman”, “lower-roman”, “katakana”. Simply use a tilde “~” to deliminate the list like “apples~oranges~pineapples~cherries”.

  • Apples
  • Cherries
  • Lemons

[sp_list type="bullets"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="circle"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="none"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="decimal"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="lower-alpha"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="upper-alpha"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="upper-roman"] Apples~Cherries~Lemons [/sp_list]

  • Apples
  • Cherries
  • Lemons

[sp_list type="lower-roman"] Apples~Cherries~Lemons [/sp_list]


Block Quotes

Easily insert quotes on your site, text will be styled automatically.

Shortcode Options:

  • text_align=”left,center,right” (You can set how you want the quoted text to be displayed.)

Splashing Pixels’ WordPress e-commerce themes offer the best e-commerce solution for online stores. Our highly customizable WordPress e-commerce theme design and technology is unlike anything else on the market. We put an amazing amount of care and detail into the design and functionality to ensure that we’re creating the best user experience for your customers.

[sp_quotes] ...quoted text... [/sp_quotes]


Show Code

This shortcode allows you to show whatever code you want within pages and posts.
[sp_code] ... [ /sp_code]


Home / Theme Path

These two shortcode will automatically insert the path of the root domain name and template path to provide convenience so that you would not have any broken link or image if you transfer your site on another domain.
[sp_home]
is a shortcode to output the path of your site domain.
For example this [sp_home]image.png would be the equivalent to http://yourdomainname.com/image.png
[sp_theme]
is a shortcode to output the path to your themes folder.
For example this “[sp_theme]image.png” would be the equivalent to “http://yourdomainname.com/wp-content/themes/yourtheme/image.png”


Email

This shortcode will create an email link like this name@domain.com
[sp_email email="hello@splashingpixels.com"]


Back To Top

This shortcode will help with navigation on your site. by adding a back to top button. Just place it wherever you want to show the “Back To Top” link
[sp_btt]

More Shortcodes

Please click on page 2 below.