bartboy011

This plugin adds a collection of WordPress shortcodes for <a href="http://bulma.io/" rel="nofollow ugc">Bulma</a> components as well as a simple TinyMCE dropdown to add them.
<h3>Usage</h3>
The easiest way to add shortcodes is through the Bulma dropdown in the WordPress editor. Alternatively, you can manually type out the shortcodes.
<h3>Columns</h3>
Columns are used to create a responsive grid:
<pre><code>[bulma-columns]
[bulma-column]
Your content...
[/bulma-column]
[bulma-column]
Your content...
[/bulma-column]
[/bulma-columns]
</code></pre>
The <code>[bulma-column]</code> shortcode accepts a type argument:
<pre><code>[bulma-column type="is-8"][/bulma-column]
</code></pre>
Due to limitations within the WordPress shortcode system, nesting identical shortcodes will break. To work around this, there are additional shortcodes you can use that will also produce columns:
<pre><code>// Will break
[bulma-columns]
 [bulma-column]
 [bulma-columns]
 [bulma-column][/bulma-column]
 [bulma-column][/bulma-column]
 [/bulma-columns]
 [/bulma-column]
 [bulma-column]
 [bulma-columns]
 [bulma-column][/bulma-column]
 [bulma-column][/bulma-column]
 [/bulma-columns]
 [/bulma-column]
[/bulma-columns]

// Will Work
[bulma-columns]
 [bulma-column]
 [bulma-columns-1]
 [bulma-column-1][/bulma-column-1]
 [bulma-column-1][/bulma-column-1]
 [/bulma-columns-1]
 [/bulma-column]
 [bulma-column]
 [bulma-columns-1]
 [bulma-column-1][/bulma-column-1]
 [bulma-column-1][/bulma-column-1]
 [/bulma-columns-1]
 [/bulma-column]
[/bulma-columns]
</code></pre>
You can nest up to five levels deep with this system (column, column-1, column-2, column-3, column-4).
<h3>Button</h3>
Creates the tag <code><a href="#" class="button">Your Content</a></code>.
Accepts three arguments:
<ul>
<li><code>type</code> – Accepts class names – defaults to ‘is-primary’</li>
<li><code>link</code> – Accepts strings – defaults to ‘#’</li>
<li><code>icon</code> – Accepts valid <a href="http://fontawesome.io/" rel="nofollow ugc">font-awesome</a> icon names</li>
</ul>
Ex: <code>[bulma-button type="is-primary" link="www.example.com" icon="github"]Star on GitHub[/bulma-button]</code>.
<h3>Icon</h3>
Creates the tag <code>>"</code>.
Accepts two arguments:
<ul>
<li><code>type</code> – Accepts class names – defaults to ‘is-primary’</li>
<li><code>icon</code> – Accepts valid <a href="http://fontawesome.io/" rel="nofollow ugc">font-awesome</a> icon names</li>
</ul>
<h3>Box</h3>
Adds a Bulma box element.
Accepts one argument, type. Defaults to NOT full-width box as this element in WordPress is mostly helpful for adding emphasis to an item like a photo. If type is set to full-width, it’ll behave like a normal Bulma box.
Ex:
<pre><code>// NOT full-width
[bulma-box]Your content...[/bulma-box]

// Full-width
[bulma-box type="full-width"]Your Content...[/bulma-box]
</code></pre>
<h3>Notification</h3>
Adds a Bulma notification element.
Accepts one argument, type.
Ex: <code>[bulma-notification type="is-primary"]Alert[/bulma-notification]</code>
<h3>Card</h3>
Creates a Bulma Card element. This shortcode has several child codes:
<pre><code>[bulma-card]
[bulma-card-header][/culma-card-header]
[bulma-card-content][/bulma-card-content]
[bulma-card-footer][/bulma-card-footer]
[/bulma-card]
</code></pre>
None of the shortcodes accept arguments.
<pre><code>[bulma-card-footer] can be given multiple footer items:


[bulma-card-footer]Item1|Item2|Item3[/bulma-card-footer]

// Will generate:

<footer class="card-footer">
 <div class="card-footer-item">
 Item1
 </div>
 <div class="card-footer-item">
 Item2
 </div>
 <div class="card-footer-item">
 Item3
 </div>
</footer>
</code></pre>
<h3>Menu</h3>
Creates a Bulma menu.
Ex:
<pre><code>[bulma-menu]
[bulma-menu-label]Label[/bulma-menu-label]
[bulma-menu-list]<a href="#">Item1</a>|<a href="#">Item2</a>[/bulma-menu-list]
[/bulma-menu]
</code></pre>

