×

How to Customize JetPack Subscription Widget

jetpack Email Widget Customization

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

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

[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.

Related Posts

5 thoughts on “How to Customize JetPack Subscription Widget”

  1. Dear Rakesh,

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

    Regards

    Satish Kumar Ithamsetty

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

  2. 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)

    1. 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

Leave a Reply

Your email address will not be published.