Andy Tran

Create Own Coupon Custom Plugin

by | Sep 9, 2021 | Wordpress

WordPress has a vast collection of plugins available that introduce custom functionality. Plugins can add new features to your WordPress website without having to change the core code.

What we are going to do:

  • We will create a custom ‘Coupon’ plugin
    • Go to the Website Folder -> wp-content -> plugins -> create Folder (coupon)
    • In that Folder,
      • Create coupon.php file for All Plugin Code.
      • Create readme.txt file for basic Information.
        • Plugin Metadata
        • Description
        • Installation Steps
        • FAQ section
        • Screenshots
        • Change log
      • Create custom-coupon.css file to add Additional CSS.
      • In theme Folder, Add archive-coupon.php File
  • Plugin will have below functionality.
    • Create Custom Post Type Coupon
    • Create Sub Menu in Custom Post Type (Coupon Configuration, Deal Configuration, Social Options)
    • Create Custom Meta Box in Coupon Post Type
      • Deal/Offer type of coupon can be created.
      • Expiration system to show coupon expiry.
      • You can mention the start date of the coupon on it.
      • The coupons redirect the customer to the applicable store.
    • Create Custom Theme Options Customizer Settings

Write below code coupon.php File


<?php
/*
Plugin Name: Coupon Demo
Description: Plugin for Coupons
Version: 1.0.0
Author: PALAK
*/
/*add custom css enqueue */
function add_coupon_style() {
    $plugin_url = plugin_dir_url( __FILE__ );
    wp_enqueue_style( 'style',  $plugin_url . "/custom-coupon.css");
}
add_action( 'wp_enqueue_scripts', 'add_coupon_style' );

//Add Functions for Create Custom Post Type - Without Plugin

//Add Functions for Add Sub Menu in Custom Post Type

//Add Functions for Add Meta Box in Custom Post Type

//Add Functions for Add Custom Theme Customize Options

//Add Functions for Add Custom Social Media Sharing without plugin

?>

Write below code custom-coupon.css File


.popup-table{
  margin : 1rem 0;
}
.popup-title{
    margin: auto;
    text-align: center;
    color: gray;
    font-size: medium;
    padding: 10px;
}

p {
    line-height: 1.5;
    margin: 0 0 0px 0;
}

hr {
    border-style: solid;
    border-width: 0.1rem 0 0 0;
    border-color: #dcd7ca;
    margin: 0rem 0; 
   width:100%;
}

.modal-container {
  margin: 0 auto;
  padding-top: 60px;
  position: relative;
  width: 160px;
}

.modal-container button {
  display: block;
  margin: 0 auto;
  color: #fff;
  width: 160px;
  height: 60px;
  background: #446CB3;
  font-size: 14px;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 5px 5px -5px #333;
  transition: background 0.3s ease-in;
}

.modal-container .modal-backdrop {
  height: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in;
}

.modal-container #modal-toggle {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.modal-container #modal-toggle:hover ~ button { background: #1E824C; }

