EE alternative to WordPress shortcodes?

Question

Any way in Expression Engine to simulate Wordpress' shortcode functionality?

I want to abide by community rules, and there's a disclaimer when clicking in the "answer" section of an existing question that says I should actually ANSWER the question, not respond to other answers.

As such, I have the same question as the one above. I am a dev with roots in WordPress and I would like to mimic the behavior of WP shortcodes in Expression Engine. All I want to do is save a snippet of code as a template that can be re-used all across my site.

For example, if I want to use an accordion menu on several pages, I could just click click while editing a page and the code appears with placeholder content that the user/dev can then replace with real content). Do I need a graphic slideshow? Click click, define the images/headings/text overlays.

As I'm posting this, I'm about to scour the EE plug-ins library but since I haven't found anything before, I wanted to post here first.

Answer 1

Short answer: there is not such a thing ... yet. The Shortcode add-on is currently in beta.

Long answer for now: use custom fields. Example: a Matrix field for your accordion, with your columns defined, and add as many row as you like. Then add tags for that in your template.

Same with a Gallery - create a Gallery field (Matrix works great for this again), then add the code to your template to build the gallery.

If these fields are made optional, then they only appear on the front-end when used.

If you want to get fancy and inject these chunks of content into your main content area, you can use NSM Transplant to do so.

Here's a simplified snippet of code I use on one site to acheive this:

{exp:nsm_transplant:body}

    {inline_media}
    {exp:nsm_transplant:content id="media_{row_count}"}
    <figure class="{alignment}">
    {exp:ifelse parse="inward"}
        {if image}
            {if "{alignment}" == "aligncenter"}
                {exp:ce_img:make src="{image:resized}" width="860" quality="80" output='<img src="{made_url}" alt="" />'}
            {if:else}
                {exp:ce_img:make src="{image:resized}" width="430" quality="80" output='<img src="{made_url}" alt="" />'}       
            {/if}
        {if:elseif video}
            {if "{alignment}" == "aligncenter"}
                {exp:antenna url="{video}" max_width="860"}
            {if:else}
                {exp:antenna url="{video}" max_width="430"}
            {/if}
        {if:elseif gallery}
            {gallery}{embed="galleries/_embed" entry_id="{entry_id}"}{/gallery}
        {/if}
        {if caption}<figcaption>{caption}</figcaption>{/if}
        {/exp:ifelse}
    </figure>
    {/exp:nsm_transplant:content}
    {/inline_media}

    {content}

{/exp:nsm_transplant:body}

In this case authors use {media_1}, {media_2} etc, to embed photos, videos, and galleries inside the content.

Another solution you can look at is Content Elements, which allows a more freeform method of populating an entry with a single custom field.

Hope that helps!