Support

Account

Home Forums Backend Issues (wp-admin) Conditionally format a tab name if internal field has value

Solved

Conditionally format a tab name if internal field has value

  • Does anyone know how to format the tab name on a tab control depending on the value in a specific field? In the Enter/Edit post screen (backend), I use a tab control to organize the acf fields for data entry and use. The last tab is ‘Notes’. I would like to make the name of this tab stand out by conditionally formatting it if the use has previously entered a note into the WISIWYG field within the tabbed area. If someone could provide and example, I would greatly appreciate it.

    Format Tab on Tab Control

  • Tab Control

  • https://www.advancedcustomfields.com/resources/acf-prepare_field/

    
    // add filter using field key, change to your tab field's key
    add_filter('acf/prepare_field/key=field_123456', 'custom_tab_format', 20);
    function custom_tab_format($field) {
      // see if other field has value
      if (get_field('other_field_name')) {
        $field['label'] = '<strong>'.$field['label'].'</strong>';
      }
      return $field;
    }
    
  • Thank you, John Huebner – Everything in the code provided above works as planned – except the formatting. I can’t get the field label to format to bold. I can change the value, so I know the ‘if’ statement and add_filter are all working, but the formatting part does not work. I can just add an asterisk to indicate a note has been added, but I am curious how to format within a php statement and pass it to a variable, as you did above.

    Any other ideas?

  • That’s odd. If you add <strong></strong> to the label does the html appear in the code for the label. I did not test the code completely. What I did was add strong tags to the label field in the tab field setting to make sure that it could be done and that worked. Altering the label in a prepare_field filter should work.

  • Hi John,

    Here’s what I see in the inspector:
    Inspector CSS for Notes Tab Name

    Daru

  • Did you mean to add an image?

  • CSS for Strong Tab

  • Now I see, WP is setting the font weight for b,strong to 600. ACF is also setting the font weight of tab text to 600, so there’s no difference. You will need to set the font weight. You can do this in one of two ways. You can add a custom style sheet for the admin or you can do it inline. I would do it inline.

    
    // add filter using field key, change to your tab field's key
    add_filter('acf/prepare_field/key=field_123456', 'custom_tab_format', 20);
    function custom_tab_format($field) {
      // see if other field has value
      if (get_field('other_field_name')) {
        $field['label'] = '<strong style="font-weight: bold;">'.$field['label'].'</strong>';
      }
      return $field;
    }
    
  • Thanks a million, John! That did the trick!! 🙂

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.