How to Build a Related Products Plugin for WordPress

Posted on 19th June 2023

Introduction

As a WordPress developer, you may be asked to create a related products plugin at some point. This guide will show you how to build a related products plugin for WordPress, using the following steps:

  1. Creating the Plugin Folder and Files
  2. Adding the Plugin Header
  3. Registering the Plugin Settings
  4. Adding the Settings Page
  5. Saving the Plugin Settings
  6. Displaying the Related Products

Creating the Plugin Folder and Files

The first step is to create the plugin folder and files. Create a new folder called “related-products” in the “wp-content/plugins” folder. Then, create two new files inside this folder:

  • related-products.php
  • related-products-admin.php

The “related-products.php” file will contain the code for displaying the related products on the front-end of the website. The “related-products-admin.php” file will contain the code for the plugin settings page, which will be accessible from the WordPress admin area.

Adding the Plugin Header

The next step is to add the plugin header to the “related-products.php” file. This header will contain information about the plugin, such as the plugin name, author, version, etc. Here is an example header:


<?php
/*
Plugin Name: Related Products
Plugin URI: https://example.com/related-products
Description: This plugin displays related products on your WordPress website.
Version: 1.0
Author: John Doe
Author URI: https://example.com
License: GPLv2 or later
Text Domain: related-products
Domain Path: /languages
*/

Registering the Plugin Settings

The next step is to register the plugin settings. This is done by adding the following code to the “related-products-admin.php” file:


// Register the plugin settings
function related_products_register_settings() {
register_setting( 'related_products_options', 'related_products_options', 'related_products_options_validate' );
}
add_action( 'admin_init', 'related_products_register_settings' );

This code registers the plugin settings with the WordPress settings API. It also includes a “validation” function, which will be used to validate the submitted settings data.

Adding the Settings Page

The next step is to add the settings page for the plugin. This is done by adding the following code to the “related-products-admin.php” file:


// Add the plugin settings page
function related_products_add_settings_page() {
add_options_page( 'Related Products Settings', 'Related Products', 'manage_options', 'related-products', 'related_products_render_settings_page' );
}
add_action( 'admin_menu', 'related_products_add_settings_page' );

This code adds a new settings page to the WordPress admin area, with the title “Related Products Settings”. The “related_products_render_settings_page” function is used to render the contents of the settings page.

Saving the Plugin Settings

The next step is to add the code for saving the plugin settings. This is done by adding the following code to the “related-products-admin.php” file:


// Render the plugin settings page
function related_products_render_settings_page() {
?>
<div class="wrap">
<h2><?php _e( 'Related Products Settings', 'related-products' ); ?></h2>
<form action="options.php" method="post">
<?php settings_fields( 'related_products_options' ); ?>
<?php $options = get_option( 'related_products_options' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row"><?php _e( 'Number of products to display', 'related-products' ); ?></th>
<td>
<input id="related_products_options[number]" name="related_products_options[number]" type="text" value="<?php echo esc_attr( $options['number'] ); ?>" />
<label for="related_products_options[number]"><?php _e( 'products', 'related-products' ); ?></label>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e( 'Save Changes', 'related-products' ); ?>" />
</p>
</form>
</div>
<?php
}

This code renders the settings page, with a form for saving the plugin settings. The form contains a field for the “number” setting, which allows the user to specify the number of products to display.

Displaying the Related Products

The final step is to add the code for displaying the related products. This is done by adding the following code to the “related-products.php” file:


// Display the related products
function related_products_display() {
$options = get_option( 'related_products_options' );
$number = $options['number'];

echo '<div class="related-products">';
echo '<h3>' . __( 'Related Products', 'related-products' ) . '</h3>';
echo '<ul>';

for ( $i = 1; $i <= $number; $i++ ) {
echo '<li><a href="#">' . __( 'Product', 'related-products' ) . ' ' . $i . '</a></li>';
}

echo '</ul>';
echo '</div>';
}

This code displays the related products on the front-end of the website. The “number” setting is used to determine how many products to display.

Create a Plugin

If you want to add related products to your WordPress site, you can do so by creating a plugin. This will allow you to add the functionality to your site without having to edit any of your theme files.

To create a plugin, you will first need to create a new folder in your WordPress installation directory. This folder will be where you will store all of your plugin files.

Next, you will need to create a file named plugin.php in your new folder. This file will contain the code for your plugin.

At the top of your plugin.php file, you will need to add the following:

This code will provide basic information about your plugin. Be sure to change the values to match your plugin.

Next, you will need to write the code for your plugin. In this example, we will assume that you are using the WooCommerce plugin and that you want to display related products on your product pages.

To do this, you will need to use the following code:

term_id;

// Get the product category slug
$cat_slug = $first_cat->slug;

// Get the product category name
$cat_name = $first_cat->name;

// Get the product category description
$cat_desc = $first_cat->description;

// Get the product category link
$cat_link = get_term_link( $cat_slug, ‘product_cat’ );

// Get the products
$args = array(
‘post_type’ => ‘product’,
‘posts_per_page’ => 3,
‘product_cat’ => $cat_slug,
‘orderby’ => ‘rand’
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) {
echo ‘

‘ . __( ‘Related Products’, ‘related-products’ ) . ‘

‘;
echo ‘

    ‘;
    while ( $loop->have_posts() ) : $loop->the_post();
    global $product; ?>

  • <a href="” title=””>
    <?php
    if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'shop_catalog' );
    } else {
    echo '' . __( 'Placeholder', 'related-products' ) . '‘;
    }
    ?>


    get_price_html(); ?>

    • <?php endwhile;
    echo '

‘;
} else {
echo __( ‘No related products found’, ‘related-products’ );
}
wp_reset_postdata();
}

// Add the code to the WooCommerce loop
add_action( ‘woocommerce_after_shop_loop_item’, ‘related_products’, 9 );
?>

This code will display three related products on your WooCommerce product pages. The products will be selected randomly from the same product category as the current product.

If you want to display related products from a different plugin or post type, you will need to change the post_type and taxonomy values in the code. You can also change the number of products that are displayed by changing the posts_per_page value.

You can now activate your plugin and test it on your site.

Copyright © 2024 The Gadget Gazette