Pages Navigation Menu

a pixelated personality

Flashy Shortcodes

Flashy Shortcodes

WordPress shortcode functions were first introduced in WordPress 2.5. Shortcodes and WordPress functions are power tools when it comes to massaging WordPress websites into shape. Instead of relying on complicated CSS and HTML, a user can simply insert a shortcode and VOILA!; save an hours worth of coding. This is the beauty of WordPress shortcodes and functions; the quick and easy path to making your blogging chores easier. The following is my private functions plugin with a potpourri of formatting functions. Feel free to download and hack away to get the custom look and ease of use you are looking for.

Notes

My plugin should be compatible with other WordPress plugins that introduce functions to ones WordPress website or blog – I have taken special pains to keep my naming conventions unique.

Example shortcodes below have added space between the opening and closing brackets. Do not use extra space when adding shortcode to your WordPress pages and or posts.
[dividerline-dashed]

Hard Break

From time to time it is necessary to force a break between content areas. I find this useful especially when working with photos that have been left or right aligned with content.

This shortcode adds behind the scenes  <br clear=”all” /> – If your prefer <div class=”clear”></div> , Feel free to edit the plugin and modify it to suit your needs.

Use the shortcode [ br ]

Divider Lines

[dividerline-solid]

Enter the shortcode [ dividerline-solid ] to create a thin horizontal line to dived content. You can see it in use below. Other available lines are

[ dividerline-dashed ]

[dividerline-dashed]

[ dividerline-dotted ]

[dividerline-dotted]

Lorem Ipsum

Great for adding filler text when developing sites.
Use shortcode [ lorem ]
Result: [lorem]

Drop Caps

