Home Forums Feature Requests Disable Layout from Showing in Template Reply To: Disable Layout from Showing in Template

  • @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:

    function acf_disable_in_handle() {
        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');
                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() {
        /* 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)';
    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