Reply To: Disable Layout from Showing in Template

• B0yan

• August 9, 2019 at 2:26 am

@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