Support

Account

Forum Replies Created

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

Viewing 5 posts - 1 through 5 (of 5 total)