When developing a WordPress plugin, structure and organization are key to creating maintainable and scalable code. The WordPress Plugin Boilerplate (WPPB), available at wppb.me, offers a standardized, organized, and object-oriented foundation for building robust WordPress plugins. WPPB separates the plugin’s functionality into distinct sections for public-facing, admin-specific, and shared functionalities. This separation enhances readability and maintainability, making it easier for developers to manage and extend their plugins over time.

Using WPPB, developers can take advantage of a consistent file structure, adherence to WordPress coding standards, and predefined templates for common plugin components. This approach not only streamlines the development process but also ensures that the plugin can easily integrate with WordPress’s core features and other plugins.

Brief on the Need for an Admin Settings Page with Tabbed Sections

An admin settings page is a crucial component of many WordPress plugins. It provides a user-friendly interface for site administrators to configure and manage the plugin’s settings. For plugins that offer a range of configurations, such as API integrations or customizable options, organizing these settings into tabbed sections can greatly enhance user experience.

Tabbed settings pages allow for a clean and structured interface, making it easier for users to navigate through different settings without feeling overwhelmed. By dividing settings into logical sections, such as “API Settings” for API key configurations and “General Settings” for other plugin options, users can quickly find and adjust the settings they need.

Objective

The primary objectives of this tutorial are two-fold:

1. To Create an Admin Settings Page with Two Tabs: API Settings and General Settings
   We aim to guide you through creating an admin settings page within the WPPB structure that includes two separate tabs. The first tab, “API Settings,” will be dedicated to configuring API-related options like API keys. The second tab, “General Settings,” will cover other plugin settings, such as user preferences or operational parameters.
2. To Ensure Tab State is Maintained After Form Submissions
   A common challenge with tabbed interfaces is maintaining the active tab state, especially after form submissions. In this tutorial, we will implement a solution to ensure that when a user submits settings on one tab and the page reloads, the same tab remains active. This enhances the user experience by providing a seamless and intuitive interface, where users don’t lose their context or have to navigate back to the tab they were working on.

In the following sections, we’ll dive into the specifics of implementing these features in a structured and effective manner, following the best practices laid out by WPPB.

Section 1: Getting Started with WPPB

Introduction to WordPress Plugin Boilerplate

The WordPress Plugin Boilerplate (WPPB) is a standardized, organized framework for developing WordPress plugins. It provides a clear, structured approach to plugin development, adhering to WordPress coding standards and best practices. This framework is designed to help developers create scalable and maintainable plugins by segregating the code into distinct areas for public, admin, and shared functionalities. The use of WPPB is highly recommended for anyone looking to develop professional-grade WordPress plugins.

Setting up your plugin skeleton using WPPB

To begin with WPPB, follow these steps:

1. Generate Your Plugin: Visit wppb.me and fill in the required details to generate your plugin. Download the generated plugin zip file.
2. Install the Plugin: Extract the zip file and upload the plugin folder to your WordPress installation’s wp-content/plugins directory.
3. Activate the Plugin: Log in to your WordPress admin panel, go to the Plugins section, and activate your newly uploaded plugin.
4. Familiarize Yourself with the Structure: Explore the plugin’s directory structure. WPPB divides your plugin into several key directories:
   • admin – for all administration-specific functionalities.
   • public – for functionalities exposed to the site front-end.
   • includes – for common functionalities and utility classes.
5. Initial Configuration: Open the main plugin file (named after your plugin) and review the initial setup. This file defines basic plugin information and includes necessary files from the includes directory.
6. Understand the Loader Class: The Loader class (class-plugin-name-loader.php in the includes directory) is responsible for registering all hooks (actions and filters) used in your plugin. Familiarize yourself with how it manages these hooks.
7. Examine the Admin and Public Classes: These classes (class-plugin-name-admin.php and class-plugin-name-public.php) are where you’ll add most of your plugin’s functionality. Notice how they’re structured and how they interact with the WordPress API.

