ACF Postbox classes / CSS identifiers

• mklasen

• February 21, 2015 at 11:23 pm

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();

Add:
$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!

• John Huebner

• February 22, 2015 at 2:57 am

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?

• mklasen

• February 22, 2015 at 2:58 am

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.

• John Huebner

• February 22, 2015 at 3:20 am

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.

• mklasen

• February 22, 2015 at 4:02 am

Thanks!

Ended up with this:

	function change_style_test($content) {
		
		switch ($content['title']) {
			case 'Title1':
				$content['style'] = 'acf-postbox-title1';
			break;
			case 'Title2':
				$content['style'] = 'acf-postbox-title2';
			break;
			
			default:
				$content['style'] = 'seamless';
			break;
		}
		
		/*
			// Test to see output 
			echo '<pre>';
			print_r($content);
			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.

• John Huebner

• February 22, 2015 at 4:29 am

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.

• mklasen

• February 22, 2015 at 8:38 pm

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!

• eclipsecreative

• February 22, 2017 at 8:32 am

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,
Cheers