.modal-container #modal-toggle:checked {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  opacity: 0;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 1;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content {
  background-color: #fff;
  max-width: 400px;
  width: 100%;
  height: auto;
  padding: 10px 30px;
  position: absolute;
  left: calc(50% - 200px);
  top: 20%;
  border-radius: 4px;
  z-index: 999;
  pointer-events: auto;
  cursor: auto;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
}
@media (max-width: 400px) {

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content { left: 0; }
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close {
  color: #666;
  position: absolute;
  right: 15px;
  top: 0;
  padding-top: 7px;
  background: #fff;
  font-size: 30px;
  width: 25px;
  height: 28px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button {
  top: initial;
  bottom: 20px;
  right: 20px;
  background: #4CAF50;
  color: #fff;
  width: 150px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: normal;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button:hover {
  color: #fff;
  background: #1E824C;
}

.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close:hover { color: #333; }

.fields{
  width:50%;
}

.single-coupon header, .single-coupon #wpadminbar{
  display:none;
}

.fancybox-content{
  width : 50% !important;
  height : 80% !important;
}

.verified{
  color: #3b99fc;
    letter-spacing: 0;
    margin-right: 10px;
    display: inline-block;
    font-size: 14px;
  font-weight: 500;
}

.coupon-info{
  font-size: 20px;
  color: #2b2b2b;
  letter-spacing: 0;
  font-weight: 700;
}

input.coupon-button {
    background-color: #23890c;
    color: #fff;
    font-size: 12px;
    display: block;
    border-radius: 2px;
    position: relative;
    padding: 7px;
    line-height: 1.8;
    margin: 10px 0;
    height: 35px;
}


td {
    border: none;
}
.wkcl-coupon-name  {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 700;
}
span.wkcl-meta-desc.wkcl-date.wkcl-upper {
    color: #767676;
    letter-spacing: 0;
    margin-right: 10px;
    display: inline-block;
    font-size:12px ;
}

img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    padding-top: 15px;
}

.wkcl-heading{
  background-color: #0099ed;
    color: #ffffff;
    width: 200%;
    padding: 20px;
    padding: 5px 5px 5px 5px;
    margin-left: 20px;
}

Write below code archive-coupon.php File

Here, You Display the Custom Post Type, Meta Box info, and Custom Theme Settings Wise Display coupon info.


<?php 
    if(get_option( 'Offer_settings' )['Offer_select_field_0']=='1'){  
     ?><h4 style="text-align: center;"><?php echo "Special OFFER Coupon Codes"; ?> </h4>
            <?php
               $args = array(
                   'post_type' => 'coupon',
                   'post_status' => 'publish',
                   'coupon_category' => 'offer-code'
              );
    $arr_posts = new WP_Query( $args );
  
    if ( $arr_posts->have_posts() ) :
  
        while ( $arr_posts->have_posts() ) :
            $arr_posts->the_post();
            ?>
        <table style="width:70%;margin-left:auto;margin-right: auto;">
            <tr>
                <td style="width:20%;">
                <div>
                                <span class="wkcl-heading" 
                                      style="background-color:<?php echo get_theme_mod('custom_theme_bgcolor_setting')?>;   color:<?php echo get_theme_mod('custom_theme_tcolor_setting')?>">  <?php echo get_post_meta( $post->ID, 'lbltitle', true); ?></span>
                                    <div>
                                       <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                                    </div>
                              </div>
                 </td>
                <td style="width:60%; padding: 40px;">
                <p class="wkcl-coupon-name" style="font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting')?>"><?php the_title(); ?></p>
                                    <span class="wkcl-meta-desc wkcl-date wkcl-upper">
                                        <p>
                                        <?php 
                                            if(get_option( 'Offer_settings' )['Offer_select_field_2']=='1'){
                                           {
                                                ?><i class="fa fa-calendar" style="font-size:16px"></i> 
                                                <?php echo "Start Date : ";?><?php echo get_post_meta( $post->ID, 'startDate', true); ?>
                                            <?php }?>
                                        </p>                                   
                                    </span>
                                    <span class="wkcl-meta-desc wkcl-date wkcl-upper ">
                                        <p> 
                                        <?php 
                                            if(get_option( 'Offer_settings' )['Offer_select_field_3']=='1'){
                                                ?><i class="fa fa-clock-o" style="font-size:16px"></i> <?php echo "Valid Till : ";?><?php echo get_post_meta( $post->ID, 'endDate', true); ?>
                                            <?php }?>
                                        </p>                                                            
                                    </span>
                                    <br>
                                    <span class="verified">
                                        <p>
                                        <?php
                                            if(get_option( 'Offer_settings' )['Offer_select_field_1']=='1'){

                                                ?><i class="fa fa-check-circle" style="font-size:16px"></i> <?php echo "Verified"; ?> 
                                            <?php }?>
                                        </p>                                                            
                                    </span>
                </p>
                </td>
                <td style="width:20%">
                <?php 
                        if(get_option( 'Offer_settings' )['Offer_select_field_4']=='1'){
                
                     ?>
                            <?php //echo do_shortcode('[DISPLAY_ULTIMATE_SOCIAL_ICONS]'); ?>
                            
                <?php }?>
                       <?php 
                        $var = get_post_meta( $post->ID, 'coupontype', true); 
                        if($var=='1'){
                         
                            ?>
                                <div class="modal-container">
                             <input id="modal-toggle" type="checkbox">
                             <button class="coupon-button">SHOW COUPON CODE</button>
                                 <div class="modal-backdrop">
                                      <div class="modal-content">
                                        <p class="popup-title"> Code Copied!! </h6>
                                        <p class="wkcl-coupon-name" 
                                        style="font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting');?>; color:#000000;  text-align: center;"
                                        ><?php the_title(); ?></p>
                                        <hr/>
                                        <table class="popup-table">
                                            <tr>
                                                <td style=" text-align: center;">
                                                    <?php the_post_thumbnail('thumbnail' ); ?>
                                                </td>

                                                <td style="margin-left: auto;margin-right: auto;">
                                                <i class="fa fa fa-ticket" 
                                                style="font-size:30px; text-align: center; color:<?php echo get_theme_mod('custom_theme_tcolor_setting')?>; padding:10% 10% 10% 40%"></i> 
                                                <p class="wkcl-coupon-name" 
                                                   style="padding: 10px; background-color:<?php echo get_theme_mod('custom_theme_bgcolor_setting')?>;   color:<?php echo get_theme_mod('custom_theme_tcolor_setting')?>; font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting');?>">  <?php echo get_post_meta( $post->ID, 'coupon_code', true); ?></p>
                                                </td>
                                            </tr>
                                            <tr>
                                            <td style=" text-align: center;"  colspan="2">
                                            <i class="fa fa-shopping-cart" 
                                                style="font-size:30px; text-align: center;"></i> <a style="text-decoration : none; font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting');?>" href="<?php echo get_post_meta( $post->ID, 'siteURL', true); ?>">Go Shop Online at <?php echo get_post_meta( $post->ID, 'siteName', true); ?>
                                                </a>
                                            </td>
                                            </tr>
                                        </table>
                                        
                                      </div>
                                </div>
                            </div>      
                            <?php
                        }?>
                </td>
            </tr>
            <tr>
                <td style="width:100%;"  colspan="3">
                <div>
                <span class="coupon-info">  <?php the_content(); ?></span>
                    </div>                             
                </td>                
            </tr>
        </table>
        
            <?php
        endwhile;
       
    endif;
    ?>
        <?php
    }
?>
<?php 

    if(get_option( 'Deal_settings' )['Deal_select_field_0']=='1'){
  
        ?>
            <!--<h4><?php //echo get_theme_mod("custom_theme_label_setting"); ?> </h4>-->
            <h4 style="text-align: center;"><?php echo "Special DEALS"; ?> </h4>
            <?php
    $args = array(
        'post_type' => 'coupon',
        'post_status' => 'publish',
        'coupon_category' => 'deal'
     );
    $arr_posts = new WP_Query( $args );
  
    if ( $arr_posts->have_posts() ) :
  
        while ( $arr_posts->have_posts() ) :
            $arr_posts->the_post();
            ?>
              <table style="width:70%;margin-left: auto;margin-right: auto;">
            <tr>
                <td style="width:20%;">
                <div>
                <span class="wkcl-heading" style="background-color:<?php echo get_theme_mod('custom_theme_bgcolor_setting')?>; color:<?php echo get_theme_mod('custom_theme_tcolor_setting')?>">  <?php echo get_post_meta( $post->ID, 'lbltitle', true); ?></span>
                                    <div>
                                       <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                                    </div>
                            </div>
                </td>
                <td style="width:60%; padding: 40px;">
                <p class="wkcl-coupon-name" style="font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting')?>"><?php the_title(); ?></p>
                
                                    <span class="wkcl-meta-desc wkcl-date wkcl-upper"> 
                                        <p> 
                                        <?php 
                                            if(get_option( 'Deal_settings' )['Deal_select_field_2']=='1'){
                                                ?><i class="fa fa-calendar" style="font-size:16px"></i> 
                                                <?php echo "Start Date : ";?><?php echo get_post_meta( $post->ID, 'startDate', true); ?>
                                            <?php }?>
                                        </p>                                      
                                    </span>
                                    <span class="wkcl-meta-desc wkcl-date wkcl-upper ">
                                        <p> 
                                        <?php 
                                            if(get_option( 'Deal_settings' )['Deal_select_field_3']=='1'){
                                                ?><i class="fa fa-clock-o" style="font-size:16px"></i> <?php echo "Valid Till : ";?><?php echo get_post_meta( $post->ID, 'endDate', true); ?>
                                            <?php }?>
                                        </p>                                                            
                                    </span>
                                    <br>
                                    <span class="verified">
                                        <p> 
                                        <?php 
                                            if(get_option( 'Deal_settings' )['Deal_select_field_1']=='1'){
                                                ?><i class="fa fa-check-circle" style="font-size:16px"></i> <?php echo "Verified"; ?> 
                                            <?php }?>
                                        </p>                                                            
                                    </span>
                </p>
                </td>
                <td style="width:20%">
                <?php 
                        if(get_option( 'Deal_settings' )['Deal_select_field_4']=='1'){
?>
                 
                <?php }?>
                <?php $var = get_post_meta( $post->ID, 'coupontype', true); 
               
                        if($var=='2'){
                           ?>       
                                    <div class="modal-container">
                             <input id="modal-toggle" type="checkbox">
                             <button class="coupon-button">Get Deal</button>
                                 <div class="modal-backdrop">
                                      <div class="modal-content">
                                        <p class="popup-title"> Your offer has been activated !!</h6>
                                        <p class="wkcl-coupon-name" 
                                        style="font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting');?>; color:#000000;  text-align: center;"
                                        ><?php the_title(); ?></p>
                                        <hr/>
                                        <table class="popup-table">
                                            <tr>
                                                <td style=" text-align: center;">
                                                    <?php the_post_thumbnail('thumbnail' ); ?>
                                                </td>
                                                <td style="margin-left: auto;margin-right: auto;">
                                                <i class="fa fa-shopping-bag" 
                                                style="font-size:30px; text-align: center; color:<?php echo get_theme_mod('custom_theme_tcolor_setting')?>; padding:10% 10% 10% 10%"></i> 
                                                <a style="text-decoration :none; font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting');?>" href="<?php echo get_post_meta( $post->ID, 'siteURL', true); ?>"> <input type="button" value="GET DEAL"  /> 
                                                </a>
                                            </tr>
                                            <tr>
                                            <td style=" text-align: center;"  colspan="2">
                                            <i class="fa fa-shopping-cart" 
                                                style="font-size:30px; text-align: center;"></i> <a style="text-decoration : none; font-family:<?php echo get_theme_mod('custom_theme_fontfamily_setting');?>" href="<?php echo get_post_meta( $post->ID, 'siteURL', true); ?>">Go Shop Online at <?php echo get_post_meta( $post->ID, 'siteName', true); ?>
                                                </a>
                                            </td>
                                            </tr>
                                        </table>
                                        
                                      </div>
                                </div>
                            </div>      
                       <?php }
                       ?>
                </td>
            </tr>
            <tr>
                <td style="width:100%;"  colspan="3">
                    <div>
                    <span class="coupon-info">  <?php the_content(); ?></span>
                    </div>                            
                </td>                
            </tr>
        </table>
            <?php
        endwhile;
       
    endif;

    ?>
        <?php
    }    
?>
<?php get_footer(); ?>

Now, Go to Dashboard -> Plugins -> Installed Plugin -> Activate Coupon Plugin.
Now our plugin is successfully activated and you can see our plugin on left Side bar as ‘Coupon’.
Create Own Coupon Custom Plugin

You can Show Coupon Offer Code and Deal Looks Like that,
Create Own Coupon Custom Plugin