WordPress plugins extend core functionality without modifying core files. By creating a plugin, you can tailor WordPress to your specific needs—such as managing a list of products with custom attributes. This tutorial walks you through creating a simple yet functional Product Management Plugin using custom post types and meta fields.
What is a Product Management Plugin?
A Product Management Plugin lets you add, update, and display products with details like name, price, SKU, and description. Instead of relying on bulky eCommerce platforms, this is ideal for lightweight use cases—like showcasing a catalog.
Setting Up the Plugin Folder and Main File
To begin, create a new folder inside the wp-content/plugins directory and name it:
wp-content/plugins/product-manager
Inside this folder, create a file named:
product-manager.phpThis will act as the main plugin file. WordPress recognizes a plugin by scanning all PHP files in the plugin folder for a plugin header—a specific comment block at the top of the file. Here's the required plugin header:
<?php
/**
* Plugin Name: Product Manager
* Description: A simple plugin to manage products with a custom post type, meta fields, and shortcode.
* Version: 1.0
* Author: Your Name
*/
// Prevent direct access to this file for security
if (!defined('ABSPATH')) exit;
// Include the file to register the 'product' custom post type
require_once plugin_dir_path(__FILE__) . 'product-post-type.php';
// Include the file to add and handle custom meta fields (price and SKU)
require_once plugin_dir_path(__FILE__) . 'product-meta-box.php';
// Include the file to register a shortcode for displaying products on the frontend
require_once plugin_dir_path(__FILE__) . 'product-shortcode.php';
?>Note: The Plugin Name line is essential. WordPress uses it to identify and display the plugin on the Plugins page in the admin dashboard. Without this header, the plugin won't appear in the list.
This file also includes the other PHP files that contain the core functionality—such as registering products and handling custom fields.
Registering a Custom Post Type for Products
Create a new file inside your plugin folder and name it:
product-post-type.php
This file defines and registers a custom post type named product. Custom post types allow you to create new content types in WordPress that behave like posts or pages but serve a different purpose. In this case, you're creating a dedicated "Products" section in the admin menu where users can add and manage product entries. Here's the code inside product-post-type.php:
<?php
function pm_register_product_post_type() {
register_post_type('product', [
'labels' => [
'name' => 'Products',
'singular_name' => 'Product',
'add_new' => 'Add New',
'add_new_item' => 'Add New Product',
'edit_item' => 'Edit Product',
],
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-cart',
'supports' => ['title', 'editor', 'thumbnail'],
'show_in_rest' => true,
]);
}
add_action('init', 'pm_register_product_post_type');
What this file does:
- Uses
register_post_type(), a predefined WordPress function, to create a new post type calledproduct. - Adds a new menu item labeled Products to the WordPress admin panel.
- Allows the use of built-in WordPress features like title, content editor, and featured image.
- Assigns a shopping cart icon to the menu (
dashicons-cart). - Makes the post type public and accessible on the frontend.
- Enables archive pages for listing all products.
- Enables block editor support with
show_in_rest => true.
Note: register_post_type() is a built-in WordPress function that lets you define and register a new content type with custom behavior. It must be called during the init action.
After activating the plugin, you'll see a Products menu in the admin sidebar where you can add new product entries just like you add posts or pages.
Adding Custom Meta Fields for Product Details
To store extra product information like Price and SKU, you'll use custom meta fields. These fields appear on the Add/Edit Product screen in the WordPress admin. To add and manage these fields, create a new file in your plugin folder named:
product-meta-box.php
This file will do three main things:
- Display custom fields (Price and SKU) on the product editor screen.
- Save field data when a product is created or updated.
- Secure the data using nonces and sanitization.
Add a Meta Box
<?php
// Register the meta box for product details
function pm_add_product_meta_boxes() {
add_meta_box(
'pm_product_details', // Meta box ID
'Product Details', // Title displayed in the editor
'pm_render_product_meta_box', // Callback to render fields
'product', // Post type where the box appears
'normal', // Context (position)
'default' // Priority
);
}
add_action('add_meta_boxes', 'pm_add_product_meta_boxes');
This code adds a Product Details box on the product editor screen.
Render Input Fields
Now define the callback function pm_render_product_meta_box() to show the input fields:
<?php
function pm_render_product_meta_box($post) {
$price = get_post_meta($post->ID, '_pm_price', true);
$sku = get_post_meta($post->ID, '_pm_sku', true);
wp_nonce_field('pm_save_product_meta', 'pm_product_meta_nonce');
?>
<p>
<label for="pm_price">Price:</label><br>
<input type="text" id="pm_price" name="pm_price" value="<?php echo esc_attr($price); ?>">
</p>
<p>
<label for="pm_sku">SKU:</label><br>
<input type="text" id="pm_sku" name="pm_sku" value="<?php echo esc_attr($sku); ?>">
</p>
<?php } ?>It shows two fields: one for Price and one for SKU. Existing values are pre-filled when editing.
Save the Field Data
To save the data entered by users when a product is saved or updated:
function pm_save_product_meta($post_id) {
// Verify nonce for security
if (!isset($_POST['pm_product_meta_nonce']) ||
!wp_verify_nonce($_POST['pm_product_meta_nonce'], 'pm_save_product_meta')) {
return;
}
// Prevent saving during autosave or quick edit
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
// Save Price
if (isset($_POST['pm_price'])) {
update_post_meta($post_id, '_pm_price', sanitize_text_field($_POST['pm_price']));
}
// Save SKU
if (isset($_POST['pm_sku'])) {
update_post_meta($post_id, '_pm_sku', sanitize_text_field($_POST['pm_sku']));
}
}
add_action('save_post', 'pm_save_product_meta');
This code securely saves and sanitizes the data when the product is updated.
Security and data validation are essential. The wp_nonce_field() ensures safe form submission. The sanitize_text_field() function cleans the input before saving it to the database.
Displaying Products in the WordPress Admin
The custom post type automatically shows up in the dashboard menu. To enhance the admin list view with columns for Price and SKU, add this to product-meta-box.php:
function pm_add_custom_columns($columns) {
$columns['price'] = 'Price';
$columns['sku'] = 'SKU';
return $columns;
}
add_filter('manage_product_posts_columns', 'pm_add_custom_columns');
function pm_render_custom_columns($column, $post_id) {
if ($column == 'price') {
echo esc_html(get_post_meta($post_id, '_pm_price', true));
} elseif ($column == 'sku') {
echo esc_html(get_post_meta($post_id, '_pm_sku', true));
}
}
add_action('manage_product_posts_custom_column', 'pm_render_custom_columns', 10, 2);
Now you'll see Price and SKU next to product titles in the admin product list.
Shortcode to Display Products on the Frontend
Create product-shortcode.php and register a shortcode:
<?php
function pm_display_products() {
$args = ['post_type' => 'product', 'posts_per_page' => 10];
$query = new WP_Query($args);
ob_start();
if ($query->have_posts()) {
echo '<div class="pm-product-list">';
while ($query->have_posts()) {
$query->the_post();
$price = get_post_meta(get_the_ID(), '_pm_price', true);
$sku = get_post_meta(get_the_ID(), '_pm_sku', true);
?>
<div class="pm-product">
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<p><strong>Price:</strong> <?php echo esc_html($price); ?></p>
<p><strong>SKU:</strong> <?php echo esc_html($sku); ?></p>
</div>
<hr>
<?php
}
echo '</div>';
wp_reset_postdata();
} else {
echo '<p>No products found.</p>';
}
return ob_get_clean();
}
add_shortcode('show_products', 'pm_display_products');
Place [show_products] inside any page or post to render the list.
Activating and Testing the Plugin
- Go to Plugins → Installed Plugins in your WordPress dashboard.
- Activate Product Manager.
- Navigate to the new Products menu.
- Add a product with name, price, and SKU.
- Add the
[show_products]shortcode to a page to view products on the frontend.
Conclusion
You've built a fully functional WordPress plugin for managing products with custom fields and a frontend display. This setup is ideal for small catalogs or internal tools without needing a full eCommerce system. By understanding how to register post types, manage meta fields, and create shortcodes, you've gained essential skills for plugin development in WordPress. You can now extend this plugin with filters, search, images, or even WooCommerce integration if needed.