[Closed] Change layout of editor view

[Author]

Posts

[deeR-2]

Hi I am trying to layout the editor view to make it easier to input data.

I am building a custom post type for sowing and harvesting seeds. So I have one custom field for Sowing Seed and another for Harvesting.

The fields are the same they are a set of simple checkboxes. See the attached image.

As you can see the fields are listed in one long list. How can I these out so they appear in columns? Ideally, I would like them to split into four columns as I have mocked up in the other attachment.

I'm moving to Toolset from ACF where I know can I achieve this, but I don't seem to be able to achieve this in Toolset.

So to be clear I would like my fields to look like Layout2 in the backend editor, eventually, I would like a front end form so people can also add new seeds.

[Christian Cox]

Hello, unfortunately Toolset does not provide a way to easily adjust the column count of checkboxes groups in the backend post editor area. I think to adjust the number of columns you will need custom CSS that applies a column-count style to one of the checkboxes group container elements. Have you created a child theme for your site? Does your child theme enqueue any custom stylesheets for the admin area? Normally you would find code like that in the child theme's functions.php file. Here is an example showing how to load a stylesheet called tssupp-admin-style.css from the main directory of a child theme:

function load_custom_wp_admin_style() {
        wp_register_style( 'tssupp_wp_admin_css', get_stylesheet_directory_uri() . '/tssupp-admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'tssupp_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

In the tssupp-admin-style.css file, you would need some CSS that applies a custom column-count property, using CSS like the examples shown here: https://www.w3schools.com/cssref/css3_pr_column-count.asp

I have an example of this type of CSS from another site:

.post-type-book div[data-wpt-id='wpcf-checkboxes']{
  column-count:3;
}
.post-type-chapter div[data-wpt-id='wpcf-checkboxes']{
  column-count:3;
}

"book" and "chapter" represent the slugs of the custom post types where the checkboxes group was displayed in wp-admin. "checkboxes" represents the slug of the custom checkboxes group field.

This is about as close as I can get to what you described, but it's not identical. The header text is not easily separated from the group of checkboxes, so it does not appear on its own line. I can help you achieve something like the screenshot here with this custom code snippet if you'd like to try and you have created a child theme already.