WordPress shortcodes were first introduced in WordPress 2.5. Shortcodes are a power tool when it comes to massaging WordPress functions. 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, the quick and easy path to making your blogging chores easier. The following is my private collection of buttons, boxes, dividers 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.

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.

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]

Drop Caps

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

[dropcap color=#97172A]L[/dropcap]orem 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.

Buttons

Avaialable colors: btn-Gray, btn-Blue, btn-Black, btn-Red, btn-Orange, btn-Yellow

Available sizes: Small, Medium, Large

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

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

Samples

[br]

Large Buttons

[f-button color=btn-white size=large]Read Quote of the Day[/f-button]

[f-button color=btn-orange size=large]View Terms and Services[/f-button]

[f-button color=btn-black size=large]View Our Portfolio[/f-button]

[br]

Boxes

Available Options
Size: in pixels. ex. size=400
Usage: [ f-box size=400 color=bx-red align=none ]Your content[ /f-box ]
Colors: bx-red, bx-orange, bx-yellow, bx-blue, bx-green, bx-black, bx-grey, and bx-white.
[f-box align=none width=200 color=bx-white]This box is set to color=bx-white align=none size=200[/f-box]
[f-box align=none width=220 color=bx-grey]This box is set to color=bx-grey align=none size=220[/f-box]
[f-box align=none width=240 color=bx-black]This box is set to color=bx-black align=none size=240[/f-box]
[f-box align=none width=260 color=bx-red]This box is set to color=bx-red align=none size=260[/f-box]
[f-box align=none width=280 color=bx-orange]This box is set to color=bx-orange align=none size=280[/f-box]
[f-box align=none width=300 color=bx-yellow]This box is set to color=bx-yellow align=none size=300[/f-box]
[f-box align=none width=320 color=bx-blue]This box is set to color=bx-blue align=none size=320[/f-box]
[f-box align=none width=340 color=bx-green]This box is set to color=bx-green align=none size=340[/f-box]

[f-box align=left width=360 color=bx-orange]This box is set to color=bx-orange align=left size=360[/f-box]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere feugiat nibh, non gravida elit adipiscing eget. Proin vel tellus et nunc rhoncus tempor eu sed mauris. Fusce nunc quam, aliquam id scelerisque et, commodo et quam. Nunc accumsan tellus at lorem ultrices ac gravida libero varius. Aliquam sed ultrices dui. Sed vel elit tellus! Cras dapibus porttitor nisi eget congue. Integer vitae mi eu justo imperdiet consequat. Aenean in tortor est; in tristique lectus. Aliquam erat volutpat. Etiam vel orci orci, vestibulum pretium neque. Aliquam libero eros, vulputate nec convallis et, ultricies id lectus. [f-box align=right width=150 color=bx-red]This box is set to color=bx-red align=right size=150[/f-box]Phasellus eu urna mauris; quis varius elit. Mauris imperdiet est non dui fermentum volutpat. Vestibulum eu dolor eu purus lacinia feugiat. Morbi sagittis pretium diam vehicula dapibus. In placerat turpis sit amet tellus rhoncus sit amet hendrerit leo blandit. Maecenas ullamcorper pretium laoreet. In dapibus neque quis felis fringilla at elementum elit suscipit. Aliquam at felis nec lectus aliquet dictum!

[dividerline-solid]

Demo Content

Download my page's html and inspect how I have implemented my various shortcodes. [f-button color=btn-blue size=medium]Download/View[/f-button]

Grab my Flashy Shortcodes package and use it at your own risk

[f-button color=btn-white size=large]Flashy Shortcodes Zipped Package[/f-button]