Skip to content

Instantly share code, notes, and snippets.

@richtabor
Last active August 29, 2015 14:00
Show Gist options
  • Save richtabor/11151957 to your computer and use it in GitHub Desktop.
Save richtabor/11151957 to your computer and use it in GitHub Desktop.
Simply add buttons, icon buttons, alerts, tabs, toggle, highlights and more – all with a nice shortcode generator in our next WordPress plugin for theme shortcodes.
<h6>Buttons</h6>
The <a href="http://themebeans.com/plugin/bean-shortcodes-plugin">Bean Shortcodes Plugin</a> has a powerful button shortcode generator, which lets you choose what size (small, medium, or large) color, type (rounded, squared) and even an icon selection.
[button url="#" color="purple" size="small"]Button[/button]
[button url="#" color="green" size="small"]Button[/button]
[button url="#" color="blue" size="small"]Button[/button]
[button url="#" color="red" size="small"]Button[/button]
[button url="#" color="orange" size="small"]Button[/button]
[button url="#" color="yellow" size="small"]Button[/button]
[button url="#" color="pink" size="small"]Button[/button]
[button url="#" color="grey" size="small"]Button[/button]
[button url="#" color="black" size="small"]Button[/button]
[button url="#" color="purple" size="medium" type="round"]Button[/button]
[button url="#" color="green" size="medium" type="round"]Button[/button]
[button url="#" color="blue" size="medium" type="round"]Button[/button]
[button url="#" color="red" size="medium" type="round"]Button[/button]
[button url="#" color="orange" size="medium" type="round"]Button[/button]
[button url="#" color="yellow" size="medium" type="round"]Button[/button]
[button url="#" color="pink" size="medium" type="round"]Button[/button]
[button url="#" color="grey" size="medium" type="round"]Button[/button]
[button url="#" color="black" size="medium" type="round"]Button[/button]
[button url="#" color="purple" size="large"]Button[/button]
[button url="#" color="green" size="large"]Button[/button]
[button url="#" color="blue" size="large"]Button[/button]
[button url="#" color="red" size="large"]Button[/button]
[button url="#" color="orange" size="large"]Button[/button]
[button url="#" color="yellow" size="large"]Button[/button]
[button url="#" color="pink" size="large"]Button[/button]
[button url="#" color="grey" size="large"]Button[/button]
<h6>Tabs</h6>
[tabs] [tab title="First"]Maecenas sed dddiam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor.[/tab] [tab title="Second"]Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis.[/tab] [tab title="Third"]Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh.[/tab]
[/tabs]
<h6>Toggles</h6>
[toggle title="First Toggle" state="in"] Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. [/toggle]
[toggle title="Second Toggle" state=""] Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. [/toggle]
[toggle title="Third Toggle" state=""] Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. [/toggle]
<h6>Alerts</h6>
[alert style="note"]Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.[/alert]
[alert style="info"]Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.[/alert]
[alert style="error"]Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.[/alert]
[alert style="success"]Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.[/alert]
<h6>Highlight</h6>
Cras justo facilisis themebeans eque lorem to odio, dapibus ac. [highlight]This is a really simple highlight.[/highlight] Nullam id dolor id nibh ultricies vehicula ut id elit.
[clear]
<h6>Columns</h6>
[one_half] Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes.[/one_half]
[one_half_last] Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes.[/one_half_last]
[one_third] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/one_third]
[one_third] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/one_third]
[one_third_last] Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/one_third_last]
[one_fourth]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/one_fourth]
[one_fourth]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/one_fourth]
[one_fourth]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/one_fourth]
[one_fourth_last]Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/one_fourth_last]
[one_fifth]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem. [/one_fifth]
[one_fifth]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem. [/one_fifth]
[one_fifth]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem. [/one_fifth]
[one_fifth]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem. [/one_fifth]
[one_fifth_last]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem. [/one_fifth_last]
[one_sixth]Lorem ipsum dolor sit amet, consec tetur elit etiam sem. [/one_sixth]
[one_sixth]Lorem ipsum dolor sit amet, consec tetur elit etiam sem. [/one_sixth]
[one_sixth]Lorem ipsum dolor sit amet, consec tetur elit etiam sem. [/one_sixth]
[one_sixth]Lorem ipsum dolor sit amet, consec tetur elit etiam sem. [/one_sixth]
[one_sixth]Lorem ipsum dolor sit amet, consec tetur elit etiam sem. [/one_sixth]
[one_sixth_last]Lorem ipsum dolor sit amet, consec tetur elit etiam sem. [/one_sixth_last]
<h6>Lists (only needed for themes built < 2014)</h6>
[list]
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
</ul>
[/list]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment