Support

Account

Home Forums Backend Issues (wp-admin) Add Html to acf meta-box

Solved

Add Html to acf meta-box

  • Hey,
    I need to add some html/php to a special acf-field group,
    how can i do this in Version 5/Pro.

    Like in this Sketch:
    sketch

    Thanks for any help!!

  • Hi @buckdanny

    I believe you can use acf/render_field to do that. Please take a look at this page to learn more about acf/render_field: http://www.advancedcustomfields.com/resources/acf-render_field/.

  • I thought i can use acf/render_field only to control a certain type of field or all fields, how can I use this with a field-Id or with a field-name?

    like this:
    add_action( ‘acf/render_field/key=FILDKEY’, ‘action_function_name’, 20, 1 );

    thanks alot!

  • Hi @buckdanny

    You can check the field key in acf/render_field. It should be something like this:

    function action_function_name( $field ) {
        
        if ($field['key'] == "field_1234567890"){
            echo "echo something";
        }
    
    }
    add_action( 'acf/render_field', 'action_function_name', 10, 1 );

    where field_1234567890 is your field key.

    I hope this does the trick!

  • Thanks alot, is it also possible to add information to the render field wrap? For example at the beginning or end of the fieldgroup? Would be great to know!

    Thanks alot for your help!

  • Hi @buckdanny

    I believe you need to choose which field you want the extra HTML to show up instead of which field group. This way you can choose the first or last field of the field group.

    I hope this makes sense.

  • Hi James
    another further question: is it possible to show the extra HTML before the label or after the input? At the Moment I get it only between label and input.

    Thanks alot!

  • Hi @buckdanny

    The priority should be working, but I’m not sure why it isn’t. As a workaround, you can use JQuery to move the extra HTML like this:

    function my_acf_admin_footer() {
    	
    	?>
    
    	<script type="text/javascript">
    	(function($){
            $( document ).ready(function() {
                $(".admin-input-extra-top").each(function(){
                    $(this).prependTo($(this).parents(".acf-field"));
                });
                $(".admin-input-extra-bottom").each(function(){
                    $(this).appendTo($(this).parents(".acf-field"));
                });
            });
    	})(jQuery);
    	</script>
    	<?php
    	
    }
    
    add_action('acf/input/admin_footer', 'my_acf_admin_footer');
    
    function action_function_name( $field ) {
    
        if ($field['key'] == "field_56498520140a4"){
            echo '<div class="admin-input-extra-top">This is the top</div>';
            echo '<div class="admin-input-extra-bottom">This is the bottom</div>';
        }
    
    }
    add_action( 'acf/render_field', 'action_function_name', 10, 1 );

    This will move everything in “admin-input-extra-top” class to the top of the label and everything in “admin-input-extra-bottom” class to the bottom of the input.

    I hope this helps.

  • The priority doesn’t work because it appears the actual field is rendered using this action hook:

    do_action( "acf/render_field/type={$field['type']}", $field );

    The action hook do_action( "acf/render_field", $field ); appears before the one mentioned above. In order for priority to work, you need to use the 2nd hook using the field type. Hope that helps.

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

You must be logged in to reply to this topic.