bartboy011

<p>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.</p>
<h3>Usage</h3>
<p>The easiest way to add shortcodes is through the Bulma dropdown in the WordPress editor. Alternatively, you can manually type out the shortcodes.</p>
<h3>Columns</h3>
<p>Columns are used to create a responsive grid:</p>
<pre><code>[bulma-columns]
[bulma-column]
Your content...
[/bulma-column]
[bulma-column]
Your content...
[/bulma-column]
[/bulma-columns]
</code></pre>
<p>The <code>[bulma-column]</code> shortcode accepts a type argument:</p>
<pre><code>[bulma-column type="is-8"][/bulma-column]
</code></pre>
<p>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:</p>
<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>
<p>You can nest up to five levels deep with this system (column, column-1, column-2, column-3, column-4).</p>
<h3>Button</h3>
<p>Creates the tag <code><a href="#" class="button">Your Content</a></code>.</p>
<p>Accepts three arguments:</p>
<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>
<p>Ex: <code>[bulma-button type="is-primary" link="www.example.com" icon="github"]Star on GitHub[/bulma-button]</code>.</p>
<h3>Icon</h3>
<p>Creates the tag <code><span class="icon"><i class="fa fa-<icon name>></i></span>"</code>.</p>
<p>Accepts two arguments:</p>
<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>
<p>Adds a Bulma box element.</p>
<p>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.</p>
<p>Ex:</p>
<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>
<p>Adds a Bulma notification element.</p>
<p>Accepts one argument, type.</p>
<p>Ex: <code>[bulma-notification type="is-primary"]Alert[/bulma-notification]</code></p>
<h3>Card</h3>
<p>Creates a Bulma Card element. This shortcode has several child codes:</p>
<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>
<p>None of the shortcodes accept arguments.</p>
<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>
<p>Creates a Bulma menu.</p>
<p>Ex:</p>
<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.

Daniel Bachhuber

Gary Jones

Scott Kingsley Clark

Benjamin Intal

Daniele Scasciafratte

Stanislav Khromov

Robert O'Rourke

fusionengineering

Matthew Haines-Young

goldenapples

Davis Shaver

Thomas Kräftner

dashaluna

pravdomil

Frederic Serva

Bronson Quick

jitendraharpalani

zebulonj

<p>Used alongside <code>add_shortcode</code>, Shortcake supplies a user-friendly interface for adding a shortcode to a post, and viewing and editing it from within the content editor.</p>
<p>Once you’ve installed the plugin, you’ll need to <a href="https://github.com/wp-shortcake/shortcake/wiki/Registering-Shortcode-UI" rel="nofollow ugc">register UI for your shortcodes</a>. For inspiration, check out <a href="https://github.com/wp-shortcake/shortcake/wiki/Shortcode-UI-Examples" rel="nofollow ugc">examples of Shortcake in the wild</a>.</p>
<p>To report bugs or feature requests, <a href="https://github.com/wp-shortcake/shortcake/issues" rel="nofollow ugc">please use Github issues</a>.</p>
<h3>Running tests</h3>
<p>We have test coverage for PHP using PHPunit, and JavaScript using Jasmine.</p>
<h4>Running tests locally</h4>
<p>Jasmine tests can be run using <code>grunt jasmine</code> and are also run as part of the <code>grunt scripts</code> task. To update the core WordPress files used by the Jasmine test suite, run <code>grunt updateJasmineCoreScripts --abspath="/path/to/wordpress-install"</code>.</p>


Shortcake (Shortcode UI)

Love it

Very Very Nice!

Shortcake makes using WordPress shortcodes a piece of cake.

Bulma Shortcodes vs Shortcake (Shortcode UI)