Home Forums Feedback ACF Postbox classes / CSS identifiers


ACF Postbox classes / CSS identifiers

  • Ok, this is the third time I write this so i’m going short now. (own fault, 1. Accidentally closed browser, 2 was logged out when posting, 3 this one)

    Hi all,

    Would be nice to add more CSS customizability to ACF, this can be accomplished by adding classes to the acf-postbox element.

    Some small code adjustments which makes this possible:

    // File: /forms/post.php (around line 290)
    Function: render_meta_box();

    $slug = sanitize_title($args['field_group']['title']);

    Customize line with $class variable:
    $class = 'acf-group-' . $slug . ' acf-postbox ' . $field_group['style'];

    Can this (or another, better, solution) be added to ACF?

    A way of wrapping the ACF fields would be nice too. I think customizability is an important part in the (future-)usage of ACF.

    If there is any way to hook into ACF to customize this / add some sort of feature i’d be glad to hear it!

  • What version of ACF are you using?

    ACF5 Pro now has fields for adding a wrapper class or id to each field.

    Is that what you mean?

  • No, i saw the wrappers. But this is for individual fields only. It’s not possible at the moment to wrap 5 fields in 1 wrapper, right?

    I my example i’m adding a class for the ACF group. I didn’t find any ways to add a class or ID to the group either. I could be missing something though.

  • Not that I know of, no. I don’t generally change the way ACF looks much. Just thought that might be what you meant.

    But, after digging around a bit, there is a filter you might use. When the field group is retrieved this hook is run

    $field_group = apply_filters('acf/get_field_group', $field_group);

    $field_group should have an array of all the field group settings. You can probably alter the classes in $field_group['style'] using a filter.

  • Thanks!

    Ended up with this:

    	function change_style_test($content) {
    		switch ($content['title']) {
    			case 'Title1':
    				$content['style'] = 'acf-postbox-title1';
    			case 'Title2':
    				$content['style'] = 'acf-postbox-title2';
    				$content['style'] = 'seamless';
    			// Test to see output 
    			echo '<pre>';
    			echo '</pre>';
    		return $content;
    	add_filter('acf/get_field_group', 'change_style_test');

    It can be automized though, sanitize the title and add that as a class.

    BTW, i’m not that experienced with using filters in WordPress. Is it possible to get an overview of filters and actions launched in a plugin? Or is it just digging around?

    But, it would still be great to have some <wrapper start> and </wrapper end> field in ACF so you have more control of the structure and looks of ACF.

  • It’s just digging around really. There are a lot of undocumented hooks in ACF. From what I’ve found E has provided hooks so that you can filter just about anything, but just like WP there are a lot that you might need to find.

    I started at 290 in the file you indicated and worked backwards to figure out where $args came from.

    There could even be something more specific, I’m just not finding it.

  • Thanks for explaining some more. The filter solution works with adding the class BUT the styles seamless / WP Metabox are being reset. If anyone’s going to use this code, make sure that you re-include seamless into $content[‘style’], else you get the WP metabox style.

    I’ve contacted Elliot via Twitter. I’ll explain what i mean exactly and will update this topic when necessary.

    Thanks for your help Hube!

  • Thanks for this guys was very helpful. If you don’t want to replace the existing style just use .= to append your style, simply remember to have it be a space before your class.

    And if you need to only affect a specific metabox you can use the $content[‘ID’] to compare.

    Here’s what I’ve done to add Woo’s hide_if_external class to remove my metabox for external products;

    function change_style_test($content) {
        if ( ! empty( $content ) && array_key_exists( 'ID', $content ) && ! empty( $content['ID'] ) && $content['ID'] == 4970) {
            $content['style'] .= ' hide_if_external';
        return $content;
    add_filter('acf/get_field_group', 'change_style_test');

    All the best,

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

The topic ‘ACF Postbox classes / CSS identifiers’ is closed to new replies.