Use ACF as a custom shortcode generator

• Tazintosh

• January 28, 2017 at 11:07 pm

Hi folks,

(This post is not necessary a feature request, if there is a way to make it myself, I will).

I love ACF, I really do, because it allows me to provide my clients (and myself) an admin UI for their specific needs that I don’t have to develop. I then just have to focus on the frontend.
Still, shortcodes are sometimes more easy to use, like when you just need to add an “alert”, a “callout” or whatever in the flow of your article.
I that case, I would love to find a way to build my own “shortcode generator” with ACF.

Here would be the workflow I image, but I would like to get your thought on this:
• I would built a flexible content that handle all kind of fields groups that I’m using as shortcode (alert, highlight, blockquote, callout, well…)
• When I need to insert one of them on my article, I would select it from the flexible content, fill and set the values I need and I would click a button to insert it in my article content.
• What’s actually missing is such a button. I think it’s possible to easily add it in Javascript. OR, rather than inserting, I could think of a textarea that would automatically fill with the shortcode ([myshortcode option1=”whatever”]someOtherThing[/myshortcode]) at the end of the group field. I would then just have to copy paste.
• In the end, the point would be to absolutely avoid these fields to be saved (the purpose was just to use them as a UI), so the script could also take care to delete those flexible field before saving.

How would you imagine it if it was for you?
Thanks in advance

• John Huebner

• January 29, 2017 at 3:15 am

I’ve been looking into something that I can make custom shortcodes with myself and I even toyed with the idea of building it with ACF. I’m pretty sure I found a shortcode builder in the WP repo tha uses ACF, but I can’t seem to find it today… I know I wasn’t dreaming. It used a CPT to with an ACF interface to create shortcodes and then there was a button added to the editor that let you add them.

Anyway, inserting them from a flex group into the WP editor is going to be the problem to overcome if you want it to happen automatically. It would be easy to trigger the click on the button to remove the layout. But I think that going this route would mean that the insertion would have to be done manually and you’d need to rely on the user to delete them. My guess is that they wouldn’t and you’d have many of the same shortcode “layouts” saved to many posts. Although you could probably use an acf/save_post filter to delete the rows of the flex field whenever the post is saved.

I love ACF too, would not build a site without it, but after thinking about it for quite some time I decided that it wasn’t really the best tool for the job and I’m going in a different direction.

• Tazintosh

• January 30, 2017 at 5:31 am

Hey John,
Thanks for the answer.
I’ll try to dig around with it as side/fun project.

First of all, do you know if there is a way trigger my function right after a layout have been added ?

• John Huebner

• January 30, 2017 at 5:43 am

When a layout is added ACF triggers the ‘append’ action listed on this page https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

• Tazintosh

• January 30, 2017 at 6:06 am

Brillant!
Now, it’s time to start.
I’ll let you know and share if it’s going in a nice direction.

• ybdigital

• January 30, 2017 at 7:04 am

I would be interested in checking your solution as I rune with the same “problem”.

Thanks

• Tazintosh

• January 30, 2017 at 7:20 am

Output textarea is in place…
This was the easy part I think ^^
I’ll generate the shortcode into this textarea depending on the fields the user will set.

OutputTextar....png

• John Huebner

• January 30, 2017 at 7:20 am

My solution is actually to use the shortcodes ultimate plugin https://wordpress.org/plugins/shortcodes-ultimate/ and code custom shortcodes either using the shortcode maker add on for it or by coding custom shortcodes for it using PHP. Mostly coding custom shortcodes for it with PHP. It has filters so that you can add shortcodes without buying the shortcode maker add on which allows for more control than the maker add on provides.

To be completely honest, I’m actually using a my own customized version of shortcodes ultimate. The version in the repo only grabs the “text” value from the WP editor and I need it to grab “html” and I also made a modification so that it will also grab text when in “Text” mode and not just in “Visual”. The official version also has a problem with multiple editors on a page in ACF or any other plugin that provides mulitple tinyMCE editors, so I’ve corrected that. To be honest, I’m not sure if the developer is interested in my modifications, I’ve asked, but that’s up to him.

• ybdigital

• January 30, 2017 at 8:14 am

Just for Info,

what I have done for my client is a flexible field where they create the charts, accordions, etc.

Then I added a shortcode that gets all flexible fields created for the post and inserts a span or div with a specific ID.

And then via jQuery I replace the flexible fields from the bottom of the content to the main text. If no shortcode is added the content stays at the bottom (as annexes).

It works great but it is not optimal as I have not found a way to disable already inserted fields in the tinymce menu.

It would be nice to have that kind of functionality but better integrated.

Thanks

• Tazintosh

• January 31, 2017 at 11:45 pm

Hi folks,
I’m getting somewhere… 😉

shortcodeGen....png

• Tazintosh

• February 7, 2017 at 6:09 am

Ok, I think I’m about to be done for my needs 🙂

ShortcodeGen....mov

• ybdigital

• February 7, 2017 at 6:34 am

This looks very nice! Did you manage to integrate it with a modal window as well a tinymce button?

For info I found this tutorial that remplaces the shortcode with a placeholder image and allows the user to re-edit the shortcode when double-clicking it.

