Support

Account

Register Login

Forum Replies Created

  • Hi,
    First of all thanks a ton to Jelmertje & John for all the help and guidance. Anyways. I have finally done it and here I am sharing the solution in the hope it might help others someday in future.

    So, if you are trying to add a custom class to the admin body based on your ACF field data you basically have 2 ways to do that.
    1. Implement it via PHP admin_body_class and in doing so it will work perfectly but as the user makes the changes in the ACF fields the classes won’t be immediately be added to the admin body class and instead the user needs to refresh the page after changing the ACF field data and saving the post/page.
    2. Implement it via JavaScript so that the classes get added immediately as the user make changes to the ACF fields on the admin end.

    Now here I am going to show both the option so that you can decide which one to use.

    Note:
    – Here I am running 2 checks. One is based on Radio Field data and the other is based on the True/False ACF checkbox field data.
    – The PHP script written below is based on PHP 8 syntax
    – The JS script is based on ES6

    THE PHP WAY
    You can do something like these to add custom classes to your admin body based on ACF field data:

    add_filter( 'admin_body_class', function( string $classes ) : string {
  global $post;

  // get_current_screen() returns object with current admin screen
  // @link https://codex.wordpress.org/Function_Reference/get_current_screen
  $current_screen = get_current_screen();

  if( $current_screen?->base === 'post' ) {
    // Get the RADIO button type data
    $some_acf_field = get_field( 'some_acf_field', $post?->ID ) ?? false;
    
    // Run the received data through the switch statement
    switch( $some_acf_field ) {
      case 'something' :
        $classes .= ' page-has-something';
      break;

      case 'foo' :
        $classes .= ' page-has-foo';
      break;

      default :
        $classes .= ' page-has-bar';
      break;
    }

    // Check based on ACF True/False checkbox field
    if( get_field( 'true_false_ace_field', $post?->ID ) ?? false ) {
			$classes .= ' has-some-class';
		}
  }

  return $classes;
} );

    THE JAVASCRIPT WAY
    Now let’s see how to achieve the same using JavaScript.

    Note:
    – Let’s imaging the file name is editor-logic.js and the file has been added to the admin end with the enqueue_block_editor_assets action.

    Now let’s see what’s inside the file.

    /** 
 * Add/Remove Class from the Admin Body tag based on ACF field Data
 * 
 * ACF Fields Being Monitored:
 * 1. Some Radio Field (Name: some_radio_field) [Key: field_61d716c8459d9]
 * 2. Some True False Field (Name some_true_false_field) [Key: field_61d69ffed41ad]
 */

const add_admin_body_class = ( classType = 'something', value  ) => {
	const adminBodyClassList = document.body.classList

	if( classType === 'something' ) {

		switch( value ) {
			case 'foo' :
				if( adminBodyClassList.contains('page-has-bar') ) {
					adminBodyClassList.remove('page-has-bar')
				}

				if( adminBodyClassList.contains('page-has-zar') ) {
					adminBodyClassList.remove('page-has-zar')
				}

				adminBodyClassList.add('page-has-foo')
			break;

			case 'bar' :
				if( adminBodyClassList.contains('page-has-foo') ) {
					adminBodyClassList.remove('page-has-foo')
				}

				if( adminBodyClassList.contains('page-has-zar') ) {
					adminBodyClassList.remove('page-has-zar')
				}

				adminBodyClassList.add('page-has-foo')
			break;
		}
	}

	// Add Default Page Title Center Alignment Based Classes
	if( classType === 'another_thing' ) {

		if( value ) {
			adminBodyClassList.add('page-has-another-thing')
		} else {
			adminBodyClassList.remove('page-has-another-thing')
		}
	}
}

( () => {
	// Get the Page Container Type
	const something = acf.getField('field_61d716c8459d9').val() ?? false
	const anotherThing = acf.getField('field_61d69ffed41ad').val() ?? false

	// Add the admin body classes based on the initial ACF field values
	add_admin_body_class( 'something', something )
	add_admin_body_class( 'another_thing', anotherThing )

	// Listen for changes to the something ACF field values
	const somethingACFField = document.querySelectorAll( '[data-key="field_61d716c3359d9"] input[type="radio"]' )
	if( somethingACFField.length > 0 ) {
		somethingACFField.forEach( ( field ) => {
			field.addEventListener('change', ( e ) => {
				add_admin_body_class( 'something', e.target.value )
			} )
		} )
	}

	// Listen for changes to the anotherThing ACF field values
	const anotherThingACFField = document.querySelectorAll( '[data-key="field_61d69ffed41ad"] input[type="checkbox"]' )
	if( anotherThingACFField.length > 0 ) {
		anotherThingACFField.forEach( ( field ) => {
			field.addEventListener('change', ( e ) => {
				add_admin_body_class( 'another_thing', e.target.checked )
			} )
		} )
	}
} )();

    Hope this helps others.

  • My advice is to load some custom javascript in the admin and add/change/remove classes on the admin body using jQuery (or just vanilla).

    – I was planning to write some vanilla js but did not find an easy way to fetch the ACF field data inside the JS. If you have an example JS snippet of how it can be done that would really help.

  • Thank you so much man for the code snippet. Really helped a lot. Thank you so much….

  • Thanks a lot John for your reply. After reading this, it really feels that the CPT is the simpler route. But still, do you have any example code snippet of acf/prepare_field about how to execute this?

  • Hi John,
    Yes that is a smart way of resolving that. But creating a CPT just for 5/6 CTA variation, doesn’t it feel too extreme?

    Is there no way to populate a dropdown inside the page/post settings where it will show the repeater items added in the theme global settings page and then whatever the user select, get the respective data from the repeater?

  • Yes but in this case if the user add any new pages, posts etc. then they need to come back to the theme settings again selecting under which variation that page will fall under. That is just too much back and forth and not sure how the user will react as for each page/post they need to repeat this step.

  • I looked at that plugin too but it just adds way too much stuff. That’s why I looked at that plugin code to get the inspiration and then make a way slicker version from it.

  • Hey John, thanks for your reply. This exact same thing happened with one of my client’s account. I think inside ACF tools there should be a button to reset it which basically automatically delete these keys and the users don’t have to manually find it in the DB.

  • In the repeater, I have already set the max and min rows to the same number so there is no extra row to be added by the user. But yes I get it it’s extremely difficult to do and I thought the same. I was just wondering in case there is something which I don’t know.

    Thanks for your reply.

  • @chriskirknielsen Thank you so much for your response. I also made an account on this forum just to thank you for sharing your findings and helping others. Thanks a lot.

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