Being that 99.9999% of the code I'm writing these days is centered around Beans, it makes sense to take advantage of Atom's built in snippets functionality to speed up the process.

So without further adieu, I present the Beans Snippets for Atom package.

I'm hoping that as Beans continues to gain traction, other dev's will contribute to making the package even better.

The full working code is on Github, so feel free to fork it and add-your own 😉

I would like to get some feedback before submitting it to the official Atom package directory, so for the mean time, you'll need to install it manually. See instructions for Mac and Windows. I've created a post on the Community Forum, so please submit any feedback you have there.

If you discover any bugs, submit them as an issue on the Github repo, or drop me a message via the Contact form if you're not on Github.

Current snippets available:

Add Attribute

Add an attribute on any element with a markup-id.

Shortcut

beans_add_attribute

Output

beans_add_attribute( 'markup_id', 'attribute_type', 'attribute' );

Examples

beans_add_attribute( 'beans_primary_nav', 'class', 'tm-nav' );

This example adds the tm-nav class.

beans_add_attribute( 'beans_header', 'data-uk-sticky' );

This example adds an empty data_uk_sticky attribute, which is used by the UIkit Sticky component.

Remove Attribute

Remove an attribute on any element with a markup-id. Can be used to remove a specific attribute value (like a class) or the attribute itself. See below for an example.

Shortcut

beans_remove_attribute

Output

beans_remove_attribute( 'markup_id', 'attribute_type', 'attribute' );

Examples

beans_remove_attribute( 'beans_primary_nav', 'class', 'uk-float-right' );

This example removes the uk-float-right class, while leaving the rest of the classes intact.

beans_remove_attribute( 'beans_primary_nav', 'class' );

This example removes the entire class=" " attribute, along with any assigned classes.

Original

<nav class="tm-nav uk-float-right">

Remove attribute value

<nav class="tm-nav">

Remove attribute

<nav>

Replace Attribute

Replace an attribute on any element with a markup-id. Can be used to replace a specific attribute value (like a class) or the attribute itself. See below examples.

Shortcut

beans_replace_attribute

Output

beans_replace_attribute( 'markup_id', 'attribute_type', 'old_attribute', 'new_attribute' );

Examples

Original

<nav class="tm-nav uk-float-right">

Replace attribute value

beans_replace_attribute( 'beans_primary_nav', 'class', 'uk-float-right', 'uk-float-left' );

Will output as

<nav class="uk-left">

Modify Action

Modify the placement of elements controlled by Beans.

Shortcut: beans-modify-action

Set Layout

Set the content / sidebar layout dynamically for a specific layout. Generally used in your page templates.

Shortcut: beans-set-layout

Load Document

Loads the Beans document. This is needed in the page templates, usually at the bottom.

Shortcut: beans-load-doc

Enqueue UIkit Components

Enqueue any of the core or add-on components available in UIkit.

Shortcut: beans-enqueue-uikit

Dequeue UIkit Components

Dequeue any of the core or add-on components that are not needed. Use beans-show-uikit to see which components are being loaded.

Shortcut: beans-dequeue-uikit

Show Loaded UIkit Components

Outputs a list of all the UIkit components and styles that are being loaded.

Shortcut: beans-show-uikit

Add Markup

Output custom markup using any of Beans dynamic placement hooks.

Shortcut: beans-add-markup

Register Widget Area

Register a custom widget-area in WordPress.

Shortcut: beans-register-widgetarea

Output Widget Area

Output a widget-area in your theme, using any of Beans dynamic placement hooks.

Shortcut: beans-output-widgetarea

Register & Output Widget Area

Register a new widget-area and output it using any of Beans dynamic placement hooks.

Shortcut: beans-new-widgetarea

Adjust Grid

Modify Beans default layout grid (ie, the sidebars and content) width and placement.

Shortcut: beans-new-widgetarea


Detailed instructions on how to use the various snippets are available on the Github repo page.