Hide Layout Option in Flexible Content

• jrstaatsiii

• December 15, 2014 at 11:49 am

I was hoping to hide layout options on specific pages or content types. In some scenarios, layout options are only applicable on certain pages or content types…but for maintenance it makes most sense to create all layout options in a single flexible content field. I’d be happy to use CSS based on data-layout and find the current screen to hide, but I don’t think this will work since the html for the layout list in Flex. Content is created with js.

Any ideas how I might go about doing this?

• raindigital

• March 25, 2015 at 2:36 am

Hi! I would like to the the same thing. I want to hide/disable a layout instead of removing the layout. I want to keep my data/content that I created using the page builder and in the feature I would just switch between layouts. Any ideas on how to do it?

• James

• June 20, 2016 at 8:18 pm

Hi Guys,

As a workaround to this issue, you can create a select field for the choosing of the fields you want hidden on some layouts and then enforce some conditional logic to show/hide them.

• jrstaatsiii

• June 20, 2016 at 11:34 pm

Hey James, I’m not sure I follow how that would work

• petercarsater

• June 21, 2016 at 6:50 pm

Hi jrstaatsiii,

Here’s an example what i’ve done. I’ve added some comments in the code.

Basically, I’m using acf/input/admin_head to add some css and js in the head-tag.

My ACF layouts are named block__text-img, block__quote and block__list. I use javascript to add a class to the body tag (”has-template-X), then i use css to hide layout options.

function acf_admin_head_layout() {

    ?>

    <style type="text/css">

        /* Remove borders on li since we not removing li's  */
        .acf-fc-popup li {
            border:0 !important;
        }

        /* WordPress Template "home"
         * - hide ACF layouts named "block__quote", "block__text-img" and "block__list"
         */
        .has-template-home .acf-fc-popup a[data-layout="block__quote"],     
        .has-template-home .acf-fc-popup a[data-layout="block__text-img"],  
        .has-template-home .acf-fc-popup a[data-layout="block__list"] {     
            display: none;
        }

        /* WordPress default template
         * - hide ACF layout named "block__text-img"
         */
        .has-template-default .acf-fc-popup a[data-layout="block__text-img"] {
            display: none;
        }

    </style>

    <script type="text/javascript">

        (function($) {

            
            $(document).ready(function(){

                <?php 

                global $post;
                
                // Set a javascript variabel "$template_name" based on selected template in WP
                // The variable is then used in window.UpdateACFView to add a CSS class
                // name to the body-tag. Since standard/custom post types doesn't have 
                // page templates we need to set this variable on the first page load
                
                if ($post->post_type == "faq") : // set 'post' for standard post
                    echo 'var $template_name = "post-type/faq";';                   
                else :
                    // Just get the template name
                    echo 'var $template_name = $("#page_template").val();';
                endif; 
                
                ?>

                // Add classes to body 
                window.UpdateACFView = function($template_name) {

                    if ($template_name == "pages/home.php") {   
                        $('body').addClass('has-template-home');                            
                    }

                    if ($template_name == "default") {   
                        $('body').addClass('has-template-default');                            
                    }

                }
                
                window.UpdateACFView($template_name); 

            });

            // When a user change the template in the dropdown we need to remove all our custom classes on the body-tag
            // and then, when ajax is completed, trigger window.UpdateACFView in order to set the correct body-class
            $(document).on('change', '#page_template', function(){

                var $template_name = $('#page_template').val();

                $(document).on('ajaxComplete', function(){
                    $('body').removeClass('has-template-home has-template-default'); // Clear all custom classes
                    window.UpdateACFView($template_name); 
                    $(document).off('ajaxComplete');
                });
            });
            
        })(jQuery);  

    </script>  

    <?php
}
add_action('acf/input/admin_head', 'acf_admin_head_layout');

• petercarsater

• June 21, 2016 at 6:52 pm

Btw, i use the same custom flexible content field on all my templates in order to make a page more modular.

• jrstaatsiii

• June 21, 2016 at 10:32 pm

thanks petercarsater, this is great.

• peterts

• July 29, 2016 at 8:41 am

Thanks petercarsater,

This is just what i needed!

The code you have shown is all a bit advanced for me, trying to understand it. I kind of want to be a bit freestyle in what i hide and don’t hide so i bodged your code to echo the page-id to the admin’s body class so i can be really detailed with what pages see what:

 if ($post->post_type == "page") : // set 'page' for page postypes
                    echo 'var $template_name = "page";';
                else :
                    // Just get the template name
                    echo 'var $template_name = $("#page_template").val();';
                endif;

                ?>

                // Add classes to body
                window.UpdateACFView = function($template_name) {

                    if ($template_name == "page") {
                        $('body').addClass('<?php global $post; echo "pageid-".$post->ID; ?>');
                    }

Can you let me know if this is the best practice to achieve this? Seems to work though.

• Mykola

• June 26, 2020 at 5:38 pm

Hi Guys,

A lot of time has passed but it seems this plugin does what you need https://wordpress.org/plugins/acf-hide-layout/