Custom shortcodes

Updated on August 24, 2018

Except the WordPress native shortcodes, we developed the shortcode which allows you to manage your editor’s layout.

Button Shortcode #

[noemi_button button_text='Primary' button_link='#' target='_self' outline='no' style='primary' size='medium']

Parameters

outline: if “outline” attribute is set to yes then button will show in outline styles
style: “style” attribute has the following options: primary, secondary, success, info, warning, danger, link
size: “size” attribute has the following options: medium, large, small

Dropcup Shortcode #

[noemi_dropcup primary_color='yes']N[/noemi_dropcup]

Tab Shortcode #

[noemi_tabs_wrapper type='horizontal']
   [noemi_tab_title_wrapper]
      [noemi_tab_title for='1']Tab 1[/noemi_tab_title]
      [noemi_tab_title for='2']Tab 2[/noemi_tab_title]
      [noemi_tab_title for='3']Tab 3[/noemi_tab_title]
      [noemi_tab_title for='4']Tab 4[/noemi_tab_title]
   [/noemi_tab_title_wrapper]
   [noemi_tab_content_wrapper]
      [noemi_tab_content id='1']
         Tab 1 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
         Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
         fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
      [/noemi_tab_content]
      [noemi_tab_content id='2']
         Tab 2 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
         Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
         ermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
      [/noemi_tab_content]
      [noemi_tab_content id='3']
         Tab 3 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
         Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
         fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
      [/noemi_tab_content]
      [noemi_tab_content id='4']
         Tab 4 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
         Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
         fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
      [/noemi_tab_content]
   [/noemi_tab_content_wrapper]
[/noemi_tabs_wrapper]

For correctly using this shortcode you have to set “for” attribute for [noemi_tab_title for=’1′] and appropriate “id” attribute for [noemi_tab_content id=’1′].
Tab shortcode has two types: horizontal and vertical.

Toggle Shortcode #

[noemi_toggle_wrapper]
[noemi_toggle title='Toggle Box Title 1']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
roin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
[/noemi_toggle]
[noemi_toggle title='Toggle Box Title 2']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
[/noemi_toggle]
[noemi_toggle title='Toggle Box Title 3']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna.
Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit
fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
[/noemi_toggle]
[/noemi_toggle_wrapper]

Icon With Text Shortcode #

[icon_text class='clock-o']  Lorem ipsum dolor sit amet[/icon_text]

You can choose any icon from Font Awesome and just put icon name to “class” attribute like at example above.

Custom classes #

Also we have some custom classes for WordPress editor’s images, lines, and block-quotes Which you can use to show them with different styles.

Classes For Images

After you insert the image to editor, just click on it, click edit button and you will see the pop out with image options.
At the bottom you will see “Image CSS Class” where you can put one of the following classes: img-rounded, img-thumbnail, img-circle, circle-frame

Classes for Lines

For lines you just need to add WordPress editor’s default lines, then switch the editor mode from visual to text and add one of the following into your line’s <hr/> tag : class=”dotted”, class=”dashed”, class=”dotted primary-color”, class=”dashed primary-color”

Blockquotes

For adding author in blockquotes switch the editor mode from visual to text , find the blockquote you have added and put <cite>author name</cite> into the <blockquote>….</blockquote> tags.
We have two styles for blockquotes. If you want to use the second style switch the editor mode from visual to text , find the blockquote you have added and add the folowing to the opening <blockquote> tag: class=”style-2″, so the opening tag will look like <blockquote class=”style-2″>