What is a shortcode?
A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.
WordPress shortcodes can do this and more and will definitely make your blogging life easier. In this article, we’ll show you how to create and use shortcodes, as well as provide killer ready-to-use WordPress shortcodes that will enhance your blogging experience.
Using shortcodes is very easy. To use one, create a new post (or edit an existing one), switch the editor to HTML mode and type a shortcode in brackets, such as shown below:
[showcase]
[divider]
Highlighted Texts Styles Shortcodes
Lorem Ipsum is simply dummy text of the printing and typesetting industry. This is the [yellow] yellow highlighted [/yellow] text for creating this style just use [yellow]your content[/yellow]. Similarly for [blue] blue highlighted [/blue] text use the shortcode [blue]your content[/blue]. Similarly for [green] green highlighted [/green] text use the shortcode [green]your content[/green]. And lastly the [red] red highlighted [/red] text use the shortcode [red] your content [/red]
Similarly for the [black] black highlighted [/black] text use the shortcode [black] your content [/black]
[yellow]your content[/yellow] [blue]your content[/blue] [green]your content[/green] [red] your content [/red] [black] your content [/black]
[divider]
Checked list Shortcodes
[checklist]
- This is a lists item #1
- This is a lists item #2
- This is a lists item #3
[/checklist]
[checklist]
<ul>
<li>This is a lists item #1</li>
<li>This is a lists item #2</li>
<li>This is a lists item #3</li>
</ul>
[/checklist]
[divider]
jQuery Toggle Content Shortcodes
Creating toggle content like those seen below couldn’t be easier with the use of our toggle shortcodes.
[toggle heading=»Nunc quis ante lectusut pulvinar urna.»]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu arcu tellus. Suspendisse porttitor purus non enim facilisis in euismod turpis tincidunt. Integer sed quam orci, ac imperdiet elit. Praesent tortor leo, condimentum ac consectetur ac, dapibus ac sapien. Phasellus et massa vel massa tincidunt hendrerit. Morbi semper augue vitae ligula vulputate accumsan.
[/toggle]
[toggle heading=»Nunc quis ante lectusut pulvinar urna.»]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu arcu tellus. Suspendisse porttitor purus non enim facilisis in euismod turpis tincidunt. Integer sed quam orci, ac imperdiet elit. Praesent tortor leo, condimentum ac consectetur ac, dapibus ac sapien. Phasellus et massa vel massa tincidunt hendrerit. Morbi semper augue vitae ligula vulputate accumsan.
[/toggle]
[toggle heading=»Nunc quis ante lectusut pulvinar urna.»]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu arcu tellus. Suspendisse porttitor purus non enim facilisis in euismod turpis tincidunt. Integer sed quam orci, ac imperdiet elit. Praesent tortor leo, condimentum ac consectetur ac, dapibus ac sapien. Phasellus et massa vel massa tincidunt hendrerit. Morbi semper augue vitae ligula vulputate accumsan.
[/toggle]
// Just enter the heading text in place of "Toggle Title Here" [toggle heading="Toggle Title Here"] Your Content Here..... [/toggle]
[divider]
Divider
It’s easy. Just place a shortcode divider while editing a page(post).
[divider]
[divider]
Dropcap Shortcodes
To create a dropcap like the ones below all you need enter a letter as seen below.
Dropcap Style 1
[dropcap1]L[/dropcap1]orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat diam, faucibus a facilisis et, varius non mauris. Proin tincidunt mollis aliquet. Pellentesque bibendum tristique condimentum. Nam condimentum quam nec tellus lacinia quis semper lorem egestas. Fusce quis lacus lacinia neque interdum vehicula. Maecenas gravida eros at tellus porttitor rutrum. Vestibulum ut lorem ligula, ut varius tortor. Sed laoreet bibendum diam, et commodo risus tempor et.
[dropcap1]L[/dropcap1]
Dropcap Style 2
[dropcap2]C[/dropcap2]ongue fringilla erat, non sollicitudin mauris aliquet id. Aliquam aliquam viverra lorem. In tempor sodales ligula, eget tempus nisl semper a. Morbi gravida erat interdum arcu convallis rhoncus. Mauris tristique, velit vel rutrum scelerisque, felis dui interdum tellus, eu gravida mi mi a sem. Fusce fringilla facilisis rutrum.
[dropcap2]C[/dropcap2]
[divider]
Pullquotes
To create a pullquotes like the ones below all you need enter a letter as seen below.
// Pull Quotes float right [pull_right]Your Content Here....[/pull_right]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam convallis, dui eget tempor consectetur, est velit mattis nunc, sodales euismod lorem dolor in arcu. Nulla imperdiet commodo tortor, at dictum magna iaculis eu.[pull_right] Nullam sit amet elit neque. Ut at lectus tortor. Duis vel est ac nisi egestas tincidunt.[/pull_right] Aliquam ac nulla ac augue faucibus dapibus. Ut egestas, quam sit amet suscipit pulvinar, sapien dolor tempor nunc, eget lacinia neque dolor at risus. Sed a molestie diam.
Duis dapibus neque ut sapien tristique quis sollicitudin odio scelerisque. Maecenas ac purus lectus. Morbi et eros non est viverra sagittis nec a metus. Ut id metus eu leo dignissim vehicula vel sed justo.
// Pull Quotes float left [pull_left]Your Content Here....[/pull_left]
Nunc ut purus felis, interdum vehicula diam. Aenean imperdiet, nunc at viverra venenatis, erat enim bibendum quam, et tristique eros leo non libero.[pull_left]Sed pretium nisi vitae ante auctor sodales. Donec et sapien lorem, non posuere tortor.[/pull_left] Ut libero mi, ultricies vitae convallis nec, ultrices ut velit.
Donec commodo luctus dui, a hendrerit urna condimentum vel. Phasellus sed lacus non neque semper fringilla. Pellentesque purus mauris, tempor a hendrerit a, volutpat rhoncus enim. Nulla malesuada, augue eu blandit tempus, neque ante vulputate nibh, a pellentesque erat nibh Quisque tempus purus et elit accumsan cursus.
Ut a ipsum vehicula massa pharetra sagittis. Nam porta lacinia tellus ac rutrum. Fusce congue nisi vitae nisl blandit nec dictum nibh iaculis. Suspendisse potenti. In hac habitasse platea dictumst.
[divider]
Block Quotes Shortcodes
To create a blockquotes like the ones below all you need enter a letter as seen below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat diam, faucibus a facilisis et, varius non mauris. Proin tincidunt mollis aliquet. Pellentesque bibendum tristique condimentum.
[bquote author=»Jeffrey Way«] Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
[/bquote]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat diam, faucibus a facilisis et, varius non mauris. Proin tincidunt mollis aliquet. Pellentesque bibendum tristique condimentum.
// Just enter the Author Name // And insert your Block Quotes [bquote author="Author Name"] Your Block Quotes Content Here [/bquote]
Error Message
[infobox_error] This is a sample of the ‘error’ style. [/infobox_error]
[infobox_error] This is a sample of the ‘error’ style. [/infobox_error]
Info Message
[infobox_info] This is a sample of the ‘info’ style. [/infobox_info]
[infobox_info] This is a sample of the ‘info’ style. [/infobox_info]
Alert Message
[infobox_alert] This is a sample of the ‘alert’ style. [/infobox_alert]
[infobox_alert] This is a sample of the ‘alert’ style. [/infobox_alert]
Download Message
[infobox_download] This is a sample of the ‘download’ style. [/infobox_download]
[infobox_download] This is a sample of the ‘download’ style. [/infobox_download]
Success Message
[infobox_success] This is a sample of the ‘success’ style. [/infobox_success]
[infobox_success] This is a sample of the ‘success’ style. [/infobox_success]