The Zen Shortcode plugin is an updated version of our original JB Type plugin. Zen Shortcode has been specifically designed for use with the Zen Grid Framework v4. If you are using a template that is not compatible with Zen Grid Framework v4 please use the JB Type plugin in order to render functionality similar to the examples below.

The Zen Shortcode plugin is an updated version of our original JB Type plugin. Zen Shortcode has been specifically designed for use with the Zen Grid Framework v4. If you are using a template that is not compatible with Zen Grid Framework v4 please use the JB Type plugin in order to render functionality similar to the examples below.

Buttons

Rendering buttons

The Zen Shortcode plugin is able to render buttons using the default .btn style built into the template. In order to render a button with a link attached simply add your link text followed by the pipe symbol - | - and the link you wish to attach to the button.

Example

Google

The syntax used to render the button above is as per follows.

[zen-btn]Google|http://www.google.com[/zen-btn]

Please note that the curly brackets have been replaced with square brackets in order to avoid rendering the item here.

Code Blocks

Rendering code blocks

Zen Shortcode also makes it possible to render blocks of code with titles such as the example below. This can be helpful for developers who wish to display code, markup etc for their users. The syntax used is as follows:

codeThis is a block of code.

[zen-pre]code|This is a block of code[/zen-pre]

Once again the curly brackets required for rendering the display has been replaced with square brackets in order to be able to display the markup here.

Custom Syntax

Using custom syntax

A new addition to the Zen Shortcode plugin is the ability to specify custom syntax for your content. This means that in addition to using the built in syntax to display the icons listed below it is possible to use your own custom syntax to render new markup and displays.

To add your own syntax you enter the new names for your classes in the plugin settings in your sites Joomla extension manager. To navigate to these settings navigate to extensions > plugin manager and filter the results to display the Zen Shortcode settings. Once you have entered the edit panel click on the options menu tab. This will display the options available for the plugin.

Custom icons

To add your own custom syntax add the names of the items  (separated by a comma) that you wish to use in your content eg happy, snail, belfast. Then click save.

Now when you use the syntax {zen-happy}My happy text{/zen-happy} the syntax will be rendered as per the following.

html<span class="zen-icon zen-happy">My happy text</span>

 The template will not render any specific styling for this new custom syntax but it makes it possible for you to add your own styling via a custom.css file to take advantage of this new syntax.

Custom markup

In addition to adding specific custom icon syntax you can also add your own custom markup syntax. Adding new names to the custom syntax block will allow you render markup as per follows:

html<div class="zen-happy">My happy text</div>

Font Icons

Rendering Font icons

The zen shortcode plugin also makes it possible to render the fonts found in the Font Awesome v4.2 library. The plugin allows you to toggle this option on or off in order to improve the plugin performance.

This is the code for the zen-glass
This is the code for the zen-music
This is the code for the zen-search
This is the code for the zen-envelope-o

