This plugin contains Rich's favorite formatting shortcodes. It was written to solve problems Rich had with his own and clients' websites. And for ease of maintenance, it was placed in standard plugin form.
But it's not offered to the general public.
As an example, in WordPress it's somewhat difficult to set up columns, especially something that might display an icon on the left and text on the right. WooThemes has a solution, but it's cumbersome. So Rich created the ezcol shortcode.
And in 2011-12 it was difficult to find a plugin that would handle audio playable by HTML5 browsers (especially iPad and iPhone which won't play Flash), so Rich devised a shortcode that generates HTML5 audio code, except for FireFox and Opera browsers it does a Flash player for mp3 audio files since those browsers can't handle mp3 files with html5 code.
More tricks? A red-green buy button, dashed "Order Form" box, and more. It duplicates certain WooThemes shortcodes for websites that used a theme by WooThemes but switched out, providing flexibility. It sets Excerpt field availability in Post edits and, if you're using Contact Form 7, it sets access to administrators with "option edit" privileges only.
How do shortcodes work? On your Page or Post you place the shortcode where you want the special format or expanded code to appear. Normally you modify the shortcode somewhat by specifying special attributes within the [shortcodename] brackets, as in :
Note that if you're assigning more than one word as a value, the value must be enclosed in quotation marks.
In a few cases (like ezcol columns) you will use opening and closing shortcodes to enclose other text. This looks like this:
Note the closing shortcode uses a forward-slash between the opening bracket and the shortcode name.
More than Shortcodes
The RYO Formatter does more. We've included widgets:
- Page Widget: Takes the content of a Page and inserts it into a sidebar widget. Easily edit sidebar text.
- HTML Widget: Add HTML code or text... just like a Text Widget, but without the themes widget formatting. Eliminates borders, colors, etc., and allows to to place some HTML directly in a sidebar or other widgetized area.
- Ad Widget: Add an advertising box, styled to look like the ads placed by the big ad networks, but advertise your products instead.
We've also enabled ebook uploads with the media uploader and given you an option to block video uploads. (This is handy if you want all your videos loaded on Amazon S3 or another content delivery network.
If you need to place an email address on a page, enclose it in angle brackets and the plugin will encode it so 90% of the spambots won't harvest the email from your webpage. We'll also automatically set up a link so users can click the link to email; you don't need to bother, just a simple <name@example.com> will result in name@example.com.
Here are the details:
Timed Display
Specify certain text to appear before or after a certain date. This is handy for offers or meetings that you don't want to show on a page outside of a valid time. It's easy with this shortcode:
[tshow start=20171201 end=20171231]December copy[/tshow]
The above codes would display "December copy" from December 1 - December 31.
Date codes can include the time, if you wish, demonstrated in the following code:
[tshow start=20171203t13:00:00]After Lunch December 3rd[/tshow]
The above codes would display "After Lunch December 3rd" starting at 1pm on December 3rd.
Note that the date is shown in YYYYMMDD form, but that can vary, especially if you want to include the time.
Examples of date (and time) notation:
- 20131203
- 20131203T22:38:07
- 20131203t223807
Note that time is noted with a 24-hour clock and is based on your website's local time.
QRCodes
Want to set up a QR Code in your page so someone can point their smartphone at it and load a web page, call a number, or send a text? It's easy with the ryoqrcode shortcode.
The QR Code takes this form:
[ryoqrcode url=http://automationbasics.com]
The code above results in this image, the QR Code:
The example uses a url to deliver to a specific web address, but you have options.
Use these attributes to customize your QR Code:
- url: Set this attribute and your user will be delivered to this web address. The image will also be hyperlinked to that web address so users can click the image as well as scan it on their smartphone.
- phone: Set this attribute and your user will call the specified phone number
- textno: Set this and a text will be set to this text number. This must be used with txtmsg.
- textmsg: Set this and a text will be set with this message. This must be used with txtno.
- data: Use this for any other text that matches a format recognized by QR Code readers.
- size: Normally set to 4, you may make a larger or smaller QR Code image by setting this to the desired size number, as in size=12. Maximum 40. On a website, I normally start with a size=4. If I'm generating a QR Code that will be used in print, I would start with a size=12. Then I'd adjust from there to get a desired size.
- alt: The QR Code is an image, and you can set the Alt tag if desired, as in alt="Moxie Movie" ... it defaults to "QR Code".
To create a QR Code for a print project, you want it to be a print-quality image, so set size to a larger number like 12 or 18. Then save the image to a file on your computer; right click the image and chose "Save Picture As" or 'Save Image As."
EZ Columns
Tired of trying to set up tables or columns in WordPress? Here's the easy way: The ezcol shortcode.
The code takes this form:
[ezcol nWidth]Text (or image code).[/ezcol]
The nWidth should be a number representing the percentage of the overall column width this column should take. For the last (rightmost) column, instead of a number, include the word last, and the remaining space will be used.
For example, this code:
[ezcol 25]This is the first column, set to 25 percent width.[/ezcol]
[ezcol 20]This is the second column, set to 20 percent width.[/ezcol]
[ezcol last]This is the third column, set to the remaining width.[/ezcol]
[ezcol 25]Row 2, Cell 1[/ezcol]
[ezcol 20]Row 2, Cell 2. With some additional text.[/ezcol]
[ezcol last]Row 2, Cell 3.[/ezcol]
[ezcol 25]Row 3, Cell 1.[/ezcol]
[ezcol 20]Row 3, Cell 2.[/ezcol]
[ezcol last]Row 3, Cell 3.[/ezcol]
Displays like this:
Hints:
- The keyword 'last' is optional. If you do not supply a width the column will fill the rest of the remaining area, as if you had used 'last.'
- If you want to center the text in the column, add the word center or the letter c after the width, as in:
- If you want the text right justified in the column, add the word right or the letter r after the width, as in:
Icon Columns
Want to display an icon on the left, with text neatly set to the right but not wrapping around the icon? Use ezcol like this:
[ezcol 18]<img src="https://ryowebsite.com/wp-content/uploads/2012/01/icons.png" alt="" title="icons" width="64" height="64" >
[ezcol last]Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.[/ezcol]
In the Visual editor you'll actually see the image in line, like this:
[ezcol 18]
[/ezcol]
[ezcol last]Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.[/ezcol]
We repeated that here twice to demonstrate what it will look like on your page:
We set the left column at 18 but that might vary depending on your icons and layout.
Audio Player
Use the ryoaudio shortcode to play an audio file on your Post or Page. We had trouble finding a good audio player for WordPress, so we developed this.
The trick is that iPad and iPhone... and some other browsers... won't work with Flash so they insist on something called HTML5 to play audio. But some other browsers will not play mp3 files with HTML5, instead preferring a Flash player.
One answer is to create both mp3 and ogg versions of your audio, upload both, and use HTML5 code that specifies both. Another answer is to detect the browsers that require Flash for mp3 audio, and deliver Flash code for playback, and deliver HTML5 code for the others. (And for users with old versions of browsers that won't play HTML5, deliver the Flash version. (There's no one form of audio that they will all play. Crazy, huh? Details.)
Our solution handles both options.
You will need to upload the audio file(s) either with FTP or the WordPress media loader. Be sure to copy the full http address to the audio after it is uploaded so you can put the value in the shortcode.
The code takes this form:
[ryoaudio mp3=http://www.w3schools.com/html5/song.mp3]
Which displays:
Use these attributes to customize your audio player:
- mp3: This is the full address to your mp3 audio file (starting with http).The rest of these attributes are optional.
- ogg: This is the full address to your ogg audio file (starting with http), if you choose to upload one.
- wav: This is the full address to your wav audio file (starting with http), if you choose to upload one.
- title: This text will be added above the audio player.
- download: By default, the file will be offered for download using the text "Download Audio to Computer or iPod." If you don't want this option, set download=0, or if you want different text, set download="The download text you want".
- caption: This text will be placed under the audio player.
- float: Set float=right and the player will be on the right side of the column with text flowing around it. Sel float=left and the player will be placed on the left with text flowing around it.
- autoplay: Set autoplay=1 and the audio will begin playing as soon as the page is loaded.
- s3: If you've uploaded your audio file to Amazon S3 you don't have to make it public there. Set s3=60 and the audio file should include the complete s3 url.
Amazon S3 Option: You can also upload the videos to your Amazon S3 account, if you have one, and protect the content so it can be seen only from your page. Just set the s3 value to 60 (or however many minutes you want the link to be valid). Users must start a video within the alotted time or it will not be delivered by Amazon. (Of course, if the refresh their page the urls are updated so they can still watch... but they can't share the video url because it will expire soon.)
You record your Amazon S3 credentials in the RYO Formatter settings panel.
Video Embed
Embed a video on your web page from YouTube or a video you upload to your own website.
YouTube Video: For YouTube, all you need is the YouTube video number. The code takes this form:
[ryovideo youtube=7EYAUazLI9k]
This results in this:
The 480x360 size here can be made bigger or smaller by setting width and height attributes.
Other Video: When you're hosting the video on your own account, we can help there, too, with mp4, ogg, webm and flv video formats.
For maximum impact, we recommend mp4 (files end with .mp4 or .m4v). These will show on iPhone and iPad as well as computers.
The different video types are handled with separate attributes in the shortcode:
mp4=http://www.w3schools.com/html5/movie.mp4
ogg=http://www.w3schools.com/html5/movie.ogg
webm=http://www.w3schools.com/html5/movie.webm
flv=http://www.w3schools.com/html5/movie.flv
To insert videos, upload them using the media uploader, then copy the full URL (web address) to the video to place in the shortcode, like this:
[ryovideo mp4=https://ryowebsite.com/wp-content/uploads/2012/01/SampleVideo.mp4]
Here's an example of how that works:
Amazon S3 Option: You can also upload the videos to your Amazon S3 account, if you have one, and protect the content so it can be seen only from your page. Just set the s3 value to 60 (or however many minutes you want the link to be valid). Users must start a video within the alotted time or it will not be delivered by Amazon. (Of course, if they refresh their page the urls are updated so they can still watch... but they can't share the video url because it will expire soon.)
You record your Amazon S3 credentials in the RYO Formatter settings panel.
Video Popup Option
If you'd like to have your video available as a link rather than embedding the full image, you can add text to be linked within a shortlink pair using the special shortlink ryopopvideo, as in:
Want to [ryopopvideo mp4=https://ryowebsite.com/wp-content/uploads/2012/01/SampleVideo.mp4]Click for Video[/ryopopvideo]? Ok!
When you do this only the link will appear, and when clicked, the video will be in a popup:
Want to Click for Video? Ok!
We generally recommend against using popups like this because they may not be effective on mobile devices.
Use these optional attributes to customize your embedded or pop-up video:
- width: Normally 480, you may set value as in width=640
- height: Normally 360, you may set value as in height=480
- autoplay: Normally not autoplay, to turn on set autoplay=1
(May not function in popup mode)- hd: Normally high definition, to turn off hd set hd=0
(YouTube only)- controls: Normally controls are on, to turn off set controls=0
S3 Links
Need to link to a file you've stored in your Amazon S3 account? Just use the s3link shortcode, like this:
Click [s3link url=https://s3.amazonaws.com/bucketname/folder/filename.pdf]Here[/s3link]
Secret code will be added to the link so the file will be accessed from Amazon properly using the credentials provided in the RYO Formatter Settings.
Use these optional attributes to customize your link:
- url: The full url from Amazon, starting with http
- target: Defaults to "_blank".
- minutes: The number of minutes the link will stay active. Defaults to 60.
Popup Box
Want a link that pops up a different webpage? Easy with the ryopop shortcode. Here's an example:
See [ryopop url=http://richhamilton.com]Rich's Website[/ryopop]
Which results in:
See Rich's Website
Use these attributes to setup your pop-up box:
- url: This is the full url (web address) to the page you want to display
- title: Optional. This is the text that appears in the title bar at the top of the box. Normally it displays the url, but you can set it to whatever you want. If you don't want it to show anything, set title=blank
Share This Page by Email
Now you can add a link on your page offering the reader a chance to share the page (or the video, or the podcast, or whatever) by clicking a link. And when they click the link, it opens their email program to send it... so you can't get accused of spam!
Just add this shortcode:
[ryoemail]
That's all you have to do!
Use these optional attributes to customize your link:
- text: This is the text you want to display in the link. Default: Send this page to a friend
- subject: This is the subject line that will appear in the email. It defaults to the title of the Post or Page
- message: This is a short message that appears before the page url. Default: I thought you might like this:
- url: This is the full url (web address) to the page you want to display. It defaults to the current page.
Here's an example of a customized link:
[ryoemail text="Share this video" subject="I think you'll like this Tiger video"]
Add Orderbox/Dash Box
Add a simple light yellow order box with a dashed line border to your web page.
The code takes this form:
[dashbox]
Text you want in the box
[/dashbox]
That code will look like this:
Use these optional attributes to customize your audio player:
- background: Enter a background color using standard 6-digit notation (starting with the # sign).
- borderwidth: The border is normally 5px wide but you can change that by setting the width as in borderwidth=3px.
- bordercolor: The border color is normally black but you can change that by entering a different color using standard 6-digit notation (starting with the # sign).
- background: .
Red-Green "Buy" Button
Many marketers have had success with a "red-green" buy button. This is a button that has a red border, but it changes to green when the mouse goes over it. It's easy with the redgreenbutton shortcode.
The code takes this form:
[redgreenbutton url=http://example.com/shoppingcartpage.htm]
This results in this:
The url attribute is required; it tells the button where you want the user redirected.
Use these optional attributes to customize your button:
- text: Normally "Click Here" you may customize it with anything you wish. Just set text="Buy Now"
- target: Normally set to stay in the same window but break frames so a secure shopping page can be accessed, but you can change that to a new tab/window by setting target=_blank
- fontsize: Normally 22px, set it to another desired size as in fontsize=18px
- width: Normally 90%, set it to another size as in width=400px or width=80%
- height: Normally 40px, set it to another size as in height=42px
you can change it to a new tab or window by setting target=_blank- red: Change the shade of red to any color using standard 6-digit notation (starting with the # sign)
- green: Change the shade of green to any color using standard 6-digit notation (starting with the # sign)
Use the redgreenbutton inside a dashbox for this effect:
Add Line Returns
Want to add some blank lines but WordPress seems to thwart your efforts? Especially with the visual editor? Use the linereturn shortcode.
The code takes this form:
[linereturn nLines]
The nLines should be a number representing the number of blank lines you want to insert. Or use the word all instead of a number to clear all floating elements such as images that may be near the text.
Also see "Horizontal Rule," especially the "divider" shortcode.
Insert Iframe
I had a real estate client who needed to set up a page that displayed his listings from another website as part of a Listings page on his website. That meant we needed to insert an iframe, size it properly, and load the other website's page inside our page. The url attribute is required, and should start with "http". The code takes this form:
[insertframe url="http://example.com/pathtopage/page.html"]
Use these optional attributes to customize your iframe:
- width: Normally set at 100% which will fill the current column, you may set value as in width=400px
- height: Normally set at 800, you may set value as in height=300
The following shortcodes we learned from WooThemes (Thanks!)
Highlight
Highlight text to make certain words stand out. The code takes this form:
We want to make [highlight]these words[/highlight] stand out.
This results in this:
We want to make these words stand out.
Drop Cap
The code takes this form:
[dropcap]T[/dropcap]his highlights a "T" as the first letter in the Post. The dropcap has been used in books at the first of each chapter and has been found effective in advertising as it seems to direct attention to the beginning of the text. The text will normally wrap around the dropcap. Use this technique sparingly.
This results in this:
This highlights a "T" as the first letter in the Post. The dropcap has been used in books at the first of each chapter and has been found effective in advertising as it seems to direct attention to the beginning of the text. The text will normally wrap around the dropcap. Use this technique sparingly.
Quote
The code takes this form:
[quote]"Ta ta for now!"[linereturn]-- Tigger[/quote]
Example:
Use these optional attributes to customize your quote box:
- style: Normally boxed, you may set style=none
- float: Normally not floated with a quote box that fills most of the column, you may make the quote box narrower and position it by setting float=left or float=right
Horizontal Rule
There are three forms of what we call the horizontal rule.
The first, a true horizontal rule, takes this form:
[hr]
This results in:
The second we call "divider." It sets up an invisible horizontal rule; it takes this form:
[divider]
This results in:
You can't really see anything (it's invisible) but it sets up a 40px wide horizontal bar that can be used to divide sections on a page.
The third we call "divider_flat." It sets up an invisible horizontal rule that's not 40px thick. It takes this form:
[divider_flat]
This results in:
You can't really see anything here, either, but it sets up a 0px wide horizontal bar that can be used to divide sections on a page. This may be useful after inserting an image with text wrapping around it, but not enough text to completely surround the image. You want to continue with a new section, or another photo, and not have things stacking up strangely. Insert a divider_flat between the sections.
Box
This is a nice way to add a box with text to the page. The code takes this form:
[box]
Text in box
[/box]
This results in this:
Use these optional attributes to customize your box:
- size: Normally medium, you may set size=large
- style: Normally rounded, you may set style=normal
- border: Normally full, you may set border=none
- tint: Normally a light grey, you may set the background to any standard color code, as in
tint=#ffdd789- color: Normally black, you may set the font color to any standard color code, as in
color=#23769D- icon: Normally none, you may set
icon=http://example.com/path/iconimage.jpg
Anchor
It can be handy to place an anchor on a page so you can create a link that goes not just to the page but to that position on the page. It's a handy HTML code trick, and a bit inconvenient in the WordPress Visual Editor. So we made a handy shortcut that does it for you! It's the "addanchor" shortcode, and you place it with the anchor text you want to identify that part of the page.
Suppose you wanted to direct users to your About Us Page, jumping directly to the "Highlights" area. You'd add this code just before the Highlights area:
[addanchor highlights]
This places the code, and you can write a link to connect to the page by adding # and the anchor text to the url, like this:
http://example.com/about-us/#highlights