WordPress plugins are a great way to extend your site's functionality, and keeping your code organized makes future maintenance easier. In this guide, we'll go through creating a custom WordPress plugin with menus and submenus that render views from separate files in a clean, organized way.

1. Setting Up Your Custom Plugin Folder and Files

First, you'll need to set up the file structure. Navigate to your WordPress installation's wp-content/plugins/ directory and create a folder for your plugin, such as my-custom-plugin.

Inside this folder, create your main plugin file, for example, my-custom-plugin.php.

2. Recognizing the Plugin with Header Comments

At the top of your my-custom-plugin.php file, add the plugin's metadata. This is how WordPress recognizes your plugin:

<?php
/**
 * Plugin Name: My Custom Plugin
 * Plugin URI: https://example.com/
 * Description: A custom plugin to demonstrate how to render views from separate files.
 * Version: 1.0
 * Author: Your Name
 * Author URI: https://yourwebsite.com/
 */

3. Adding Menus and Submenus with Action Hooks

Next, we’ll add custom menus to the WordPress dashboard using action hooks.

Adding a Menu:

add_action('admin_menu', 'my_custom_plugin_menu');

function my_custom_plugin_menu() {
    add_menu_page(
        'My Custom Plugin',       // Page title
        'Custom Plugin',          // Menu title
        'manage_options',         // Capability
        'my-custom-plugin',       // Menu slug
        'my_custom_plugin_page',  // Callback function
        '',                       // Icon URL
        6                         // Position
    );
}

Adding a Submenu:

add_action('admin_menu', 'my_custom_plugin_submenu');

function my_custom_plugin_submenu() {
    add_submenu_page(
        'my-custom-plugin',        // Parent slug
        'Submenu Title',           // Page title
        'Submenu',                 // Menu title
        'manage_options',          // Capability
        'my-custom-plugin-submenu',// Menu slug
        'my_custom_submenu_page'   // Callback function
    );
}

4. Creating Views in Separate Files

To keep things clean, we'll store the content of each menu and submenu in separate PHP files in a views folder.

Step 1: Create the views Folder
In the my-custom-plugin directory, create a folder called views. Inside that folder, create two files:

main-menu-view.php
submenu-view.php
Step 2: Add Content to the View Files
In views/main-menu-view.php, add the content you want to display on the main plugin page:

<h1>Welcome to My Custom Plugin</h1>
<p>This is the main page of your plugin, loaded from the views folder.</p>
In views/submenu-view.php, add content for the submenu page:

php
Copy code
<div class="wrap">
    <h2>Submenu Page</h2>
    <form method="post" action="options.php">
        <?php
            settings_fields('my_custom_plugin_options_group');
            do_settings_sections('my_custom_plugin');
            submit_button();
        ?>
    </form>
</div>

Step 3: Load the View Files in Callback Functions
In your my-custom-plugin.php file, modify the callback functions to include these view files when rendering the content:

function my_custom_plugin_page() {
    include plugin_dir_path(__FILE__) . 'views/main-menu-view.php';
}

function my_custom_submenu_page() {
    include plugin_dir_path(__FILE__) . 'views/submenu-view.php';
}

Step 4: How This Works
plugin_dir_path(__FILE__): This function returns the path to your plugin directory, making it easy to include files from anywhere within your plugin.
include: This is used to pull in the content from your views folder into the menu and submenu pages.
Now, when you access the custom menu or submenu in the WordPress admin dashboard, it will render the content from the views folder.

5. Summary

By keeping the views for your plugin's menus and submenus in separate files, you maintain a cleaner and more organized codebase. This approach not only helps with readability but also makes your plugin easier to maintain as it grows.

Give this method a try next time you develop a custom WordPress plugin—it will save you a lot of headaches down the line!