Support

Account

Home Forums Add-ons Flexible Content Field Hide Layout Option in Flexible Content

Solving

Hide Layout Option in Flexible Content

  • 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?

  • 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.

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

  • 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');
    
  • Btw, i use the same custom flexible content field on all my templates in order to make a page more modular.

  • thanks petercarsater, this is great.

  • 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/

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.