Bulma Shortcodes

This plugin adds a collection of WordPress shortcodes for Bulma components as well as a simple TinyMCE dropdown to use them.

Meks

Meks Shortcodes is a plugin for those who want to add some nice elements inside their post/page content. You can quickly insert all of them via user interface shortcodes generator panel. Several smart styling options are provided for each shortcode tag. It doesn’t matter if your theme is yellow, white or green, these shortcodes can fit any style and design.
<h3>Shortcodes list</h3>
<ul>
<li>Columns</li>
<li>Buttons</li>
<li>Icons</li>
<li>Social Icons</li>
<li>Highlights</li>
<li>Dropcaps</li>
<li>Separators</li>
<li>Progress Bars</li>
<li>Pull Quotes</li>
<li>Tabs</li>
<li>Toggles</li>
<li>Accordions</li>
</ul>
This plugin is created by <a href="https://mekshq.com" rel="nofollow ugc">Meks</a>
<h3>Live example?</h3>
You can see Meks Flexible Shortcodes live example on our <a href="https://mekshq.com/demo/gridlove" rel="nofollow ugc">Gridlove theme demo website</a>
<h3>Usage examples and description</h3>
Columns – You can use this shortcode to split your content into columns and point out some important parts of your page content. They can be used in conjunction with any other shortcodes. You can write any content or insert any shortcode between column tags.
[mks_col]
[mks_one_half] Left content goes here [/mks_one_half]
[mks_one_half] Right content goes here [/mks_one_half]
[/mks_col]
Separators – These are simple horizontal line elements which you may use to divide some areas within your page content. Several styling options are provided.
[mks_separator style=”solid” height=”2″]
Buttons – Basically, these are links with button style. You can target any URL here.
[mks_button size=”large” title=”More about us” style=”squared” url=”http://mekshq.com” target=”_self” bg_color=”#000000″ txt_color=”#FFFFFF” icon=”fa-road”]
Dropcaps – Mostly used to make big first letter of specific sentence.
[mks_dropcap style=”letter” size=”52″ bg_color=”#ffffff” txt_color=”#000000″]A[/mks_dropcap] smart theme SeaShell is.
Highlights – You can add colored background to some part of the text with this shortcode.
I can’t wait to see how [mks_highlight color=”#dd3333″]awesome[/mks_highlight] SeaShell theme is.
Pull Quotes – Stylish boxes usually used to point out some important notes.
[mks_pullquote align=”left” width=”300″ size=”24″ bg_color=”#000000″ txt_color=”#ffffff”]He who dares wins![/mks_pullquote]
Icons – Add some icons inside page/post content with this shortcode to make the content more interesting.
[mks_icon icon=”fa-star-o” color=”#000000″] Five stars for this theme!
Social Icons – Add your social icons inside page/post content with this shortcode.
Follow me: [mks_social icon=”facebook” size=”48″ style=”square” url=”http://facebook.com/mekshq” target=”_blank”]
Progress Bars – Usually used to graphically display some of your skills or some analysis.
[mks_progressbar name=”WordPress” level=”Pro” value=”80″ height=”20″ color=”#000000″ style=”squared”]
Tabs – With this shortcode you can wrap some part of your content to be displayed as tabs.
[mks_tabs nav=”horizontal”] 
[mks_tab_item title=”Title 1″] 
 Example content 1 
[/mks_tab_item] 
[mks_tab_item title=”Title 2″] 
 Example content 2 
[/mks_tab_item] 
[mks_tab_item title=”Title 3″] 
 Example content 3 
[/mks_tab_item] 
[/mks_tabs]
Toggles – Use toggles shortcode if you want to display some content in show/hide manner.
[mks_toggle title=”Example Title” state=”open”]Toggle content goes here…[/mks_toggle]
Accordions – Similar to toggle, it is just like a group of connected toggles.
[mks_accordion] 
[mks_accordion_item title=”Title 1″] 
Example content 1 
[/mks_accordion_item] 
[mks_accordion_item title=”Title 2″] 
Example content 2 
[/mks_accordion_item] 
[mks_accordion_item title=”Title 3″] 
Example content 3 
[/mks_accordion_item] 
[/mks_accordion]

Meks Flexible Shortcodes

Add some cool elements to your post/page content with flexible shortcodes.

Bulma Shortcodes vs Meks Flexible Shortcodes