Adding a new tab to the Affiliate Area

This article outlines how to add a new custom tab and its content to the  Affiliate Area (without the use of an add-on like Affiliate Area Tabs).

Below we'll cover the following steps:

  1. Registering the tab with AffiliateWP (required as of AffiliateWP v1.8.1)
  2. Adding the tab
  3. Adding the tab's content.

Registering the custom tab within AffiliateWP

Since version 1.8.1 of AffiliateWP, custom tabs must be registered on a core filter hook in order for template loading to work as expected within the tab's content area.

The process for registering a new tab is straightforward:

/**
 * Step 1. Register the tab within AffiliateWP.
 *
 * @param array $tabs Array of currently-registered tabs.
 * @return array Filtered array of tabs.
 */
function affwp_my_tab( $tabs ) {
	return array_merge( $tabs, array( 'my-tab' ) );
}
add_filter( 'affwp_affiliate_area_tabs', 'affwp_my_tab' );

In the above example, we simply hook a callback (in this case, an anonymous function) to the affwp_affiliate_area_tabs filter and merge in an array containing the slug for the custom tab, my-tab.

Adding the custom tab

This function adds a new  My Tab tab to the end of the existing Affiliate Area tabs. Note the use of the my-tab slug which will need to match the slug you defined in step one.

/**
 * Step 2. Add the tab list item to the end of the existing tabs
 *
 * @param int    $affiliate_id Affiliate ID.
 * @param string $active_tab   Currently active tab
 */
function affwp_custom_add_tab( $affiliate_id, $active_tab ) {
    ?>

    <li class="affwp-affiliate-dashboard-tab<?php echo $active_tab == 'my-tab' ? ' active' : ''; ?>">
        <a href="<?php echo esc_url( add_query_arg( 'tab', 'my-tab' ) ); ?>">
		<?php esc_html_e( 'My Tab', 'textdomain' ); ?>
	</a>
    </li>

    <?php
}
add_action( 'affwp_affiliate_dashboard_tabs', 'affwp_custom_add_tab', 10, 2 );

Adding the custom tab's content

There are a couple of different ways to add the tab's content. Which one you choose will depend on your goals.

  1. Using a function
  2. Using a template file within the currently active WordPress theme.

Using a function

The function below shows some hard-coded content, but you could also pull in any dynamic content.

/**
 * Step 3. Adding the tab's content
 *
 * @param int $affiliate_id Affiliate ID.
 */
function affwp_custom_tab_content( $affiliate_id ) {

    // Prevent this tab's content from showing on any other tabs.
    if ( 'my-tab' !== affwp_get_active_affiliate_area_tab() ) {
        return;
    }
    ?>

    <p><?php _e( 'The tab&#8217;s content goes here.', 'textdomain' ); ?></p>

    <?php
}
add_action( 'affwp_affiliate_dashboard_bottom', 'affwp_custom_tab_content' );

Using a template file

The tab's content can automatically be loaded via the use of a template file in the currently active WordPress theme.

  1. Create a folder (if it doesn't already exist) inside the theme called affiliatewp
  2. Create a new file called dashboard-tab-{tab}.php where {tab} is your tab's slug name. In our example above, this file would be called dashboard-tab-my-tab.php
  3. That's it! Reload the Affiliate Area and the tab content will appear.

And finally, if you're building a custom plugin you can also load the tab's content by using a template file directly inside your plugin. Doing it this way also allows the template file to be overridden by the active theme (by following the steps above).

/**
 * Step 3. Adding the tab's content from a template file, within a plugin's /templates folder
 *
 * @param array $file_paths Array of file paths.
 * @return array Filtered file paths.
 */
function affwp_custom_load_template_path( $file_paths ) {

    /**
     * The file path must be a unique number. If for whatever reason the tab's
     * content cannot be seen, try increasing the file path since another plugin
     * or code snippet may be using this number already.
     */
    $file_paths[100] = plugin_dir_path( __FILE__ ) . '/templates';

    return $file_paths;
}
add_filter( 'affwp_template_paths', 'affwp_custom_load_template_path' );