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?
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.
Hi Guys,
A lot of time has passed but it seems this plugin does what you need https://wordpress.org/plugins/acf-hide-layout/
