Use action, filter, or hook to append HTML to WordPress plugin function

admin 管理员组

文章数量: 1086019

I am new to WordPress actions, filters, and hooks, and am wondering if it is possible to use one of the three to append some HTML to a defined plugin function using the theme's functions.php file. The HTML is helper text that is currently in the plugin's main PHP file, but would I like to move it to the functions.php file because of future updates to the plugin. The paragraph with the class of "appended-text" is what should be appended to the HTML using an action, filter, or hook.

Plugin's function:

public function insert_upload_form() {
    if ( ! current_user_can( 'upload_files' ) ) {
        return; //Users must be author or greater
    }

$user_id = $this->get_user_id();
$post_id = $this->get_post_id( $user_id );

?>
<tr valign="top" class="user-metronet-profile-picture">
    <th scope="row"><?php esc_html_e( 'Profile Image', 'metronet-profile-picture' ); ?></th>
    <td id="mpp">
        <input type="hidden" name="metronet_profile_id" id="metronet_profile_id" value="<?php echo esc_attr( $user_id ); ?>" />
        <input type="hidden" name="metronet_post_id" id="metronet_post_id" value="<?php echo esc_attr( $post_id ); ?>" />
        <div id="metronet-profile-image">
        <?php
        $has_profile_image = false;
        if ( has_post_thumbnail( $post_id ) ) {
            $has_profile_image = true;
            echo '<a style="display:block" href="#" class="mpp_add_media">';
            $thumb_src      = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'thumbnail', false, '' );
            $post_thumbnail = sprintf( '<img style="display:block" src="%s" width="150" height="150" title="%s" />', esc_url( $thumb_src[0] ), esc_attr__( 'Upload or Change Profile Picture', 'metronet-profile-picture' ) );
            echo wp_kses_post( $post_thumbnail );
            echo sprintf( '<div id="metronet-click-edit">%s</div>', esc_html__( 'Click to Edit', 'metronet-profile-picture' ) );
            echo '</a>';
        } else {
            echo '<a style="display:block" href="#" class="mpp_add_media default-image">';
            $post_thumbnail = sprintf( '<img style="display:block" src="%s" width="150" height="150" title="%s" />', self::get_plugin_url( 'img/mystery.png' ), esc_attr__( 'Upload or Change Profile Picture', 'metronet-profile-picture' ) );
            echo wp_kses_post( $post_thumbnail );
            echo sprintf( '<div id="metronet-click-edit">%s</div>', esc_html__( 'Click to Edit', 'metronet-profile-picture' ) );
            echo '</a>';
        }
        $remove_classes = array( 'dashicons', 'dashicons-trash' );
        if ( ! $has_profile_image ) {
            $remove_classes[] = 'mpp-no-profile-image';
        }
        ?>
            <a id="metronet-remove" class="<?php echo implode( ' ', $remove_classes ); // phpcs:ignore ?>" href="#" title="<?php esc_attr_e( 'Remove profile image', 'metronet-profile-picture' ); ?>"><?php esc_html_e( 'Remove profile image', 'metronet-profile-picture' ); ?></a>
            <div style="display: none">
                <?php printf( '<img class="mpp-loading" width="150" height="150" alt="Loading" src="%s" />', esc_url( self::get_plugin_url( '/img/loading.gif' ) ) ); ?>
            </div>
        </div><!-- #metronet-profile-image -->
        <div id="metronet-override-avatar">
            <input type="hidden" name="metronet-user-avatar" value="off" />
            <?php
            //Get the user avatar override option - If not set, see if there's a filter override.
            $user_avatar_override = get_user_option( 'metronet_avatar_override', $user_id );
            $checked = '';
            if ( $user_avatar_override ) {
                $checked = checked( 'on', $user_avatar_override, false );
            } else {
                $checked = checked( true, apply_filters( 'mpp_avatar_override', false ), false );
            }

            //Filter for hiding the override interface.  If this option is set to true, the mpp_avatar_override filter is ignored and override is enabled by default
            $hide_override = apply_filters( 'mpp_hide_avatar_override', false );
            if ( $hide_override ) :
                ?>
                <input type="hidden" name="metronet-user-avatar" id="metronet-user-avatar" value="on"  />
                <?php
                else :
                    ?>
                    <br /><input type="checkbox" name="metronet-user-avatar" id="metronet-user-avatar" value="on" <?php echo $checked; // phpcs:ignore ?> /> <label for="metronet-user-avatar"><?php esc_html_e( 'Override Avatar?', 'metronet-profile-picture' ); ?></label>
                <?php endif; ?>
        </div><!-- #metronet-override-avatar -->
        <p class="appended-text">
            <strong>Note: optimum image size is 200 pixels wide by 200 pixels tall.<br>
            Maximum file size is 200KB.<br>
            (Your profile image may appear "squished" in this preview, but will appear normal on articles and events you post, and on your author page.)
            </strong>
        </p>
    </td>
</tr>
<?php
/**
 * Allow other plugins to run code after the user profile picture UI.
 *
 * @since 2.3.0
 *
 */
do_action( 'mpp_user_profile_form', $user_id );
} //end insert_upload_form

I am new to WordPress actions, filters, and hooks, and am wondering if it is possible to use one of the three to append some HTML to a defined plugin function using the theme's functions.php file. The HTML is helper text that is currently in the plugin's main PHP file, but would I like to move it to the functions.php file because of future updates to the plugin. The paragraph with the class of "appended-text" is what should be appended to the HTML using an action, filter, or hook.

Plugin's function:

