WPSuperDealer

How to Add your own admin tab to WPSuperDealer

Sample Code for adding an admin tab to WPSuperDealer

This sample code will add an admin tab to WPSuperDealer and hooks into the settings and saves them to the global $wpsd_options variable.

The first function creates the tab and the parameter “contact” is our callback for populating the tab’s contents.

The callback needs to return HTML to our first function. From there you can choose to create your own content, displaying & saving the data how you want.

But if you’d like it to appear seamless then follow the format of our second function, my_tab_content(), and register your fields.

You can then use the third function, wpsd_my_tab_settings_save(), to save your data.

				
					<?php
/*
 * How to Add your own admin tab to WPSuperDealer - Sample code
*/

/*
 * You need to namespace all your functions
 * In this example we "my" as the prefix to everything
 * This first function hooks into the settings map
 * It then adds our new tab using the HTML output by the 'content' parameter
*/
function my_wpsd_settings_map_filter( $tabs ) {
    //= Add our array key and the data to populate our tab.
    $tabs['my_tab'] = array(
        'label' => __( 'My Tab', 'wp-super-dealer' ),
        'content' => my_tab_content(),
        'action' => 'save',
        'save_button' => 'Click Me',
    );
    
    return $tabs;
}
add_filter( 'wpsd_settings_map_filter', 'my_wpsd_settings_map_filter', 10, 1 );

/*
 * This function is called to populate the content for our tab
 * We use the WP_SUPER_DEALER\WPSD_FIELDS to generate the HTML for our fields
*/
function my_tab_content() {
    //= Create a variable to store our HTML so we can return it later
	$html = '';
    
    //= Provide a filter for our HTML so other people can bypass it if they want
	$html = apply_filters( 'wpsd_my_settings_filter', $html );
    
    //= If someone has already created some HTML then let's stop here, use that and return
	if ( ! empty( $html ) ) {
		return $html;
	}

    //= Get the global WPSuperDealer options
	global $wpsd_options;
    
    //= Set our form fields class to a variable so we can use it
	$form_fields = new WP_SUPER_DEALER\WPSD_FIELDS;
    
    //= Use time() to generate a unique number for each field's id
    //= Alternatively you could just add [] and get the keys in order
    //= But I like making sure the keys are really unique and if this class
    //= is used more than once on a page then this will help insure they
    //= are all unique
	$time = time();

    //= Create an array of the fields we want to add
	$fields = array(
		$time + 1 => array(
			'label' => __( 'My Setting', 'wp-super-dealer' ),
			'slug' => 'my_setting',
			'type' => 'text',
			'value' => ( isset( $wpsd_options['my_setting'] ) ? $wpsd_options['my_setting'] : __( 'My Default Value', 'wp-super-dealer' ) ),
			'class' => '',
			'tip' => array(
				'title' => __( 'Tip title', 'wp-super-dealer' ),
				'content' => __( 'SLUG-TIP', 'wp-super-dealer' ),
			),
			'placeholder' => 'My Placeholde',
		),
	);

    //= Create a label for our section
	$label = __( 'My Options', 'wp-super-dealer' );
    
    //= Get the HTML for our $fields array
	$content = $form_fields->get_form_fields( $fields );

    //= Put the wrapper around everything so it looks consistent
	$html = wpsd_admin_group_wrap( $label, $content, $fields );
    
    return $html;
}

/*
 * Now we need a function to save our data
 * The function name must be wpsd_{your_tab_slug}_settings_save()
 * your_slug_tab is the array key name you used in the first function
 *
*/
function wpsd_my_tab_settings_save( $args ) {
	//= Get the global settings so we can update them
	global $wpsd_options;
    //= Check the first array and see if there were fields sent
	if ( ! isset( $args[0]['fields'] ) ) {
		return __( 'No fields found to update.', 'wp-super-dealer' );
	}
    //= Loop the fields
	foreach( $args['fields'] as $field=>$value ) {
		//= Swap dashes for underscores, because underscores are cool ;-)
		$field = str_replace( '-', '_', $field );
        //= Add our value to the WPSuperDealer settings array
		$wpsd_options[ $field ] = sanitize_text_field( $value );
	}
	//= Update the options
	update_option( 'wpsd_options', $wpsd_options );

    //= Send back a message to output on the screen, dance with muppets, order pizza, etc.
	return __( 'Settings Saved', 'wp-super-dealer' );
}
?>
				
			

Adding Tips & Tricks

You can add your own ‘Tips & Tricks’ section by creating a function like the following

				
					<?php
function wpsd_my_instructions() {
    $html = '';
    //===================
    //= Everywhere you see my_tab replace it with the slug for your tab
	$html .= '<div class="wpsd-instructions-wrap wpsd-instructions-wrap-my_tab">';
    
        //===================
        //= Replace my_tab on this next line too
		$html .= '<div class="wpsd-instructions-title" data-tab="my_tab">';
			$html .= '<span class="dashicons dashicons-welcome-learn-more"></span>';
    
            //===================
            //= Update your title
			$html .=  __( 'Tips & Tricks - My Options', 'wp-super-dealer' );
		$html .= '</div>';
		$html .=  '<ul class="wpsd-instructions">';
            $html .= '<li>';
                $html .= '<div class="wpsd-tnt-wrap">';
                    $html .= '<div class="wpsd-tnt-col">';
						$html .= '<div class="wpsd-video-wrap">';
    
                            //===================
                            //= Put an image or a video tag here
							$html .= '';
						$html .= '</div>';
                    $html .= '</div>';
                    $html .= '<div class="wpsd-tnt-col">';
                        $html .= '<h2>';
    
                            //===================
                            //= Update the Tips title here
                            $html .=  __( 'Tips & Tricks for My Options', 'wp-super-dealer' );
                        $html .= '</h2>';
                        $html .= '<ol>';
    
                            //===================
                            //= Add tips as list items
                            $html .= '<li>';
                                $html .=  __( 'This is important to rememeber!', 'wp-super-dealer' );
                            $html .= '</li>';
                        $html .= '</ol>';
                    $html .= '</div>';
                $html .= '</div>'; //= end $html .= '<div class="wpsd-tnt-wrap">';
    
                //===================
                //= Add the same footer all the other tips & tricks have or remove the next line to hide it
                $html .= wpsd_instructions_footer();
            $html .= '</li>';
		$html .= '</ul>';
    
        //===================
        //= Replace my_tab on this next line too
		$html .= '<div class="wpsd-instructions-hide" data-tab="my_tab">';
			$html .=  __( 'show', 'wp-super-dealer' );
		$html .= '</div>';
	$html .= '</div>';
    
    //= return our HTML
    return $html;
}
				
			

Then in function that creates our tab we’ll go to the top of the $html variable, right after we check if $html is empty and then we add our instructions function to the $html variable like this:

				
					function my_tab_content() {
    //= Create a variable to store our HTML so we can return it later
	$html = '';
    
    //= Provide a filter for our HTML so other people can bypass it if they want
	$html = apply_filters( 'wpsd_my_settings_filter', $html );
    
    //= If someone has already created some HTML then let's stop here, use that and return
	if ( ! empty( $html ) ) {
		return $html;
	}
	$html .= wpsd_my_instructions();