Snippy

Description

Use Snippy to quickly create your own custom shortcodes.

A Snippy shortcode is built by combining bits. A bit can be a file, like a Stylesheet or a Script, or a piece of code, like HTML, CSS or JavaScript.

The “code” bits can contain placeholders, which are automatically made accessible as shortcode attributes.

Time for a quick example.

Let’s create a shortcode to embed YouTube videos. We’ll add an HTML bit and set the it’s value to the YouTube embed iframe.

<iframe src="https://youtube/embed/JZYYJY4yoK4"/>

Now to make this bit a bit more flexible we will replace the YouTube video id with a placeholder value {{id}}.

<iframe src="https://youtube/embed/{{id}}"/>

Yay! We’ve finished our first bit!

Now we can create a new Snippy shortcode and add the YouTube iFrame HTML bit. After saving the shortcode we can use our new and shiny YouTube shortcode in the text editor.

[youtube id=JZYYJY4yoK4]

Ready for more?

The below 3 minute YouTube video shows how you can use Snippy to turn a jQuery plugin into a WordPress plugin.

Screenshots

  • Creating an HTML bit containing a YouTube iframe snippet and setting the {{id}} placeholder.
  • Creating a [youtube] shortcode that makes use of the YouTube iframe snippet.
  • Adding the shortcode to the page and setting a YouTube video id.

Installation

  1. Download the zip file.
  2. Log into WordPress, hover over Plugins and click Add new
  3. Click on the Upload Plugin button.
  4. Select the zip file you downloaded.
  5. Click Install Plugin.
  6. Click Activate.
  7. Navigate to the ‘Snippy’ menu on the left and setup your first shortcode.

FAQ

Can I use JavaScript or CSS files instead of HTML

Yes, you can select JS and CSS files to be added to a bit, Snippy will automatically load the files when the shortcode is used on a page.

How do I define placeholders

You can define placeholders in bits by wrapping text in brackets like this: {{placeholder}}.

Suppose you want to create a placeholder for a YouTube video. You’d replace the YouTube video id with {{id}}.

<iframe src="https://youtube/embed/{{id}}"/>

Now the attribute id is available in any shortcode that uses the YouTube HTML bit.

[youtube id=JZYYJY4yoK4]
How do I set a placeholder default value

Placeholder default values can be set by following the placeholder name with a semicolon and then the default value.

{{name:John Doe}}
Which default placeholders can I use

The following list of placeholders have a special function:

  • {{content}} is always replaced with the content wrapped by your shortcode.
  • {{date_today}} is replaced with an ISO8601 representation of today’s date.
  • {{date_tomorrow}} is replaced with an ISO8601 representation of today’s date.
  • {{unique_id}} is replaced with a uniquely generated id.
  • {{shortcode_id}} is replaced with the id of the current shortcode.
  • {{bit_id}} is replaced with the id of the current bit.
  • {{page_id}} is replaced with the current page id.
  • {{page_relative_url}} relative url to the current page.
  • {{page_absolute_url}} absolute url to the current page (includes the domain).
  • {{theme}} current theme name.
  • {{theme_root_uri}} theme directory URI.
  • {{template_directory_uri}} current theme directory URI.

Reviews

Nice and easy

Worked fine with me with some explanation from Pqina.
Easy flow, easy use when you have your files ready!

Tutorial

Dear Rik,

Thanks for this plugin! Is it possible for you to make a basic video to explain, for example, changing colors of buttons on a page using this plugin? I see a lot of potential, but only have a basic knowledge of HTML, CSS, and JS.

Regards

A Diamond

This is by far the most amazing plugin I’ve found for wordpress.
As someone who makes custom themes, I want to provide the ability to organize elements in wp-admin without all of the bloat of Visual Composer or similar.

I can organize all of the elements/fluid-stripes a user needs (call to action, faq, contact information, etc) and then can organize that information in wp-admin versus in static page-slug.php pages.

This is exactly what I have been looking for for months now, and I’m so excited to have finally found it.

Awesome Plugin

Great little tool, highly recommended. Even wrote a little post about it too https://www.sitecreate.io/want-add-custom-css-js-wordpress-pages-use-snippy/

Read all 4 reviews

Contributors & Developers

“Snippy” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Snippy” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.3.3

  • Tested with WordPress 5.0.0

1.3.0

  • When using multiple placeholders with the same name, they will only show up once
  • Add bit_id and shortcode_id placeholders

1.2.0

  • HTML bits can now contain shortcodes
  • Add more placeholders

1.1.1

  • Fix problem where shortcode and bits tables would not show paging control

1.1.0

  • Add “local” or “remote” resource bit which makes possible the option to include CDN resources.
  • Add a starter set of dynamic placeholders
  • Only admin can now edit Snippy shortcodes

1.0

  • Initial release