This is the code for the zen-heart
This is the code for the zen-star
This is the code for the zen-star-o
This is the code for the zen-user
This is the code for the zen-film
This is the code for the zen-th-large
This is the code for the zen-th
This is the code for the zen-th-list
This is the code for the zen-check
This is the code for the zen-remove
This is the code for the zen-close
This is the code for the zen-times
This is the code for the zen-search-plus
This is the code for the zen-search-minus
This is the code for the zen-power-off
This is the code for the zen-signal
This is the code for the zen-gear
This is the code for the zen-cog
This is the code for the zen-trash-o
This is the code for the zen-home
This is the code for the zen-file-o
This is the code for the zen-clock-o
This is the code for the zen-road
This is the code for the zen-download
This is the code for the zen-arrow-circle-o-down
This is the code for the zen-arrow-circle-o-up
This is the code for the zen-inbox
This is the code for the zen-play-circle-o
This is the code for the zen-rotate-right
This is the code for the zen-repeat
This is the code for the zen-refresh
This is the code for the zen-list-alt
This is the code for the zen-lock
This is the code for the zen-flag
This is the code for the zen-headphones
This is the code for the zen-volume-off
This is the code for the zen-volume-down
This is the code for the zen-volume-up
This is the code for the zen-qrcode
This is the code for the zen-barcode
This is the code for the zen-tag
This is the code for the zen-tags
This is the code for the zen-book
This is the code for the zen-bookmark
This is the code for the zen-print
This is the code for the zen-camera
This is the code for the zen-font
This is the code for the zen-bold
This is the code for the zen-italic
This is the code for the zen-text-height
This is the code for the zen-text-width
This is the code for the zen-align-left
This is the code for the zen-align-center
This is the code for the zen-align-right
This is the code for the zen-align-justify
This is the code for the zen-list
This is the code for the zen-dedent
This is the code for the zen-outdent
This is the code for the zen-indent
This is the code for the zen-video-camera
This is the code for the zen-photo
This is the code for the zen-image
This is the code for the zen-picture-o
This is the code for the zen-pencil
This is the code for the zen-map-marker
This is the code for the zen-adjust
This is the code for the zen-tint
This is the code for the zen-edit
This is the code for the zen-pencil-square-o
This is the code for the zen-share-square-o
This is the code for the zen-check-square-o
This is the code for the zen-arrows
This is the code for the zen-step-backward
This is the code for the zen-fast-backward
This is the code for the zen-backward
This is the code for the zen-play
This is the code for the zen-pause
This is the code for the zen-stop
This is the code for the zen-forward
This is the code for the zen-fast-forward
This is the code for the zen-step-forward
This is the code for the zen-eject
This is the code for the zen-chevron-left
This is the code for the zen-chevron-right
This is the code for the zen-plus-circle
This is the code for the zen-minus-circle
This is the code for the zen-times-circle
This is the code for the zen-check-circle
This is the code for the zen-question-circle
This is the code for the zen-info-circle
This is the code for the zen-crosshairs
This is the code for the zen-times-circle-o
This is the code for the zen-check-circle-o
This is the code for the zen-ban
This is the code for the zen-arrow-left
This is the code for the zen-arrow-right
This is the code for the zen-arrow-up
This is the code for the zen-arrow-down
This is the code for the zen-mail-forward
This is the code for the zen-share
This is the code for the zen-expand
This is the code for the zen-compress
This is the code for the zen-plus
This is the code for the zen-minus
This is the code for the zen-asterisk
This is the code for the zen-exclamation-circle
This is the code for the zen-gift
This is the code for the zen-leaf
This is the code for the zen-fire
This is the code for the zen-eye
This is the code for the zen-eye-slash
This is the code for the zen-warning
This is the code for the zen-exclamation-triangle
This is the code for the zen-plane
This is the code for the zen-calendar
This is the code for the zen-random
This is the code for the zen-comment
This is the code for the zen-magnet
This is the code for the zen-chevron-up
This is the code for the zen-chevron-down
This is the code for the zen-retweet
This is the code for the zen-shopping-cart
This is the code for the zen-folder
This is the code for the zen-folder-open
This is the code for the zen-arrows-v
This is the code for the zen-arrows-h
This is the code for the zen-bar-chart-o
This is the code for the zen-bar-chart
This is the code for the zen-twitter-square
This is the code for the zen-facebook-square
This is the code for the zen-camera-retro
This is the code for the zen-key
This is the code for the zen-gears
This is the code for the zen-cogs
This is the code for the zen-comments
This is the code for the zen-thumbs-o-up
This is the code for the zen-thumbs-o-down
This is the code for the zen-star-half
This is the code for the zen-heart-o
This is the code for the zen-sign-out
This is the code for the zen-linkedin-square
This is the code for the zen-thumb-tack
This is the code for the zen-external-link
This is the code for the zen-sign-in
This is the code for the zen-trophy
This is the code for the zen-github-square
This is the code for the zen-upload
This is the code for the zen-lemon-o
This is the code for the zen-phone
This is the code for the zen-square-o
This is the code for the zen-bookmark-o
This is the code for the zen-phone-square
This is the code for the zen-twitter
This is the code for the zen-facebook
This is the code for the zen-github
This is the code for the zen-unlock
This is the code for the zen-credit-card
This is the code for the zen-rss
This is the code for the zen-hdd-o
This is the code for the zen-bullhorn
This is the code for the zen-bell
This is the code for the zen-certificate
This is the code for the zen-hand-o-right
This is the code for the zen-hand-o-left
This is the code for the zen-hand-o-up
This is the code for the zen-hand-o-down
This is the code for the zen-arrow-circle-left
This is the code for the zen-arrow-circle-right
This is the code for the zen-arrow-circle-up
This is the code for the zen-arrow-circle-down
This is the code for the zen-globe
This is the code for the zen-wrench
This is the code for the zen-tasks
This is the code for the zen-filter
This is the code for the zen-briefcase
This is the code for the zen-arrows-alt
This is the code for the zen-group
This is the code for the zen-users
This is the code for the zen-chain
This is the code for the zen-link
This is the code for the zen-cloud
This is the code for the zen-flask
This is the code for the zen-cut
This is the code for the zen-scissors
This is the code for the zen-copy
This is the code for the zen-files-o
This is the code for the zen-paperclip
This is the code for the zen-save
This is the code for the zen-floppy-o
This is the code for the zen-square
This is the code for the zen-navicon
This is the code for the zen-reorder
This is the code for the zen-bars
This is the code for the zen-list-ul
This is the code for the zen-list-ol
This is the code for the zen-strikethrough
This is the code for the zen-underline
This is the code for the zen-table
This is the code for the zen-magic
This is the code for the zen-truck
This is the code for the zen-pinterest
This is the code for the zen-pinterest-square
This is the code for the zen-google-plus-square
This is the code for the zen-google-plus
This is the code for the zen-money
This is the code for the zen-caret-down
This is the code for the zen-caret-up
This is the code for the zen-caret-left
This is the code for the zen-caret-right
This is the code for the zen-columns
This is the code for the zen-unsorted
This is the code for the zen-sort
This is the code for the zen-sort-down
This is the code for the zen-sort-desc
This is the code for the zen-sort-up
This is the code for the zen-sort-asc
This is the code for the zen-envelope
This is the code for the zen-linkedin
This is the code for the zen-rotate-left
This is the code for the zen-undo
This is the code for the zen-legal
This is the code for the zen-gavel
This is the code for the zen-dashboard
This is the code for the zen-tachometer
This is the code for the zen-comment-o
This is the code for the zen-comments-o
This is the code for the zen-flash
This is the code for the zen-bolt
This is the code for the zen-sitemap
This is the code for the zen-umbrella
This is the code for the zen-paste
This is the code for the zen-clipboard
This is the code for the zen-lightbulb-o
This is the code for the zen-exchange
This is the code for the zen-cloud-download
This is the code for the zen-cloud-upload
This is the code for the zen-user-md
This is the code for the zen-stethoscope
This is the code for the zen-suitcase
This is the code for the zen-bell-o
This is the code for the zen-coffee
This is the code for the zen-cutlery
This is the code for the zen-file-text-o
This is the code for the zen-building-o
This is the code for the zen-hospital-o
This is the code for the zen-ambulance
This is the code for the zen-medkit
This is the code for the zen-fighter-jet
This is the code for the zen-beer
This is the code for the zen-h-square
This is the code for the zen-plus-square
This is the code for the zen-angle-double-left
This is the code for the zen-angle-double-right
This is the code for the zen-angle-double-up
This is the code for the zen-angle-double-down
This is the code for the zen-angle-left
This is the code for the zen-angle-right
This is the code for the zen-angle-up
This is the code for the zen-angle-down
This is the code for the zen-desktop
This is the code for the zen-laptop
This is the code for the zen-tablet
This is the code for the zen-mobile-phone
This is the code for the zen-mobile
This is the code for the zen-circle-o
This is the code for the zen-quote-left
This is the code for the zen-quote-right
This is the code for the zen-spinner
This is the code for the zen-circle
This is the code for the zen-mail-reply
This is the code for the zen-reply
This is the code for the zen-github-alt
This is the code for the zen-folder-o
This is the code for the zen-folder-open-o
This is the code for the zen-smile-o
This is the code for the zen-frown-o
This is the code for the zen-meh-o
This is the code for the zen-gamepad
This is the code for the zen-keyboard-o
This is the code for the zen-flag-o
This is the code for the zen-flag-checkered
This is the code for the zen-terminal
This is the code for the zen-code
This is the code for the zen-mail-reply-all
This is the code for the zen-reply-all
This is the code for the zen-star-half-empty
This is the code for the zen-star-half-full
This is the code for the zen-star-half-o
This is the code for the zen-location-arrow
This is the code for the zen-crop
This is the code for the zen-code-fork
This is the code for the zen-unlink
This is the code for the zen-chain-broken
This is the code for the zen-question
This is the code for the zen-info
This is the code for the zen-exclamation
This is the code for the zen-superscript
This is the code for the zen-subscript
This is the code for the zen-eraser
This is the code for the zen-puzzle-piece
This is the code for the zen-microphone
This is the code for the zen-microphone-slash
This is the code for the zen-shield
This is the code for the zen-calendar-o
This is the code for the zen-fire-extinguisher
This is the code for the zen-rocket
This is the code for the zen-maxcdn
This is the code for the zen-chevron-circle-left
This is the code for the zen-chevron-circle-right
This is the code for the zen-chevron-circle-up
This is the code for the zen-chevron-circle-down
This is the code for the zen-html5
This is the code for the zen-css3
This is the code for the zen-anchor
This is the code for the zen-unlock-alt
This is the code for the zen-bullseye
This is the code for the zen-ellipsis-h
This is the code for the zen-ellipsis-v
This is the code for the zen-rss-square
This is the code for the zen-play-circle
This is the code for the zen-ticket
This is the code for the zen-minus-square
This is the code for the zen-minus-square-o
This is the code for the zen-level-up
This is the code for the zen-level-down
This is the code for the zen-check-square
This is the code for the zen-pencil-square
This is the code for the zen-external-link-square
This is the code for the zen-share-square
This is the code for the zen-compass
This is the code for the zen-toggle-down
This is the code for the zen-caret-square-o-down
This is the code for the zen-toggle-up
This is the code for the zen-caret-square-o-up
This is the code for the zen-toggle-right
This is the code for the zen-caret-square-o-right

