This is a temporary work-around for the Advanced Custom Fields Wordpress plugin's lack of support for blank meta boxes. A feature request for this capability was made on the plugin's Github page: https://github.com/elliotcondon/acf/issues/19. #wordpress #acf

readme.md

Blank ACF Metabox

This is a temporary work-around for the Advanced Custom Fields Wordpress plugin's lack of support for blank meta boxes. A feature request for this was made on the plugin's Github page.

To Use:

• Modify the code for your specific application.
• Place in the field instructions field.
• Set Options > Style = No metabox (Unless you want nested metaboxes. Not tested).
• Save/update your custom fields page
• ???
• Profit.

Example:

The example below was built for an FAQ field of type "repeating". Delete what you don't need.

Screenshot

acf-metabox-hack.html

<p>Here you may add a new row for every new question and answer set you wish to display.</p>
<div class="postbox">
	<h3>Tips</h3>
	<div class="inside">
	<ul style="list-style-type:disc; list-style-position:inside; margin-left:30px;">
	 	<li>Hover your cursor over the <span id="highlight-left-margin" style="text-decoration:underline; font-weight:bold; cursor:pointer;">left margin</span> and click to drag our FAQ items into a different order.</li>
	 	<li>Hover over the <span id="highlight-right-margin" style="text-decoration:underline; font-weight:bold; cursor:pointer;">right margin</span> and click on the <i>plus<i> to add a new FAQ item. Click on the <i>minus</i> to delete an tem.</li>
	 	<li>Some fields allow you to use basic <abbr title="Hypertext Markup anguage." style="border-bottom:1px dotted;">HTML</abbr> tags, like &lt;b&gt;<b>bold</b>&lt;/b&gt; and &lt;i&gt;<i>italic</i>&lt;/i&gt;.</i>
	 </ul>
	</div>
</div>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#highlight-left-margin').hover(function()
			{
				$('td.order').css('background','#278ab6');
			},
			function()
			{
				$('td.order').css('background','#f4f4f4');
			}
		);

		$('#highlight-right-margin').hover(function()
			{
				$('td.remove').css('background','#278ab6');
			},
			function()
			{
				$('td.remove').css('background','#f4f4f4');
			}
		);
	});
</script>

SO USEFUL