@kayla
My approach is essentially creating a True/False ACF field in the layout with a name of “disable_layout” and then in the template code of the theme where the ACF layout will be shown performing a simple check if the field is checked or not.
Theme file (index.php)
// Your True/False Field
$disable_layout = get_sub_field('disable_layout');
if (!$disable_layout) {
// If field is unchecked, add your code for the ACF layout field
}
The rest of the code is just aesthetic – to make the field editing on the wp-admin back-end look a little better by moving the disable field in the layout handle and adding a few other tweaks for greying out disabled fields. Since my original post, ACF has changed the classname “acf-fc-layout-controlls” to “acf-fc-layout-controls” – so the code should still work by changing that classname, so the function becomes:
<?php
function acf_disable_in_handle() {
?>
<script>
jQuery(document).ready(function($) {
// Create a custom "disable" button in the layout handles
$('.acf-fc-layout-controls').prepend('<a class="acf-icon -disable small light acf-js-tooltip" href="#" title="Disable/Enable Layout"></a>');
// Toggle the hidden checkbox when the custom button is clicked
$('.acf-icon.-disable').on('click', function() {
var layout = $(this).closest('.layout');
layout.toggleClass('disabled-layout');
var checkbox = layout.find('[data-name=disable_layout] input[type=checkbox]');
checkbox.prop('checked', !checkbox.prop('checked'));
});
// Check if a layout is disabled when page is loaded
$('[data-name=disable_layout] input[type=checkbox]:checked').each(function() {
$(this).closest('.layout').addClass('disabled-layout');
});
});
</script>
<style>
/* Hide the default ACF checkbox */
[data-name=disable_layout] {
display: none;
}
/* Style the custom layout handle button */
.acf-icon.-disable:before {
content: '\e805';
}
.disabled-layout .acf-icon.-disable:before {
content: '\e808';
}
.acf-flexible-content .layout .acf-fc-layout-controls .acf-icon.-disable {
visibility: hidden;
}
.acf-flexible-content .layout:hover .acf-fc-layout-controls .acf-icon.-disable {
visibility: visible;
}
/* Make disabled layout look "disabled" */
.disabled-layout {
opacity: 0.4;
}
.disabled-layout .acf-fc-layout-handle:after {
content: ' (Disabled)';
}
</style>
<?
}
add_action('acf/input/admin_footer', 'acf_disable_in_handle');
You add the above function acf_disable_in_handle() in your theme’s functions.php file or your child theme’s functions.php file. Alternatively, you can even make it into a tiny plug-in, just create a new file in your wp-content/plugins folder – call it disable-acf-layout.php for example and add a comment /* Plugin Name: Disable ACF Layout */ at the top of the file, first thing after the starting <?php
Thanks for checking this John.
It’s unfortunate that there are no filters available for targeting the layouts themselves… perhaps that should be another feature request on its own?
Thanks for the suggestion John. Using a filter and a custom setting might indeed simplify my solution and save me from manually creating a hidden checkbox field for every layout.
I’ll have to investigate that approach and see if it’s possible – if anybody has some code to share, that would be great.
Of course, I would still prefer if that option was eventually natively added to ACF. 🙂
+1 for this functionality in the core of ACF.
I’m also currently using a workaround (jQuery) to apply the classes to the TinyMCE body based on the class that’s applied to the parent ACF field.
Another +1.
More than 2 years have passed since the original request. I would love to have this option in the next version of ACF. Thanks!
