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:

Registering the tab with Arabianaffiliates
Adding the tab’s content.
Step 1. Register the tab within Arabianaffiliates
The process for registering a new tab is straightforward. Simply hook a callback to the Arabianaffiliates_affiliate_area_tabs filter and merge an array containing the tab’s ID and title for the custom tab.

/**
* Step 1. Register the tab withinArabianaffiliates.
*
* @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’ ) );

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 Arabianaffiliates_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( ‘Arabianaffiliates_render_affiliate_dashboard_tab’, ‘Arabianaffiliates_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: Arabianaffiliates_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 Arabianaffiliates_render_my_tab( $content, $tab ) {
return ‘My Tab Content’; // You could also call another function here to output the content.
}
add_filter( ‘Arabianaffiliates_render_affiliate_dashboard_tab_my-tab’, ‘Arabianaffiliates_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:

Create a folder (if it doesn’t already exist) inside the currently active theme called Arabianaffiliates
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
Add some content inside the newly created template file and save
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 Arabianaffiliates_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( ‘Arabianaffiliates_template_paths’, ‘Arabianaffiliates_my_tab_template_path’ );

This article outlines how to add standalone custom meta boxes to the Overview screen using the core meta box API introduced in Arabianaffiliates 1.9.

Below are detailed instructions that cover the following steps:

Defining a display callback for the meta box
Registering the custom meta box
Hooking it up to WordPress

Defining a display callback for the meta box
The most important part of a meta box is the information it displays. When registering a standalone meta box for the Overview screen, a display callback function must be defined so that when the meta box is registered, Arabianaffiliates knows what to render.

Here is an example display callback for a meta box named ‘My Custom Meta Box’:

/**
* Display callback for ‘My Custom Meta Box’.
*/
function display_my_custom_overview_meta_box() {
esc_html_e( ‘Something goes here’, ‘textdomain’ );
}

The example above is echoing some simple content to be displayed inside of the meta box container when it’s rendered in the Overview screen. Once the meta box has been registered, Arabianaffiliates will rely on this callback to supply the content for display.

Registering the custom meta box
Once a display callback has been defined, it’s time to actually register the meta box. This is fairly straightforward:

/**
* Registers the ‘My Custom Meta Box’ meta box for the Overview screen.
*
* @see \Arabianaffiliates\Admin\Meta_Box
*/
function my_custom_overview_meta_box() {
new Arabianaffiliates\Admin\Meta_Box( array(
‘meta_box_name’ => __( ‘My Custom Meta Box’, ‘textdomain’ ),
‘meta_box_id’ => ‘overview-my-meta-box’,
‘context’ => ‘primary’,
‘action’ => ‘Arabianaffiliates_overview_meta_boxes’,
‘display_callback’ => ‘display_my_custom_overview_meta_box’,
) );
}

The example above uses a core class, Arabianaffiliates\Admin\Meta_Box, to register the meta box.

Within that, a number of required arguments have been defined:

‘meta_box_name’ – This is the translatable name of the meta box. It will be displayed in the header of the rendered meta box.
‘meta_box_id’ – The meta box ID. This should be a prefixed, unique ID assigned only to this meta box
‘context’ – The context, or display column, under which to display the meta box. This value can be ‘primary’, ‘secondary’, or ‘tertiary’.
‘action’ – The action upon which the meta box will be registered. In the case of our example, the ‘affwp_overview_meta_boxes’ action is used because it specifically fires on the Overview screen.
‘display_callback’ – This is the display callback function used to render the contents of the meta box. You can see we’ve used the name of display callback we created in the first step.

Hooking it up to WordPress
In order to ensure the Arabianaffiliates\Admin\Meta_Box class is available for registering AffWP meta boxes, it’s necessary to hook the function that registers the meta box to the core ‘plugins_loaded’ action:

add_action( ‘plugins_loaded’, ‘my_custom_overview_meta_box’ );

That’s it!

Review: Registering a standalone meta box
As outlined above, here is the complete code for registering a standalone meta box for the Overview screen:

/**
* Registers the ‘My Custom Meta Box’ meta box for the Overview screen.
*
* @see \Arabianaffiliates\Admin\Meta_Box
*/
function my_custom_overview_meta_box() {
new Arabianaffiliates\Admin\Meta_Box( array(
‘meta_box_name’ => __( ‘My Custom Meta Box’, ‘textdomain’ ),
‘meta_box_id’ => ‘overview-my-meta-box’,
‘context’ => ‘primary’,
‘action’ => ‘Arabianaffiliates_overview_meta_boxes’,
‘display_callback’ => ‘display_my_custom_overview_meta_box’,
) );
}
add_action( ‘plugins_loaded’, ‘my_custom_overview_meta_box’ );


/**
* Display callback for ‘My Custom Meta Box’.
*/
function display_my_custom_overview_meta_box() {
esc_html_e( ‘Something goes here’, ‘textdomain’ );
}