Add a custom CSS class to your meta boxes

0
Add a custom CSS class to your meta boxes

In this post we will see how to add a CSS class to WordPress meta boxes.

We use the meta boxes in WordPress to group custom fields, and make the management of a little more orderly content. When you do a custom development, you usually play with the meta boxes to make it easy for a client.

In this game, you can group them by tabs, hide them according to their role, assign them to a specific content type or to a specific category … If you have ever been involved in any of these, you have probably needed or missed the fact that function add_meta_box () does not include among its parameters the option to assign a class.

Recall that this function allows:

where:

  • $ id : ID attribute (unique identifier of the meta box)
  • $ title : The name or title that will appear in the header of the meta box
  • $ callback : The function that we will call to paint the content of the meta box
  • $ screen : The screen or screens where the meta box will appear
  • $ context : Where the meta box will appear
  • $ priority : Priority to show the meta box within the context
  • $ callback_args : Parameters that we will pass to the callback function

 

As you can see, we can assign an ID, but not a class. And sometimes, especially when you have to manage a lot of meta boxes, it can be very useful to have a CSS class common to certain meta boxes. In this way we can “group” several of them with the same class, and act on it through CSS or JavaScript .

There is a filter in WordPress, postbox_classes _ {$ page} _ {$ id}  that allows us to inject our own class:

In this example, myposttype would be the name of the post type where the meta box appears, and mymetaboxid the identifier that we have assigned.

If you do not want to add as many filters as meta boxes you have, the ideal is that you create a class to manage them. You can put all the information of your meta boxes in a configuration file. So, you can dynamically generate them and add classes at your convenience.

LEAVE A REPLY