How to Customize JetPack Subscription Widget


JetPack is not a simple plugins but it is a group of plugin used to empower our WordPress based website. Among all these plugins its subscriber plugin is the most used plugin.

Jetpack Subscriber plugin is used to send email notification through WordPress to its subscriber. But the default look and feel of this plugin widget is not, we love to see on our WordPress bases websites.

Customize Jetpack Subscription Widget steps

Jetpack Subscriber plugin is rendered through /jetpack/module/subscriber.php file located inside /plugin/jetpack folder. The default layout of this plugin widget is as follows

The CSS used to render this widget is located inside /jetpack/module/subsrciber/subscriber.css file which contains one class- and one id- subscribe-text,subscribe-email, both of these IDs are used with a paragraph tag, that is responsible to render subscription text and email ID.

Remove Extra Paragraph Tags

Just Open Subscription.php file in your favorite text editor, in my case its notepad++ and locate line no.629 and remove first closing paragraph tag. Now your code should look like this.

before removing closing paragraph tag


?><p id="subscribe-text"><?php echo $subscribe_text ?></p><?php

After removing paragraph tag

 ?><p id="subscribe-text"><?php echo $subscribe_text ?><?php

now Move on line no 637 this line look like this


<p id="subscribe-email"><input type="text" name="email" value="<?php echo !empty( $current_user->user_email ) ? esc_attr( $current_user->user_email ) : esc_html__( 'Email Address', 'jetpack' ); ?>" id="<?php echo esc_attr($subscribe_field_id) ?>" onclick="if ( this.value == '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>'; }" /></p>

Add Span Tags

Change this paragraph tag into span tag, after changing this tag, it should look like this

<span id="subscribe-email"><input type="text" name="email" value="<?php echo !empty( $current_user->user_email ) ? esc_attr( $current_user->user_email ) : esc_html__( 'Email Address', 'jetpack' ); ?>" id="<?php echo esc_attr($subscribe_field_id) ?>" onclick="if ( this.value == '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>'; }" /></span>

now locate line no-639 a new paragraph tag is also there, the coding will be looks like this


<p id="subscribe-submit">
 <input type="hidden" name="action" value="subscribe" />
 <input type="hidden" name="source" value="<?php echo esc_url( $referer ); ?>" />
 <input type="hidden" name="sub-type" value="<?php echo esc_attr( $source ); ?>" />
 <input type="hidden" name="redirect_fragment" value="<?php echo $widget_id; ?>" />
 <?php
 if ( is_user_logged_in() ) {
 wp_nonce_field( 'blogsub_subscribe_'. get_current_blog_id(), '_wpnonce', false );
 }
 ?>
 <input type="submit" value="<?php echo esc_attr( $subscribe_button ); ?>" name="jetpack_subscriptions_widget" />
 </p>

Now change the above coding like this to suite your style

<span id="subscribe-submit">
 <input type="hidden" name="action" value="subscribe" />
 <input type="hidden" name="source" value="<?php echo esc_url( $referer ); ?>" />
 <input type="hidden" name="sub-type" value="<?php echo esc_attr( $source ); ?>" />
 <input type="hidden" name="redirect_fragment" value="<?php echo $widget_id; ?>" />
 <?php
 if ( is_user_logged_in() ) {
 wp_nonce_field( 'blogsub_subscribe_'. get_current_blog_id(), '_wpnonce', false );
 }
 ?>
 <input type="submit" value="<?php echo esc_attr( $subscribe_button ); ?>" name="jetpack_subscriptions_widget" />
<span> // this closing span tag is add here
</p> // this will help you to close your paragraph tag which was open on line no. 629

Modify Jetpack Subscription Widget CSS

Now its time to hack its CSS. Open /jetpack/module/subsciber/subsciber.css file and do the required changes as listed below

Original Subscription.css


#subscribe-email input {
 width: 95%;
 padding: 1px 2px;
}
.comment-subscription-form .subscribe-label {
 display: inline !important;
}

1

Now change this as

1
#subscribe-email input {
 width: 62%;
 padding: 1px 2px;
}
.comment-subscription-form .subscribe-label {
 display: inline !important;
}

Now your widget will look like this

Customize Jetpack Subscription Widget

Customized Jetpack Subscription Widget

but your all hard work will be spoiled once,you update jetpack, so its time to forbid your WordPress to update jetpack subscription widget

open your functions.php file and add this code, This code is taken from how to disable plugin update


function exclude_plugins_from_auto_update ( $update, $item ) {
 $plugins = array ( // Plugins to exclude from auto-update
 'jectpack/module/subscription.php'
 );
 if ( in_array( $item, $plugins ) )
 return false; // Don't auto-update specified plugins
 else return true; // Auto-update all other plugins
}
add_filter( 'auto_update_plugin', 'exclude_plugins_from_auto_update', 10, 2 );

Now its time to enjoy your customized jetpack subscription widget. Do let me know, if you have any extra query regarding this customization.

15 Brilliant Comments - Join Discussion Now!

  1. Naveen says:

    Very important info. It is really helpful that jetpack provides subscription feature to new bloggers. Allowing each one to gain subscribers. Thanks Rakesh.

  2. Bright Joe says:

    Hi there,

    This CSS codes really helped, thanks a lot! :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>