Introduction
In this article, we’re going to be discussing how you can go about building a pricing table comparison plugin for WordPress. This is a great way to add an extra layer of functionality to your website, and it can be a useful tool for your visitors.
There are a few different ways that you can go about this, but we’re going to be focusing on one particular method. We’re going to be using the WordPress Plugin Boilerplate to create our plugin. This is a great starting point for anyone looking to create a WordPress plugin, and it will give you a solid foundation to work from.
Once you have the boilerplate in place, you’ll need to start by creating a new file. This file will be responsible for displaying the pricing table on your website. You can name it whatever you like, but we recommend something like “pricing-table.php”.
In this file, you’ll need to add the following code:
<?php
/*
Plugin Name: Pricing Table Comparison
Plugin URI: https://example.com/
Description: A plugin to compare pricing tables
Version: 1.0
Author: John Doe
Author URI: https://example.com/
License: GPLv2 or later
Text Domain: pricing-table-comparison
*/
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// Load plugin class files
require_once( 'includes/class-pricing-table-comparison.php' );
require_once( 'includes/class-pricing-table-comparison-settings.php' );
// Load plugin libraries
require_once( 'includes/lib/class-pricing-table-comparison-admin-api.php' );
require_once( 'includes/lib/class-pricing-table-comparison-post-type.php' );
require_once( 'includes/lib/class-pricing-table-comparison-taxonomy.php' );
/**
* Returns the main instance of Pricing_Table_Comparison to prevent the need to use globals.
*
* @since 1.0.0
* @return object Pricing_Table_Comparison
*/
function Pricing_Table_Comparison () {
$instance = Pricing_Table_Comparison::instance( __FILE__, '1.0.0' );
if ( is_null( $instance->settings ) ) {
$instance->settings = Pricing_Table_Comparison_Settings::instance( $instance );
}
return $instance;
}
Pricing_Table_Comparison();
This code is the basic structure of our plugin. We’ve defined a few different things here, such as the plugin name, description, and version. We’ve also included a few different files that we’ll be using later on.
The next thing we need to do is define some basic functions that our plugin will use. These functions will be responsible for setting up the plugin, and they’ll also be used to display the pricing table on your website.
In your “pricing-table.php” file, add the following code:
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
/**
* Register the [pricing_table] shortcode
*
* @since 1.0.0
*/
function pricing_table_register_shortcode() {
add_shortcode( 'pricing_table', 'pricing_table_shortcode' );
}
add_action( 'init', 'pricing_table_register_shortcode' );
/**
* The [pricing_table] shortcode
*
* @since 1.0.0
*
* @param array $atts
* @param string $content
*
* @return string
*/
function pricing_table_shortcode( $atts, $content = null ) {
// Extract shortcode attributes
extract( shortcode_atts(
array(
'id' => '',
),
$atts
) );
// Return early if no ID is defined
if ( empty( $id ) ) {
return '';
}
// Get the pricing table post
$post = get_post( $id );
// Return early if post is not found
if ( !$post ) {
return '';
}
// Get the post title
$title = get_the_title( $post );
// Get the post content
$content = get_the_content( $post );
// Get the post thumbnail
$thumbnail = get_the_post_thumbnail( $post, 'full' );
// Initialize the output
$output = '';
// Start the pricing table HTML
$output .= '<div class="pricing-table">';
// Add the pricing table title
$output .= '<h2 class="pricing-table-title">' . $title . '</h2>';
// Add the pricing table thumbnail
$output .= '<div class="pricing-table-thumbnail">' . $thumbnail . '</div>';
// Add the pricing table content
$output .= '<div class="pricing-table-content">' . $content . '</div>';
// End the pricing table HTML
$output .= '</div>';
// Return the output
return $output;
}
This code defines a few different things. First, we’ve registered a new shortcode. This shortcode will be used to display the pricing table on your website.
Next, we’ve defined a function that will be responsible for displaying the pricing table. This function will take two parameters: the ID of the post, and the content.
The ID parameter is used to specify which post you want to display. The content parameter is used to specify the content that you want to display inside the pricing table.
In the function, we first check to see if an ID has been specified. If no ID is specified, we simply return an empty string.
Next, we retrieve the post from the WordPress database. We then get the title, content, and thumbnail of the post.
Finally, we build the HTML for the pricing table, and we return it.
Now that we have our plugin set up, we need to add some CSS to style it. Create a new file in your “css” directory, and name it “pricing-table.css”.
In this file, add the following CSS:
.pricing-table {
border: 1px solid #ddd;
float: left;
margin: 0 20px 20px 0;
width: 300px;
}
.pricing-table h2.pricing-table-title {
background: #f5f5f5;
border-bottom: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.pricing-table .pricing-table-thumbnail {
padding: 10px;
}
.pricing-table .pricing-table-content {
border-top: 1px solid #ddd;
padding: 10px;
}
This CSS will style the pricing table so that it looks nice on your website.
Now that we have our plugin and CSS set up, we need to add the [pricing_table] shortcode to our WordPress post or page.
In the post editor, simply add the following shortcode:
[pricing_table id="123"]
Be sure to replace “123” with the ID of the post that you want to display.
You can now save and publish your post or page, and the pricing table should be displayed on your website.
Pricing tables are a great way to compare different products or services side-by-side. They can be used to compare features, prices, or anything else that you want your visitors to be able to compare easily.
Building a pricing table comparison plugin is a great way to add this functionality to your WordPress site without having to code it yourself or hire a developer. In this article, we’ll show you how to build a pricing table comparison plugin using the WP Pricing Table Builder plugin.
Once you have the plugin installed and activated, you’ll need to create a new pricing table. To do this, go to WP Pricing Tables -> Add New in the WordPress admin.
On the next screen, you’ll need to enter a title for your pricing table and then select the number of columns you want to include.
After that, you’ll need to add your pricing table content. For each column, you’ll need to enter a title, price, and description. You can also add features to each column by clicking on the “Add Feature” button.
Once you’re finished adding content to your pricing table, click on the “Publish” button to publish it.
Now that your pricing table is published, you can add it to any post or page on your WordPress site by using the shortcode [wprt_pricing_table id=”123″]. Remember to replace “123” with the actual ID of your pricing table.
You can also display your pricing table in a sidebar widget by going to Appearance -> Widgets in the WordPress admin. From there, drag and drop the WP Pricing Table Builder widget into your sidebar and select the pricing table you want to display.
That’s all there is to creating a pricing table comparison plugin for WordPress. With this plugin, you can easily add pricing tables to any post or page on your site and give your visitors an easy way to compare different products or services.
Leave a Reply