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.

• Author
• Recent Posts

rakesh kumar

Lead Developer at binarynote.com

The Whole concept was developed by the man you are watching here. I am rakesh Kumar Serial Niche Blogger and SEO Enthusiast. find me onfacebookandon twitter.. Developed popular WordPress theme for Wallpapers and funny Image WordPress theme. Love SEO optimized WordPress theme Designing and Customization.

Latest posts by rakesh kumar (see all)

• How AI Will Impact Digital Marketing After COVID-19? - April 29, 2021
• The New Social Media Rules for Small Business Marketing in 2021 - April 22, 2021
• How to choose perfect Graphic Designer for startups - April 19, 2021