Use shortcode [ dropcap color=#97172A ]X[ /dropcap] (Named colors ok, such as Red, Blue, Gray…)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum, justo vel fringilla fringilla, turpis mi facilisis erat, vel rutrum turpis turpis et enim. Suspendisse elit ligula, gravida vel aliquet vitae, accumsan vitae eros. Nam ut orci nisl, id viverra metus. Morbi cursus tempus ornare. Vivamus lacus nisi, feugiat at dapibus quis, consectetur molestie nibh. Nulla vel lectus augue. Curabitur aliquam euismod augue, nec cursus nunc elementum quis! Etiam imperdiet pretium enim ut feugiat. Phasellus vel erat odio. Vivamus rhoncus tincidunt sem eget posuere? Quisque interdum, leo et commodo sollicitudin, nulla nisl gravida tortor, commodo porttitor erat magna sed ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pull Quotes

Below is an example of a left aligned pull quote. The shortcode for this is [ pullquoteleft ]Your groovy quote text, your groovy quote text your groovy quote text your groovy quote text[ /pullquoteleft ]

One can additionally use [ pullquoteright ] and [ pullquotecenter ]

Log in and edit this page in HTML view to see how I have used it here.

Note: The shortcodes above have a space purposefully added to deactivate their function. Shortcodes you use will not have any spaces.

[pullquote-left]One smart fellow, he felt smart. Two smart fellows, they felt smart. Three smart fellows, they all felt smart. [/pullquote-left]Etiam quam nisl, ullamcorper non luctus id, elementum sollicitudin magna? Nunc sed tellus at risus molestie aliquam eget vehicula enim. Morbi fringilla sem in quam cursus semper. Suspendisse ac tortor ante, vel pellentesque nisi. Maecenas dictum mollis metus eu interdum. Donec at enim at purus elementum tempus. Sed consectetur facilisis nibh id placerat. Maecenas sit amet interdum justo. Sed euismod fermentum ligula, eget consequat arcu mollis sed. In in ligula sollicitudin urna sollicitudin fringilla. Nunc et lacus non lorem scelerisque sodales et nec lorem. Nulla pellentesque orci justo, quis ultricies justo. Suspendisse eget ante sit amet sapien feugiat congue nec eu quam.

Pellentesque nibh ante, sagittis pharetra ultrices sed, venenatis a neque? Nullam accumsan, nulla in viverra posuere, augue nulla porttitor massa, in pretium ante eros eget risus. Praesent eget nisi non dolor placerat ultricies. Praesent vehicula accumsan nisl; bibendum porta augue adipiscing et. Nullam pellentesque convallis eros, eget condimentum dolor gravida ac. Vivamus id velit velit, ut aliquam tortor. Integer vitae turpis eu risus ullamcorper ornare. Morbi eget urna quis nisi faucibus iaculis nec in lacus. Donec dignissim tempus augue non vulputate? Vestibulum ac urna purus, at ultricies enim. Sed facilisis semper est. Nullam laoreet vehicula purus.

Curabitur eu ante vel turpis pretium ultrices. In hac habitasse platea dictumst. Aliquam felis ante, laoreet eu molestie at, rhoncus a massa. Maecenas placerat, risus a tincidunt laoreet, elit enim semper nunc, quis laoreet velit nulla a erat. Ut nec aliquet enim? Aenean ornare purus libero, at hendrerit eros. Nullam vestibulum, ipsum eu hendrerit ultricies, augue eros tempor turpis; id mollis justo libero quis risus. Mauris orci enim, condimentum et gravida sed, eleifend eu elit. Fusce posuere elit eu mi posuere euismod? Pellentesque turpis erat, porttitor sollicitudin consectetur in, commodo nec lorem. In malesuada sem in leo fringilla ac tristique quam hendrerit. Suspendisse potenti. Praesent quam massa, ultrices quis malesuada vitae, aliquam in metus! Morbi non dolor at augue lacinia varius quis nec enim. Nunc vehicula sodales quam, in molestie diam semper eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam justo velit, consequat sit amet semper hendrerit, ullamcorper sed nibh? Mauris viverra porta sapien nec posuere.

[dividerline-solid]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tortor in sapien lacinia vulputate id ut dui. Cras facilisis imperdiet dui, quis accumsan tortor pretium at. Pellentesque pellentesque leo et sapien volutpat non condimentum ipsum gravida. Mauris sed nunc mi; non blandit quam. Etiam quam nisl, ullamcorper non luctus id, elementum sollicitudin magna? Nunc sed tellus at risus molestie aliquam eget vehicula enim. Morbi fringilla sem in quam cursus semper. Suspendisse ac tortor ante, vel pellentesque nisi. Maecenas dictum mollis metus eu interdum. Donec at enim at purus elementum tempus. Sed consectetur facilisis nibh id placerat. Maecenas sit amet interdum justo. Sed euismod fermentum ligula, eget consequat arcu mollis sed. In in ligula sollicitudin urna sollicitudin fringilla. Nunc et lacus non lorem scelerisque sodales et nec lorem. Nulla pellentesque orci justo, quis ultricies justo. Suspendisse eget ante sit amet sapien feugiat congue nec eu quam. [pullquote-right]Pellentesque nibh ante, sagittis pharetra ultrices sed, venenatis a neque? Nullam accumsan, nulla in viverra posuere, augue nulla porttitor massa, in pretium ante eros eget risus. Praesent eget nisi non dolor placerat ultricies. [/pullquote-right]Praesent vehicula accumsan nisl; bibendum porta augue adipiscing et.Nullam pellentesque convallis eros, eget condimentum dolor gravida ac. Vivamus id velit velit, ut aliquam tortor. Integer vitae turpis eu risus ullamcorper ornare. Morbi eget urna quis nisi faucibus iaculis nec in lacus. Donec dignissim tempus augue non vulputate? Vestibulum ac urna purus, at ultricies enim. Sed facilisis semper est. Nullam laoreet vehicula purus.Curabitur eu ante vel turpis pretium ultrices. In hac habitasse platea dictumst. Aliquam felis ante, laoreet eu molestie at, rhoncus a massa.Maecenas placerat, risus a tincidunt laoreet, elit enim semper nunc, quis laoreet velit nulla a erat. Ut nec aliquet enim? Aenean ornare purus libero, at hendrerit eros. In malesuada sem in leo fringilla ac tristique quam hendrerit. Suspendisse potenti. Praesent quam massa, ultrices quis malesuada vitae, aliquam in metus! Morbi non dolor at augue lacinia varius quis nec enim. Nunc vehicula sodales quam, in molestie diam semper eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam justo velit, consequat sit amet semper hendrerit, ullamcorper sed nibh?Mauris orci enim, condimentum et gravida sed, eleifend eu elit. Fusce posuere elit eu mi posuere euismod? Pellentesque turpis erat, porttitor sollicitudin consectetur in, commodo nec lorem. In malesuada sem in leo fringilla ac tristique quam hendrerit. Suspendisse potenti. Praesent quam massa, ultrices quis malesuada vitae, aliquam in metus! Morbi non dolor at augue lacinia varius quis nec enim. Nunc vehicula sodales quam, in molestie diam semper eu.[pullquote-center]Nullam vestibulum, ipsum eu hendrerit ultricies, augue eros tempor turpis; id mollis justo libero quis risus. [/pullquote-center]Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam justo velit, consequat sit amet semper hendrerit, ullamcorper sed nibh? Mauris viverra porta sapien nec posuere.

[dividerline-dashed]

[narrow-light]Narrow Light :: eros est, consequat eu congue ultrices, feugiat sed tellus. Nam sagittis orci sed augue convallis imperdiet. Nam sit amet massa ut purus dignissim condimentum vel at nulla. Vestibulum nisi sapien, commodo quis pharetra ut, aliquam ut sem! Vivamus venenatis lorem ac eros volutpat a aliquam purus sollicitudin.[narrow-light] Mauris suscipit neque a ante condimentum porttitor. In dictum, magna eu rutrum blandit, sem dui vehicula quam, quis suscipit odio lacus in turpis. Sed ut sem quam. Proin ut turpis ligula, ac aliquet orci. Donec posuere, libero semper laoreet euismod, odio dui varius libero, vitae vulputate purus dolor quis justo. Vivamus augue arcu, bibendum eget fringilla at, rutrum at nunc. Donec sollicitudin, augue sit amet tristique eleifend, erat lorem convallis elit; ac congue magna eros quis erat. Sed pellentesque pellentesque consectetur.

[dividerline-dotted]

Donec nisi leo, ullamcorper vel suscipit at, vestibulum quis mauris. Donec nec mi et lacus sodales interdum ut non metus. Integer sagittis sagittis iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ipsum turpis; a luctus enim. Sed dapibus lacus in tortor pellentesque nec aliquet ligula condimentum? Curabitur congue pulvinar dui, nec tincidunt sapien tristique in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eu molestie nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet est ante, at rutrum turpis. Praesent venenatis venenatis sagittis. In felis sem, dignissim id iaculis id, viverra sit amet nulla. Praesent auctor accumsan dolor, dignissim blandit ipsum tincidunt vel.

[dividerline-dashed]

Buttons

Available colors: gray, blue, black, red, orange, yellow and green

Available sizes: Small, Medium, and Large

Shortcode: [f-button color=black size=medium]Download[/f-button]

Samples

Small Buttons


Large Buttons

Note: Colors are prefaced with btn- for buttons and bx- for boxes. This allow differentiation in the css; keeps button styles unique from box styles.

Boxes

Alert boxes are all the rage these days. My plugin includes a customizable box.

Notes

  • Any named color can be used. Default is yellow.
  • Alignment choices are left, right or none. Default is none.
  • Width is width in percentage. Default is 90

Usage – [ f-box color=orange width=60 align=none ]This is a message box with important information you should read.[ /f-box ]

[f-box color=orange width=60 align=none]Hello and welcome to my box. This box has color set to orange, align set to none and width set to 90[/f-box]

Box Floated Right

[f-box color=yellow width=30 align=right]

Here is some h4 text to grab your attention.[/f-box][lorem]

 

Shortcode

[ f-box color=yellow width=30 align=right ]< h4 >Here is some h4 text to grab your attention.< h4 >[ /f-box ][ lorem ]

[dividerline-solid]

Grab my Flashy Shortcodes package and use it as is or edit it to fit your specific needs.

Download