public function insert_upload_form() {
    if ( ! current_user_can( 'upload_files' ) ) {
        return; //Users must be author or greater
    }

$user_id = $this->get_user_id();
$post_id = $this->get_post_id( $user_id );

?>
<tr valign="top" class="user-metronet-profile-picture">
    <th scope="row"><?php esc_html_e( 'Profile Image', 'metronet-profile-picture' ); ?></th>
    <td id="mpp">
        <input type="hidden" name="metronet_profile_id" id="metronet_profile_id" value="<?php echo esc_attr( $user_id ); ?>" />
        <input type="hidden" name="metronet_post_id" id="metronet_post_id" value="<?php echo esc_attr( $post_id ); ?>" />
        <div id="metronet-profile-image">
        <?php
        $has_profile_image = false;
        if ( has_post_thumbnail( $post_id ) ) {
            $has_profile_image = true;
            echo '<a style="display:block" href="#" class="mpp_add_media">';
            $thumb_src      = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), 'thumbnail', false, '' );
            $post_thumbnail = sprintf( '<img style="display:block" src="%s" width="150" height="150" title="%s" />', esc_url( $thumb_src[0] ), esc_attr__( 'Upload or Change Profile Picture', 'metronet-profile-picture' ) );
            echo wp_kses_post( $post_thumbnail );
            echo sprintf( '<div id="metronet-click-edit">%s</div>', esc_html__( 'Click to Edit', 'metronet-profile-picture' ) );
            echo '</a>';
        } else {
            echo '<a style="display:block" href="#" class="mpp_add_media default-image">';
            $post_thumbnail = sprintf( '<img style="display:block" src="%s" width="150" height="150" title="%s" />', self::get_plugin_url( 'img/mystery.png' ), esc_attr__( 'Upload or Change Profile Picture', 'metronet-profile-picture' ) );
            echo wp_kses_post( $post_thumbnail );
            echo sprintf( '<div id="metronet-click-edit">%s</div>', esc_html__( 'Click to Edit', 'metronet-profile-picture' ) );
            echo '</a>';
        }
        $remove_classes = array( 'dashicons', 'dashicons-trash' );
        if ( ! $has_profile_image ) {
            $remove_classes[] = 'mpp-no-profile-image';
        }
        ?>
            <a id="metronet-remove" class="<?php echo implode( ' ', $remove_classes ); // phpcs:ignore ?>" href="#" title="<?php esc_attr_e( 'Remove profile image', 'metronet-profile-picture' ); ?>"><?php esc_html_e( 'Remove profile image', 'metronet-profile-picture' ); ?></a>
            <div style="display: none">
                <?php printf( '<img class="mpp-loading" width="150" height="150" alt="Loading" src="%s" />', esc_url( self::get_plugin_url( '/img/loading.gif' ) ) ); ?>
            </div>
        </div><!-- #metronet-profile-image -->
        <div id="metronet-override-avatar">
            <input type="hidden" name="metronet-user-avatar" value="off" />
            <?php
            //Get the user avatar override option - If not set, see if there's a filter override.
            $user_avatar_override = get_user_option( 'metronet_avatar_override', $user_id );
            $checked = '';
            if ( $user_avatar_override ) {
                $checked = checked( 'on', $user_avatar_override, false );
            } else {
                $checked = checked( true, apply_filters( 'mpp_avatar_override', false ), false );
            }

            //Filter for hiding the override interface.  If this option is set to true, the mpp_avatar_override filter is ignored and override is enabled by default
            $hide_override = apply_filters( 'mpp_hide_avatar_override', false );
            if ( $hide_override ) :
                ?>
                <input type="hidden" name="metronet-user-avatar" id="metronet-user-avatar" value="on"  />
                <?php
                else :
                    ?>
                    <br /><input type="checkbox" name="metronet-user-avatar" id="metronet-user-avatar" value="on" <?php echo $checked; // phpcs:ignore ?> /> <label for="metronet-user-avatar"><?php esc_html_e( 'Override Avatar?', 'metronet-profile-picture' ); ?></label>
                <?php endif; ?>
        </div><!-- #metronet-override-avatar -->
        <p class="appended-text">
            <strong>Note: optimum image size is 200 pixels wide by 200 pixels tall.<br>
            Maximum file size is 200KB.<br>
            (Your profile image may appear "squished" in this preview, but will appear normal on articles and events you post, and on your author page.)
            </strong>
        </p>
    </td>
</tr>
<?php
/**
 * Allow other plugins to run code after the user profile picture UI.
 *
 * @since 2.3.0
 *
 */
do_action( 'mpp_user_profile_form', $user_id );
} //end insert_upload_form

• plugins
• functions
• filters
• hooks
• actions

Share Improve this question asked Aug 23, 2019 at 17:10 Mike HermaryMike Hermary 20733 silver badges1010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The do_action calls allow you to add an add_action that will run at that point int he code. Based on the code you provided, you can add a new row using the mpp_user_profile_form action, like:

add_action( 'mpp_user_profile_form', function( $user_id ) {
?>
<tr>
    <p class="appended-text">
        <strong>Note: optimum image size is 200 pixels wide by 200 pixels tall.<br>
        Maximum file size is 200KB.<br>
        (Your profile image may appear "squished" in this preview, but will appear normal on articles and events you post, and on your author page.)
        </strong>
    </p>
</tr>
<?php
} ); 

Otherwise you can append to #metronet-override-avatar div with javascript

本文标签： Use action filter or hook to append HTML to WordPress plugin function