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
[code]
?><p id="subscribe-text"><?php echo $subscribe_text ?></p><?php
[/code]
After removing paragraph tag
[code]
?><p id="subscribe-text"><?php echo $subscribe_text ?><?php
[/code]
now Move on line no 637 this line look like this
[code]
<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>
[/code]
Add Span Tags
Change this paragraph tag into span tag, after changing this tag, it should look like this
[code]
<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>
[/code]
now locate line no-639 a new paragraph tag is also there, the coding will be looks like this
[code]
<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>
[/code]
Now change the above coding like this to suite your style
[code]
<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
[/code]
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
[code]
#subscribe-email input {
width: 95%;
padding: 1px 2px;
}
.comment-subscription-form .subscribe-label {
display: inline !important;
}
[code]
Now change this as
[code]
#subscribe-email input {
width: 62%;
padding: 1px 2px;
}
.comment-subscription-form .subscribe-label {
display: inline !important;
}
[/code]
Now your widget will look like this

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
[code]
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 );
[/code]
Now its time to enjoy your customized jetpack subscription widget. Do let me know, if you have any extra query regarding this customization.
- PaperBoat WallPaper Theme Image Bloggers - April 27, 2022
- How to Increase Repeat Sales Using Email Marketing? - September 24, 2021
- How AI Will Impact Digital Marketing After COVID-19? - April 29, 2021
Hi,
I have my own form and I would like to add to it the functionallity of jetpack subscription, is it possible?
Dear Rakesh,
Great tutorial. This customization is helpful for all wordpress bloggers. Thank you for this Rakesh
Regards
Satish Kumar Ithamsetty
Dear Satish, Happy to know that you liked this tutorial on jetpack subscription widget customization. I do invite all my readers to ask their personalized query regarding WordPress, so that they can enhance the working of their WordPress based website. Keep in touch ;)
Jetpack has the Custom CSS module for a reason. Although you can disable updates for certain directories, it’s not the best practice. Any customization should be placed in separate file (functions.php, style.css etc)
agreed, These customizations must be there in functions.php file. but it was tedious and cumbersome job to hack subscription widget thus used this method. If you have any better idea to do this, kindly let me know. I would be more than happy to implement that. Keep in touch rudd