This is the code for the zen-euro
This is the code for the zen-eur
This is the code for the zen-gbp
This is the code for the zen-dollar
This is the code for the zen-usd
This is the code for the zen-rupee
This is the code for the zen-inr
This is the code for the zen-cny
This is the code for the zen-rmb
This is the code for the zen-yen
This is the code for the zen-jpy
This is the code for the zen-ruble
This is the code for the zen-rouble
This is the code for the zen-rub
This is the code for the zen-won
This is the code for the zen-krw
This is the code for the zen-bitcoin
This is the code for the zen-btc
This is the code for the zen-file
This is the code for the zen-file-text
This is the code for the zen-sort-alpha-asc
This is the code for the zen-sort-alpha-desc
This is the code for the zen-sort-amount-asc
This is the code for the zen-sort-amount-desc
This is the code for the zen-sort-numeric-asc
This is the code for the zen-sort-numeric-desc
This is the code for the zen-thumbs-up
This is the code for the zen-thumbs-down
This is the code for the zen-youtube-square
This is the code for the zen-youtube
This is the code for the zen-xing
This is the code for the zen-xing-square
This is the code for the zen-youtube-play
This is the code for the zen-dropbox
This is the code for the zen-stack-overflow
This is the code for the zen-instagram
This is the code for the zen-flickr
This is the code for the zen-adn
This is the code for the zen-bitbucket
This is the code for the zen-bitbucket-square
This is the code for the zen-tumblr
This is the code for the zen-tumblr-square
This is the code for the zen-long-arrow-down
This is the code for the zen-long-arrow-up
This is the code for the zen-long-arrow-left
This is the code for the zen-long-arrow-right
This is the code for the zen-apple
This is the code for the zen-windows
This is the code for the zen-android
This is the code for the zen-linux
This is the code for the zen-dribbble
This is the code for the zen-skype
This is the code for the zen-foursquare
This is the code for the zen-trello
This is the code for the zen-female
This is the code for the zen-male
This is the code for the zen-gittip
This is the code for the zen-sun-o
This is the code for the zen-moon-o
This is the code for the zen-archive
This is the code for the zen-bug
This is the code for the zen-vk
This is the code for the zen-weibo
This is the code for the zen-renren
This is the code for the zen-pagelines
This is the code for the zen-stack-exchange
This is the code for the zen-arrow-circle-o-right
This is the code for the zen-arrow-circle-o-left
This is the code for the zen-toggle-left
This is the code for the zen-caret-square-o-left
This is the code for the zen-dot-circle-o
This is the code for the zen-wheelchair
This is the code for the zen-vimeo-square
This is the code for the zen-turkish-lira
This is the code for the zen-try
This is the code for the zen-plus-square-o
This is the code for the zen-space-shuttle
This is the code for the zen-slack
This is the code for the zen-envelope-square
This is the code for the zen-wordpress
This is the code for the zen-openid
This is the code for the zen-institution
This is the code for the zen-bank
This is the code for the zen-university
This is the code for the zen-mortar-board
This is the code for the zen-graduation-cap
This is the code for the zen-yahoo
This is the code for the zen-google
This is the code for the zen-reddit
This is the code for the zen-reddit-square
This is the code for the zen-stumbleupon-circle
This is the code for the zen-stumbleupon
This is the code for the zen-delicious
This is the code for the zen-digg
This is the code for the zen-pied-piper
This is the code for the zen-pied-piper-alt
This is the code for the zen-drupal
This is the code for the zen-joomla
This is the code for the zen-language
This is the code for the zen-fax
This is the code for the zen-building
This is the code for the zen-child

