How to add custom tabs and fields to the contact screen

It’s very easy to add custom tabs and fields to the contact screen using the plugins API and the contact meta DB.

2.0 Implementation

This is the implementation for 2.0 only.

See it on GitHub >> https://github.com/tobeyadr/groundhogg-code-examples/blob/0d482f60cccd19e199e32d032afe917a8e860aa7/2.0/custom-tab.php

<?php

class My_Custom_Tab
{

    /**
     * My_Custom_Tab constructor.
     */
    function __construct()
    {

        add_filter( 'groundhogg/admin/contact/record/tabs', [ $this, 'register_tab' ] );
        add_action( 'groundhogg/admin/contact/record/tab/my_custom_tab', [ $this, 'render' ] );
        add_action( 'groundhogg/admin/contact/save', [ $this, 'save' ], 10, 2 );

    }

    /**
     *
     * Register you tab using a unique ID and a name.
     *
     * @param $tabs
     * @return mixed
     */
    public function register_tab( $tabs )
    {
        $tabs[ 'my_custom_tab' ] = __( 'My Custom Tab' );

        return $tabs;
    }

    /**
     * Render the output of the tab
     *
     * @param $contact \Groundhogg\Contact
     */
    public function render( $contact )
    {
        ?>
        <h3>My Custom Tab</h3>
        <table class="form-table">
            <tbody>
            <tr>
                <th>custom Field</th>
                <td><input type="text" name="my_custom_field" value="<?php esc_attr_e( $contact->get_meta( 'my_custom_field' ) ); ?>"></td>
            </tr>
            </tbody>
        </table>
        <?php
    }

    /**
     * Save the custom fields.
     *
     * @param $contact_id int
     * @param $contact \Groundhogg\Contact
     */
    public function save( $contact_id, $contact )
    {

        $my_custom_field_value = sanitize_text_field( \Groundhogg\get_request_var( 'my_custom_field', 'My Default value' ) );

        if ( $my_custom_field_value ){
            $contact->update_meta( 'my_custom_field', $my_custom_field_value );
        }

    }
    
}

$my_new_tab = new My_Custom_Tab();

1.3 Implementation

For versions before 2.0

See it in Github >> https://github.com/tobeyadr/groundhogg-code-examples/blob/0d482f60cccd19e199e32d032afe917a8e860aa7/1.3/custom-tab.php

<?php

class My_Custom_Tab
{

    /**
     * My_Custom_Tab constructor.
     */
    function __construct()
    {

        add_filter( 'wpgh_contact_record_tabs', [ $this, 'register_tab' ] );
        add_action( 'wpgh_contact_record_tab_my_custom_tab', [ $this, 'render' ] );
        add_action( 'wpgh_admin_update_contact_after', [ $this, 'save' ] );

    }

    /**
     *
     * Register you tab using a unique ID and a name.
     *
     * @param $tabs
     * @return mixed
     */
    public function register_tab( $tabs )
    {
        $tabs[ 'my_custom_tab' ] = __( 'My Custom Tab' );

        return $tabs;
    }

    /**
     * Render the output of the tab
     *
     * @param $contact WPGH_Contact
     */
    public function render( $contact )
    {
        ?>
        <h3>My Custom Tab</h3>
        <table class="form-table">
            <tbody>
            <tr>
                <th>custom Field</th>
                <td><input type="text" name="my_custom_field" value="<?php esc_attr_e( $contact->get_meta( 'my_custom_field' ) ); ?>"></td>
            </tr>
            </tbody>
        </table>
        <?php
    }

    /**
     * Save the custom fields.
     *
     * @param $contact_id int
     */
    public function save( $contact_id )
    {

        if ( isset( $_POST[ 'my_custom_field' ] ) ){
            
            $contact = wpgh_get_contact( $contact_id );
            
            $my_custom_field_value = sanitize_text_field( $_POST[ 'my_custom_field' ] );

            if ( $my_custom_field_value ){
                $contact->update_meta( 'my_custom_field', $my_custom_field_value );
            }
        }

    }    
}

$my_new_tab = new My_Custom_Tab();
Was this article helpful to you? Yes No

How can we help?