admin管理员组

文章数量:1303404

I'm trying to developing a WordPress plugin that can modify the UI of a page in the admin panel of a WordPress site. To be specific, I want to add a custom form to the woocommerce edit product page, from my WP plugin.

I browsed through a lot of material, but pretty much everything was about doing this with the help of an external plugin or modifying the theme in some way, but I want to do it from my own WordPress plugin.

Since I'm an absolute beginner in WordPress plugin, I can't think a way of how to do that. It would be much appreciated If someone can point me in the right direction. Thanks in advance.

I'm trying to developing a WordPress plugin that can modify the UI of a page in the admin panel of a WordPress site. To be specific, I want to add a custom form to the woocommerce edit product page, from my WP plugin.

I browsed through a lot of material, but pretty much everything was about doing this with the help of an external plugin or modifying the theme in some way, but I want to do it from my own WordPress plugin.

Since I'm an absolute beginner in WordPress plugin, I can't think a way of how to do that. It would be much appreciated If someone can point me in the right direction. Thanks in advance.

• plugin-development
• wp-admin

Share Improve this question asked Mar 19, 2021 at 14:14 PavinduPavindu 12366 bronze badges 1

• Any code that can be added to a theme can be added to a plugin, so keep that in mind when looking for resources. – Jacob Peattie Commented Mar 19, 2021 at 15:21

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

What you are looking for I think is adding a custom meta box which is a custom HTML you can inject seamlessly within a specific admin screen in Wordpress.

You can find all the information you need in the docs link above, but I'll give you a few steps with quickly written snippets to help you start.

Step 0 - Create the Plugin

First things first. To create a custom plugin, you need to create a new PHP file, say: pavindu_hello_world.php and (optionally) put it inside a directory with the same name.

The PHP file has to start with this PHP comment:

<?php 

/*
 * Plugin Name: Pavindu Hello World!  
 */

This comment (aka. plugin header) basically sets the information related to the plugin that you can see in the plugin list admin page.

Just after the header, add your code that will do whatever you want in your Wordpress site. Note that this file is similar to functions.php file of a theme. Almost whatever snippet you find online that works inside functions.php will also work inside this plugin file (with a few exceptions).

Step 1 - The HTML Content of the metabox

The next thing you need is to write a new function that will output an HTML. We will use this function in Step 2. Let's just assume for now that you'll have the current product in the first argument of the function as a WP_Post object.

This function can be as simple as:

function pavindu_hello_world_metabox_html( $product ) {
    echo "Hello World<br/>";
}

Step 2 - Display the Metabox Inside the Product Page

What is remaining now is to show that HTML inside the page. Here you need to hook to a Wordpress action. You may read this page if you are not familiar with Wordpress hooks. From that page I quote:

Actions are one of the two types of Hooks. They provide a way for running a function at a specific point in the execution of WordPress Core, plugins, and themes.

The action that we will hook to is add_meta_boxes. We will also call the Wordpress core function add_meta_box() that will actually display the metabox correctly. There are some useful options for that function that you can check out.

Here's the code that you need to add:

function pavindu_hello_world_metabox_init($type) {
    if ($type == 'product') {
        add_meta_box(
            'pavindu_custom_metabox',      // Unique ID
            'Pavindu Custom Metabox',      // Box title
            'pavindu_hello_world_metabox_html',  // The function you added in Step 1
        );
    }
}
add_action( 'add_meta_boxes', 'pavindu_hello_world_metabox_init' );

That's it! Now upload your plugin directory to wp-content/plugins, activate it, then go to any product edit page and you should see the new HTML there.

Step 3 - Adding a Custom Form

Okay, this is a bit tricky one. I said earlier that you can output whatever HTML code you want inside the pavindu_hello_world_metabox_html() function. But, to be honest, you shouldn't just add a normal HTML <form> there with a submit button and deal with it as you do with a normal form. Don't ever do that, that will break the larger form of the edit page.

What you should do instead, is to only add the new fields you want to add, without the <form> tag and without a submit button. Then, in another action you can catch the field data sent when you save the product.

Here's the code of the plugin after a few modifications. I added a text field that saves a meta field to the product and shows it if it has a value.

<?php
/*
 *  Plugin Name: Simple Custom Products Form
 */
 
function pavindu_simple_custom_metabox_html( $product ) {
    $url = get_post_meta($product->ID, 'pavindu_custom_external_url', true);
    
    ?>
    <label for="pavindu-external-url">External Url</label>
    <input type="text" name="pavindu-external-url" id="pavindu-external-url" value="<?=$url?>"/>    
    <?php
} 

function pavindu_simple_custom_metabox( $type ) {
    if ($type == 'product') {
        add_meta_box(
            'pavindu_simple_custom_metabox_id',
            'Simple Custom Metabox',
            'pavindu_simple_custom_metabox_html'
        );
    }
}
add_action('add_meta_boxes', 'pavindu_simple_custom_metabox');

function pavindu_save_product( $product_id, $product ) {
    if ($product->post_type == 'product') {
        if ( array_key_exists( 'pavindu-external-url', $_POST ) ) {
            update_post_meta(
                $product_id,
                'pavindu_custom_external_url',
                $_POST['pavindu-external-url']
            );
        }
    }
    
}
add_action( 'save_post', 'pavindu_save_product' , 10, 2);

本文标签： Programmatically modify an admin page UI of a WordPress site from my WordPress plugin