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
  2. Adding the tab's content.

Step 1. Register the tab within AffiliateWP.

The process for registering a new tab is straightforward. Simply hook a callback to the  affwp_affiliate_area_tabs filter and merge an array containing the tab's ID and title for the custom tab.

/**
 * 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 ) {

    /**
     * Tab ID: my-tab
     * Tab Title: My Tab
     */
    $tabs = array_merge( $tabs, array( 'my-tab' => 'My Tab' ) );

    return $tabs;
}
add_filter( 'affwp_affiliate_area_tabs', 'affwp_my_tab', 10, 1 );

Step 2. Render the content for the custom tab.

Note the use of the  my-tab tab ID inside the conditional statement which will need to match the ID you defined in step one.

/**
 * Step 2. Render the content for the custom tab.
 *
 * @param string $content The currently active tab's content.
 * @param string $tab The currently active tab's ID.
 * 
 * @return string $content The currently active tab's content.
 */ 
function affwp_render_my_tab( $content, $tab ) {

    if ( $tab === 'my-tab' ) {
        $content = 'My Tab Content'; // You could also call another function here to output the content.
    }

    return $content;
    
}
add_filter( 'affwp_render_affiliate_dashboard_tab', 'affwp_render_my_tab', 10, 2 );

That's it!

The above two steps are all that's required to create a custom tab in the Affiliate Area.

Alternative methods to Step 2:

The following methods below are alternative approaches to Step 2 above.

Passing the tab's ID directly into the filter

The function below is very similar to the function in Step 2, except the conditional statement has been removed and the tab's ID is passed directly to the filter.

/**
 * Alternative approach to Step 2.
 * 
 * You can skip the conditional statement shown in Step 2 by passing the tab's ID directly into the filter:
 * Example: affwp_render_affiliate_dashboard_tab_{id}
 * 
 * @param string $content The currently active tab's content.
 * @param string $tab The currently active tab's ID.
 * 
 * @return string $content The currently active tab's content.
 */ 
function affwp_render_my_tab( $content, $tab ) {
    return 'My Tab Content'; // You could also call another function here to output the content.
}
add_filter( 'affwp_render_affiliate_dashboard_tab_my-tab', 'affwp_render_my_tab', 10, 2 );

Using a template file inside the currently active WordPress theme

You can load the custom tab's content via a template file, inside the currently active WordPress theme. Here's how to do that:

  1. Create a folder (if it doesn't already exist) inside the currently active 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. Add some content inside the newly created template file and save
  4. That's it! Reload the Affiliate Area and the tab content will appear.

Using a template file from inside a custom plugin

You can load the custom tab's content via a template file, inside a custom plugin. Doing it this way also allows the template file to be overridden by the active theme (by following the steps above).

/**
 * Adding the tab's content from a template file, within a plugin's "templates" folder.
 * This is an alternative approach to Step 2.
 *
 * @param array  $file_paths Array of file paths.
 * 
 * @return array Filtered file paths.
 */
function affwp_my_tab_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 number since another plugin
     * or code snippet may be using this number already.
     */
    $file_paths[123] = plugin_dir_path( __FILE__ ) . '/templates';

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