How to arrange custom fields into columns on backend

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to apply a custom layout to custom fields displayed in the wp-admin post editor screen, so the fields are shown in columns.

Solution: There is no designer for the layout of fields in the wp-admin editors, but you can enqueue any custom CSS in your child theme using admin_enqueue_scripts.

Relevant Documentation: https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

This support ticket is created 6 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Setting up custom fields, Types plugin

This topic contains 1 reply, has 2 voices.

Last updated by Christian Cox 6 years, 4 months ago.

Assisted by: Christian Cox.

Author

Posts

July 23, 2018 at 1:25 pm #953624

neilH-3

Tell us what you are trying to do?

I want to display custom fields in columns on the back-end, like I can do on front-end. I am building a system for a restaurant company with multiple locations. I am using the following:

- Astra Agency child theme
- Beaver Builder
- Beaver Themer (only for front-end location templates)
- Types
- Views
- Types Forms

The client will add new locations using the front-end Types form, but I have created relationships between each location and restaurant menus. For this company, there are variations of the core menu that apply only to certain locations, so the client will have to use the backend in some cases to edit the menu associated with specific locations.

So the goal is to try and clean up the many fields that appear on the back-end - specifically to arrange the custom fields in columns as I have done on the front-end form.

Is there any documentation that you are following?

Is there a similar example that we can see?

I have included 2 screenshots - the first is what I have now, the second is an example of what I want

What is the link to your site?

hidden link

July 23, 2018 at 7:09 pm #953836

Christian Cox

Hi, there's no built-in design tool for modifying the display of custom fields in the wp-admin post editor screens like this. You can enqueue your own custom CSS file for the admin and apply your own custom style overrides, though. Here's a link to the WordPress documentation for enqueueing styles for admin pages in your custom theme: https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

Unfortunately I don't have any documentation available for styling the fields, so you'll have to use the browser inspector to determine the best selectors and required overrides. It will require a fairly solid grasp of CSS techniques and best practices.