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.




12 Brilliant Comments - Join Discussion Now!

  1. Rudd says:

    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)

    • rakesh says:

      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

  2. Dear Rakesh,

    Great tutorial. This customization is helpful for all wordpress bloggers. Thank you for this Rakesh

    Regards

    Satish Kumar Ithamsetty

    • rakesh says:

      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 ;)

  3. Kristine says:

    Hi, do you have tutorial on how to remove / hide this text “Join x other subscribers” in Jetpack?

    Thanks

    • rakesh says:

      Hi Krishtine, If I am not mistaken then you are using the OLD version of the Jetpack and In that there is a checkbox to disable this “Join X other Subscribers”

  4. Kristine says:

    Hi, thanks for reply. But my comment doesn’t appear in your page, so I will reply again here…

    Even otherwise, I’m using the latest Jetpack and this is causing the problem now.
    I have no problem with using old Jetpack, it’s start appearing after I updated my Jetpack.

    Thanks

  5. Bright Joe says:

    Hi Rakesh,
    It’s my first time visiting Binary Note and I found this tutorial really helpful. Thanks for this detailed tutorial!

  6. Dave Muehsam says:

    Is there any way to replace the WordPress “W” logo in the upper-right of the Jetpack email subscription reply? I’ve seen people replace it with their photos, but I can’t find instructions anywhere.

  7. thats good friend, i like thats information. Allow me be share my design web in resepterupdate.com and galerimodif.com

  8. wiwin says:

    subscribe is very important, in this can make us to telling about anything, thanks binarynote.com

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>