Implement custom content on channel entries like Wordpress Shortcodes

Question

We would like to add blocks of HTML that we have styled in channels. Similar to the functionality of a Wordpress shortcode. So if we need for example a stylized quote that has predefined html and styles, we could insert that anywhere into our channel entry.

In Wordpress if you do [my_shortcode], it can potentially spit out

<div class="example">hello</div>

Or a more robust example

[quote variable="test" img="something.jpg"]

which could spit out

<div class="quote">
 <img src="something.jpg" />
 <p>test</p>
</div>

So we need to be able to have a number of different types of these and use them in any order on channel entries

Also I'm talking about the editor screen on admin when making entries for stuff like blog. So i need to input this php code or html on the rich text editor or somewhere on the editor screen.

Answer 1

Sounds like you are wanting either EE's Template Variables or Template Partials.

In either case you define some content and associate it with a custom tag - then whenever EE encounters the tag in your templates, it replaces the tag with whatever content you have associated with it.

From the look of your examples, you probably want to use Template Partials to do what you are trying to do.

From the EE documentation:

In both cases, ExpressionEngine is simply swapping out a tag with the contents of that tag. However, there is a big difference in when that swap takes place,

Template variables are one of the last tags on the template that are parsed, so they are great for static content, meaning content that does not contain other tags.

Template partials are one of the first tags parsed, so if you want to put other tags in a Template partial, those tags will still be seen and parsed just fine.

HTH

Answer 2

Well, I found a third-party plugin that helped me achieve exactly what I wanted, however, it wasn't a free solution. ($100 price tag).

https://eebloqs.com/

You can have your predefined HTML and use the fields from this addon to populate your HTML. You can rearrange in any order on the channel entry page. Use all or none of your fields.

Basically a GUI shortcode. Ideal for clients that don't want to touch HTML

Answer 3

If you use WYGWAM and set up "content templates" you can accomplish "short codes" in a WYSIWYG environment. It's actually something better than short codes.

https://www.youtube.com/watch?v=a7zZ7MXX7EM

Have a look at this Youtube video (skip ahead to 3:00 minute mark) to see an example of what it would look like for an editor/content creator to work with.

I have an EE4 site in which I migrated content from Wordpress and had to "expand" all those short codes during import. I used this method.