This is the code for the zen-paw
This is the code for the zen-spoon
This is the code for the zen-cube
This is the code for the zen-cubes
This is the code for the zen-behance
This is the code for the zen-behance-square
This is the code for the zen-steam
This is the code for the zen-steam-square
This is the code for the zen-recycle
This is the code for the zen-automobile
This is the code for the zen-car
This is the code for the zen-cab
This is the code for the zen-taxi
This is the code for the zen-tree
This is the code for the zen-spotify
This is the code for the zen-deviantart
This is the code for the zen-soundcloud
This is the code for the zen-database
This is the code for the zen-file-pdf-o
This is the code for the zen-file-word-o
This is the code for the zen-file-excel-o
This is the code for the zen-file-powerpoint-o
This is the code for the zen-file-photo-o
This is the code for the zen-file-picture-o
This is the code for the zen-file-image-o
This is the code for the zen-file-zip-o
This is the code for the zen-file-archive-o
This is the code for the zen-file-sound-o
This is the code for the zen-file-audio-o
This is the code for the zen-file-movie-o
This is the code for the zen-file-video-o
This is the code for the zen-file-code-o
This is the code for the zen-vine
This is the code for the zen-codepen
This is the code for the zen-jsfiddle
This is the code for the zen-life-bouy
This is the code for the zen-life-buoy
This is the code for the zen-life-saver
This is the code for the zen-support
This is the code for the zen-life-ring
This is the code for the zen-circle-o-notch
This is the code for the zen-ra
This is the code for the zen-rebel
This is the code for the zen-ge
This is the code for the zen-empire
This is the code for the zen-git-square
This is the code for the zen-git
This is the code for the zen-hacker-news
This is the code for the zen-tencent-weibo
This is the code for the zen-qq
This is the code for the zen-wechat
This is the code for the zen-weixin
This is the code for the zen-send
This is the code for the zen-paper-plane
This is the code for the zen-send-o
This is the code for the zen-paper-plane-o
This is the code for the zen-history
This is the code for the zen-circle-thin
This is the code for the zen-header
This is the code for the zen-paragraph
This is the code for the zen-sliders
This is the code for the zen-share-alt
This is the code for the zen-share-alt-square
This is the code for the zen-bomb
This is the code for the zen-soccer-ball-o
This is the code for the zen-futbol-o
This is the code for the zen-tty
This is the code for the zen-binoculars
This is the code for the zen-plug
This is the code for the zen-slideshare
This is the code for the zen-twitch
This is the code for the zen-yelp
This is the code for the zen-newspaper-o
This is the code for the zen-wifi
This is the code for the zen-calculator
This is the code for the zen-paypal
This is the code for the zen-google-wallet
This is the code for the zen-cc-visa
This is the code for the zen-cc-mastercard
This is the code for the zen-cc-discover
This is the code for the zen-cc-amex
This is the code for the zen-cc-paypal
This is the code for the zen-cc-stripe
This is the code for the zen-bell-slash
This is the code for the zen-bell-slash-o
This is the code for the zen-trash
This is the code for the zen-copyright
This is the code for the zen-at
This is the code for the zen-eyedropper
This is the code for the zen-paint-brush
This is the code for the zen-birthday-cake
This is the code for the zen-area-chart
This is the code for the zen-pie-chart
This is the code for the zen-line-chart
This is the code for the zen-lastfm
This is the code for the zen-lastfm-square
This is the code for the zen-toggle-off
This is the code for the zen-toggle-on
This is the code for the zen-bicycle
This is the code for the zen-bus
This is the code for the zen-ioxhost
This is the code for the zen-angellist
This is the code for the zen-cc
This is the code for the zen-shekel
This is the code for the zen-sheqel
This is the code for the zen-ils
This is the code for the zen-meanpath