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.
There are many places to buy or download plugins if you want to add specific features to your website. Thousands of free plugins are available in the WordPress plugin directory to assist you in building the site you want. However, if you want more advanced features and a better user interface, you’ll have to pay more.
What We are Going to Do to Create a Custom Coupon Plugin
- 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
- Add 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
Add below code in 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 the left Sidebar as ‘Coupon’.
You can Show Coupon Offer Code and Deal Looks Like that,
To learn more about custom plugins, explore our latest blog on how to ‘Create Custom Dashboard Widget for Active Users.’ Learn how to engage and empower your users like never before!
Also, if you are in search of a top IT consulting company that focuses on salesforce consulting, mobile app development services, and web application development services. Feel free to Contact Us.
0 Comments