With your WPPB plugin structure set up and a basic understanding of its components, you’re now ready to start building the admin settings page.

In the next section, we will delve into creating the admin settings page within this structure, paying particular attention to adding the necessary HTML and PHP to facilitate a tabbed interface.

Section 2: Creating the Admin Settings Page

Now that you’re familiar with the WPPB structure, the next step is to create a user-friendly admin settings page for your plugin. This section will guide you through adding this functionality within the admin directory of your WPPB-based plugin.

Navigate to the admin Folder in Your WPPB Plugin Structure

The admin directory in the WPPB structure is designated for all backend, admin-specific functionalities. This is where you’ll add the code for your settings page. Navigate to this directory in your plugin’s folder.

Outline Creating a New Class for the Settings Page

Create a New PHP File: In the admin directory, create a new PHP file for your settings page, for example, class-plugin-name-settings.php

Define Your Class: Open the new file and define a PHP class. This class will handle the rendering and functionality of your settings page.

<?php

class Plugin_Name_Settings {

    // Constructor and methods will go here

}

nclude Your Class in the Admin Class: Open class-plugin-name-admin.php and include your new settings class file at the top.

require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/class-plugin-name-settings.php';

Instantiate Your Settings Class: In the define_admin_hooks method of class-plugin-name-admin.php, instantiate your settings class.

$plugin_admin_settings = new Plugin_Name_Settings();

The Plugin_Name_Admin class in WPPB serves as the primary class for all admin-related functionalities. Here, you will:

• Register styles and scripts for the admin area.
• Define and add the settings page to the WordPress admin menu.
• Handle the saving and retrieval of plugin settings.

In your Plugin_Name_Settings class, you’ll focus on defining the layout and functionality of the settings page itself. This includes:

• Creating HTML for the settings page with tabbed sections.
• Defining settings fields and sections for each tab.
• Handling the data submitted from these settings forms.

In the next section, we’ll dive into how to implement tab functionality for your settings page, creating a user-friendly and organized interface for your plugin’s settings.

Section 3: Adding Tab Functionality to the Settings Page

Creating a tabbed interface for your plugin’s settings page enhances usability, especially when dealing with multiple categories of settings. In this section, we’ll cover how to add tabs to the settings page and manage their content.

Define Tabs in the HTML Structure

Start by defining the tabs in your settings page HTML. This is typically done in the display method of your Plugin_Name_Settings class.

Create Tab Headers: Add HTML for the tab headers. These will act as navigation for your settings page

public function display() {
    ?>
    <h2 class="nav-tab-wrapper">
        <a href="?page=plugin_name&tab=api_settings" class="nav-tab <?php echo $active_tab == 'api_settings' ? 'nav-tab-active' : ''; ?>">API Settings</a>
        <a href="?page=plugin_name&tab=general_settings" class="nav-tab <?php echo $active_tab == 'general_settings' ? 'nav-tab-active' : ''; ?>">General Settings</a>
    </h2>
    <?php
}

Add Content Sections for Each Tab: Below the tab headers, create sections for each tab’s content. Use PHP to conditionally display the content based on the active tab.

if ($active_tab == 'api_settings') {
    // API settings form
} else if ($active_tab == 'general_settings') {
    // General settings form
}

Managing Active Tab State with PHP

To maintain the active tab state, especially after form submissions, utilize the $_GET superglobal to check which tab is currently active.

Determine the Active Tab: At the beginning of your display method, add a PHP snippet to determine the active tab based on the URL parameter.

$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'api_settings';

1. Use the Active Tab in Your HTML: Adjust your tab headers and content sections to use the $active_tab variable. This ensures that the correct tab remains active on page reloads and after form submissions.

Conclusion

With these steps, you’ve successfully added a tabbed interface to your plugin’s settings page. The use of URL parameters and conditional rendering in PHP allows for a dynamic and user-friendly experience. In the next section, we will delve into how to handle form submissions within these tabs to ensure that settings are saved correctly and the active tab state is preserved.