https://generatewp.com/take-shortcodes-ultimate-level/

Do you plan on sharing you code/add-on?

Thanks

• Tazintosh

• February 7, 2017 at 6:58 am

ybdigital, I’m not planning to integrate any modal thingy.
The way it’s actually working is actually fine for my needs.

Here’s the main part of my Javascript code, you guys are free to enhance it and share it back 😉

jQuery(document).ready(function($){
	// Make sure acf is loaded
	if (typeof acf == 'undefined'){return;}

	var
		stylesheet	= '<style type="text/css">\
							.taz_shortcodeOutput {\
								background-color: rgb(226, 236, 251)!important;\
								font-size: 1.4rem!important;\
							}\
						</style>',
		textarea	= '<div class="acf-field acf-field-textarea">\
							<div class="acf-label">\
								<label for="taz_shortcodeOutput">Generated Shortcode</label>\
							</div>\
							<div class="acf-input">\
								<textarea class="taz_shortcodeOutput" rows="8"></textarea>\
							</div>\
						</div>',
		triggers	= '.acf-field[data-type=select] select,\
						.acf-field[data-type=text] input,\
						.acf-field[data-type=textarea] textarea,\
						.acf-field[data-type=wysiwyg] textarea,\
						.acf-field[data-type=number] input,\
						.acf-field[data-type=radio] input,\
						.acf-field[data-type=checkbox] .acf-checkbox-list input,\
						.acf-field[data-type=true_false] .acf-input label input,\
						.acf-field[data-type=color_picker] .acf-color_picker > input\
					';

	function taz_buildShortcode(currentLayoutName, triggersElements){
		var
			output			= '',
			content			= '',
			settingsValue	= {};

		function taz_getSettingsValue(triggersElements){
			triggersElements.each(function(index, elem){
				var
					settingType			= $(elem).parents('.acf-field').data('type'),
					settingLabel		= $(elem).parents('.acf-field').data('name'),
					checkboxesValues	= '',
					isContent			= $(elem).parents('.acf-field').hasClass('taz_isShortcodeContent'); // The "content" is detected by the class "taz_isShortcodeContent"

				if (isContent){
					settingLabel = 'content';
				}

				switch(settingType){
					case 'textarea':
						settingsValue[settingLabel] = (!isContent) ? encodeURIComponent($(elem).val()) : $(elem).val();
						break;
					// Add as many cases you want to handle. Note that depending the type, the way to get values could change.
					default:
						break;
				}
			});
			return settingsValue;
		}

		settingsValue = taz_getSettingsValue(triggersElements);
		$.each(settingsValue, function(key, value){
			if (value !== ''){
				if (key !== 'content'){
					output += ' ' + key + '="' + value + '"';
				} else {
					content = value;
				}
			}
		});
		output = '[taz_' + currentLayoutName + output + ']' + content + '[/taz_' + currentLayoutName + ']'
		$('.taz_shortcodeOutput').html(output);
	}

	/* ================================================== */
	/* ================================================== Everything starts here */
	/* ================================================== */

	acf.add_action('append', function($el){ // The user adds a new flexible content
		var
			currentLayout		= $el,
			currentLayoutName	= currentLayout.data('layout'),
			triggersElements	= null;

		switch(currentLayoutName){
			case 'shortcode_tester': // Name of the flexible content added
				if (!$('.taz_shortcodeOutput').length){ // Only prepend once
					currentLayout.parents('.inside.acf-fields').prepend(textarea);
					currentLayout.parents('.inside.acf-fields').prepend(stylesheet);
				}
				triggersElements = currentLayout.find(triggers);

				triggersElements.on('change keyup', function(){
					taz_buildShortcode(currentLayoutName, triggersElements);
				});
				break;
			default:
				break;
		}

	});
});

• Stagger Lee

• July 11, 2017 at 6:53 pm

I cloned completely Post Type generator from https://generatewp.com/post-type/.
Something as my own helper and for my own use, not public. Those guys have very educative website and generators.

77 ACF fields just for this part.
Layout can be done much simpler then on their webiste, but decided for now not to use one row flexible content or repeaters. Maybe later when I get use to all this. Those two fields make preview template very long and complicate to visually follow, edit, add.

And one custom code Metabox to preview template. Just called preview template with “require_once”, can be placed everywhere. Best solution, because it is set it ad forget it. Any code change in preview template is directly reflected in preview Metabox.

It can be done easy, just need much time. I finished it for one day. Others will probably take much less time. I can reuse and adapt preview code template.

Not “insert in editor content area” option, but not needed for this project.

• Stagger Lee

• July 11, 2017 at 6:57 pm

I see now I forgot field in template to change function name. Easy done.
And “supports” needs a bit of formatting. text_domain too.

• Stagger Lee

• July 11, 2017 at 7:14 pm

I could use this example as improvement request. Despite ACF block is forced after Title give it some margin-bottom, as other meatboxes have.

#acf_after_title-sortables .acf-postbox {
    margin: 20px 0 0;
}

to:

#acf_after_title-sortables .acf-postbox {
    margin: 20px 0;
}