Well finally, Jetpack have now added the short code to manually add their subscriptions widget to WordPress pages and posts.
Those of you who don’t know the capabilities of Jetpack, in a nutshell it adds many extra useful functionalities such as email subscriptions widget, statistics, social share and much more. Yes there are critics of Jetpack and I can be one of them from time to time but in my opinion the good out ways the bad.
Anyway this isn’t a post to critique Jetpack but to enhance the newly added functionalities since their last update: Version 2.2 which was update on the 26th February 2012.
The enhancement we are going to look at and edit is:
Enhancement: Shortcodes: Subscriptions: Add a shortcode to enable placement of a subscription sign-up form in a post or page.
So they’ve added the shortcode to add the email subscription widget to posts and pages which is great but I’ve got loads of posts that I would like it to appear in but I don’t want to manually go through each post and add the newsletter widget shortcode one by one. I am sure many of you will feel the same about this.
First of all I didn’t even know what the subscriptions widget shortcode was until I searched for it, then I found it and tested it immediately and it worked both on my Jetpack Mobile Website and the main website. You can find the shortcode below.
So I decided to add the shortcode to my WordPress Template so that it will automatically add it to my posts and then I added some CSS styles to it so that it looks good.
First I’ll show you how to add the shortcode to your template/theme so that it dynamically adds the email widget right after the content for every existing post/article both for the main website theme and the Jetpack Mobile Theme as well. Then I’ll show you where to add the styles so that it looks better and adds a custom feel to the widget.
So we’ll go from looking like a very plain subscription form to one that looks like this:
I’ve added the form just after the social share icons and before the posts’ tags. And yes it is really the Jetpack Subscribe Widget but looks better! I’ve added background colour and made the form inputs (text and submit button) bigger.
Add Email Subscriptions Widget Shortcode
Adding the shortcode directly into the themes php code will enable you to have the Jetpack email subscriptions widget in every post. This is good because it will save you from adding it to all your earlier posts and all your newer posts will automatically have it included too.
To do this you need to find your WordPress templates folder which is kept in:
public_html/wp-content/themes/your_theme/
Replace your theme name instead of your_theme.
Now you need to edit the single.php as that is the page that handles all the posts. The shortcode required to display the Jetpack Subscriptions Widget is:
[[jetpack_subscription_form]]
Just after:
php the_content(); ?>
Place the subscription shortcode to display the email form. Note: depending on the theme you use the_content() could be on any line. This is what it should look like.
<!--?php the_content(); ?-->
<!--?<span class="hiddenSpellError" pre=""-->php echo do_shortcode('[[jetpack_subscription_form]]'); ?>
I’ve placed it just above the tags and after the end of the post content, take a look below to see where it is positioned.
Ok so with that out of the way we can go ahead and start adding some background colour to the subscriptions widget so that it looks nicer. Here’s what I added to my themes style.css which is in the same folder as my single.php.
The form has its own CSS Class name so we can use it to add custom styles to our widget. Add the code from below or add your own to anywhere in the style.css
.widget.jetpack_subscription_widget {
background-color: #EFEFEF;
padding: 1em;
}
You can see that I’ve added a grayish background colour and a 1em padding so that it lets my form controls breath 🙂
Now with that out-of-the-way, to style the form controls like I did, I’ve made both the text-input and submit button on one line and increased its height. the styles for those are inline so you need to find the file that controls the subscriptions widget shortcode which can be found in:
public_html/wp-content/plugins/jetpack/modules/subscriptions.php
Once you are there go to line number 588 you should find the form controls there similar to:
</pre>
<input id="subscribe-field" style="width: 60%; padding: 1px 2px; height: 25px;" onclick="if ( this.value == '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>' ) { this.value = ''; }" type="text" name="email" value="<?php echo !empty( $current_user->user_email ) ? esc_attr( $current_user->user_email ) : esc_html__( 'Email Address', 'jetpack' ); ?>" onblur="if ( this.value == '' ) { this.value = '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>'; }" />
<pre>
<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 esc_attr( $widget_id ); ?-->" />
<!--?<span class="hiddenSpellError" pre=""-->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" style="height:30px"/></pre>
<pre>
As you can see I’ve added some inline CSS to the controls and removed one of the paragraphs which makes it look like the way it does now.
Right so that is how I made my email subscription widget appear on every post without me manually adding the shortcode to each one. Then I added some style to the CSS files so that it looked better than the default.
To add the subscriptions widget to the Jetpack Mobile theme you need to do the same as above but add it to the below files. (If you have the subscriptions widget on the sidebar your theme may place it there by default so you can skip this bit and just add the styles.
public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/content.php public_html/wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/style.css
On the content.php find line 52 and replace it with this code:
<!--?php if ( is_single() ) : ?-->
<!--?<span class="hiddenSpellError" pre=""-->php echo do_shortcode('[[jetpack_subscription_form]]');?>
<nav id="nav-single"></pre>
<h3><!--?<span class="hiddenSpellError" pre=""-->php _e( 'Post navigation', 'jetpack' ); ?></h3>
<pre>
<!--?php previous_post_link( '%link', __( '&<span class="hiddenSpellError" pre=""-->laquo; Previous', 'jetpack' ) ); ?>
<!--?php next_post_link( '%link', __( 'Next &<span class="hiddenSpellError" pre=""-->raquo;', 'jetpack' ) ); ?>
</nav><!-- #nav-single -->
<!--?php <span class="hiddenSpellError" pre="php "-->endif; ?>
<?php comments_template( '', true ); ?>
As for the style.css of the Mobile theme just add the css code from above.
Important! I’ve intentionally left out one of the square brackets ‘[‘ from the shortcode because my editor parses it and displays the shortcode.
Let me know how you get on or if you find any problems and thanks for reading.
Are you suggesting using the code generated by the shortcode rather than using the shorcode itself? Surely anyone would want to parse: [jetpack_subscription_form] to ensure dynamic generation of the nonce and source fields which will be different on every page load.
No not all my editor was parsing the code sorry about that it has been updated now, thanks. I’ve intentionally left out one of the brackets and left a note so please use to dynamically generate the form.
Great, work! Thanks for Argentina. Have you know how can I indicate that the title show in and not in ? sorry for my english