How to Add Get Shortlink in P2

You are here: Home » Blog » How to Add Get Shortlink in P2

How to Add Get Shortlink in P2

Blog, Wordpress•on February 7th, 2010•No Comments

P2 is a theme from Automattic (WP mothership) team that transforms a mild-mannered blog into a super-blog with features like inline comments on the homepage, a posting form right on the homepage, inline editing of posts and comments, real-time updates so new posts and comments come in without reloading, and much more (as written on P2’s website )

wp.me is a shortURL service from Automattic. Matt, father of WordPress said “it’s a short link, about 70% smaller than the permalink for this post. WP.me is the only two-letter .me domain in the world.Every blog and post on WordPress.com has a WP.me URL now. These are all exposed in the using rel=shortlink. It doesn’t work for any URL in the world, just WP.com-hosted ones. The links are permanent, they will work as long as WordPress.com is around.WP.me is spam-free, because we are constantly monitoring and removing spam from WP.com”

Automattic added Get Shortlink to WordPress,where is it exactly? Matt said a “Get Shortlink” button next to your permalink when you edit or write a post, and when you click it you’ll get a popup with the beautiful link already highlighted for your copy and pasting pleasure.

Back to P2 idea, i found P2 is a great theme to communicate between team members or company employees, It has in-front UI for add/edit posts, reply comments, however no Get Shorlink?

I had an idea to add wp.me or Get Shortlink to P2 theme in early January. No wp.me shortlink tool in that theme at the time (or still ?) I spent amount of time for a fun modification

Install WordPress.com Stats plugin or known as wp stats plugin
After that, lets get our hands dirty with code

1. Open entry.php and add

if ( function_exists(‘get_shortlink’) ) : ?> | <a href=”" rel=”shortlink”>Shortlink</a>else : endif;

Add it below

if ( current_user_can(‘edit_post’, get_the_id() ) ) :

This means you only use that when you logged in.
Why did I add Shortlink only for logged in users? because that show Shortlink in same area with Edit Post, when you click Edit, it will pop-up editor box below content in P2.

2. Add a function to show Shortlink in AJAX way
Open inc folder, edit ajax.php. Find line no 5, where the class P2Ajax is. Add below function inside class P2Ajax {

function get_shortlink_ajax() {
check_ajax_referer(‘ajaxnonce’,'_inline_edit’);
if ( function_exists(‘get_shortlink’) ) :
$post_id = $_GET['post_ID'];
$post_id = substr( $post_id, strpos( $post_id, ‘-’ ) + 1 );
echo get_shortlink($post_id);
else :
endif;
}

3. Last step is the most difficult step. I added a function for AJAX but it wont work with step 3.
Still in same folder, that’s inc folder, now open p2.js
Go to line 406, where you see this code

case “post” :
var thisPostEditArea;
if (inlineEditPosts != 0 && isUserLoggedIn) {
thisPostEditArea = $(element).children(‘div.editarea’);
thisPostEditArea.editable(ajaxUrl, {event: ‘edit’,loadurl: ajaxUrl + ‘?action=prologue_load_post&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ‘content’, type: ‘autogrow’, cssclass: ‘textedit’,rows: ‘3′,
indicator : ”, loadtext: p2txt.loading,
cancel: p2txt.cancel, submit: p2txt.save, tooltip : ”, width: ‘90%’, onblur: ‘ignore’,
submitdata: {action:’prologue_inline_save’, _inline_edit: nonce}});
$(element).find(‘a.post-edit-link’).click(function() {
thisPostEditArea.trigger(“edit”);
return false;
});
}

Add below code after above lines,

var thisShortLinkArea;
if (inlineEditPosts != 0 && isUserLoggedIn) {
thisShortLinkArea = $(element).children(‘div.editarea’);
thisShortLinkArea.editable(ajaxUrl, {event: ’shortlink’,loadurl: ajaxUrl + ‘?action=prologue_load_post&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ’shortlink’, type: ‘autogrow’, cssclass: ‘textedit’,rows: ‘3′,
indicator : ”, loadtext: p2txt.loading,
cancel: p2txt.cancel, tooltip : ”, width: ‘90%’, onblur: ‘ignore’});
$(element).find(‘a.shortlink’).click(function() {
thisShortLinkArea.trigger(“shortlink”);
return false;
});
}

Go to line no 488, change

if ((inlineEditPosts || inlineEditComments ) && isUserLoggedIn) {

if ((inlineEditPosts || inlineShortLink || inlineEditComments ) && isUserLoggedIn) {

Go to line no 558, where you see this code

if (inlineEditPosts && isUserLoggedIn) {
$(‘div.editarea’).editable(ajaxUrl, {event: ’shortlink’, loadurl: ajaxUrl + ‘?action=prologue_load_post&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ’shortlink’, type: ‘autogrow’, cssclass: ‘textedit’, rows: ‘3′,
indicator : ‘/>’, loadtext: p2txt.loading, cancel: p2txt.cancel,tooltip : ”, width: ‘90%’, onblur: ‘ignore’,});
$(‘#main a.shortlink’).click(function() {
$(this).parents(‘li’).children(‘div.editarea’).trigger(“shortlink”);
return false;
});
}

Add below code after above lines

if (inlineEditComments && isUserLoggedIn) {
$(‘div.comment-edit’).editable(ajaxUrl, {event: ‘edit’,loadurl: ajaxUrl + ‘?action=prologue_load_comment&_inline_edit=’ + nonce,
id: ‘comment_ID’,name: ‘comment_content’, type : ‘autogrow’, cssclass: ‘textedit’, rows: ‘3′,
indicator : ‘>’, loadtext: p2txt.loading, cancel: p2txt.cancel, submit: p2txt.save,
tooltip: ”, width: ‘90%’, submitdata: {action:’prologue_inline_comment_save’, _inline_edit: nonce} } );
$(‘a.comment-edit-link’).click(function() {
$(this).parents(‘h4′).next(‘div.comment-edit’).trigger(“edit”);
return false;
});
}

Open folder js, edit p2.js.
Go to line no 472

var thisPostEditArea;
if (inlineEditPosts != 0 && isUserLoggedIn) {
thisPostEditArea = $(element).children(‘div.editarea’);
thisPostEditArea.editable(ajaxUrl, {event: ‘edit’, loadurl: ajaxUrl + ‘&action=get_post&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ‘content’, type: ‘autogrow’, cssclass: ‘textedit’,rows: ‘3′,
indicator : ”, loadtext: p2txt.loading,
cancel: p2txt.cancel, submit: p2txt.save, tooltip : ”, width: ‘90%’, onblur: ‘ignore’,
submitdata: {action:’save_post’, _inline_edit: nonce}});
jQuery(element).find(‘a.post-edit-link’).click(function() {
thisPostEditArea.trigger(‘edit’);
return false;
});
}

Add below code after above lines,

var thisShortLinkArea;
if (inlineEditPosts != 0 && isUserLoggedIn) {
thisShortLinkArea = $(element).children(‘div.editarea’);
thisShortLinkArea.editable(ajaxUrl, {event: ’shortlink’, loadurl: ajaxUrl + ‘&action=get_shortlink_ajax&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ’shortlink’, type: ‘autogrow’, cssclass: ‘textedit’,rows: ‘3′,
indicator : ”, loadtext: p2txt.loading,
cancel: p2txt.cancel, tooltip : ”, width: ‘90%’, onblur: ‘ignore’});
jQuery(element).find(‘a.shortlink’).click(function() {
thisShortLinkArea.trigger(’shortlink’);
return false;
});
}

After that, go to line 614, where you see this code

// Bind actions to comments and posts
if (inlineEditPosts && isUserLoggedIn) {
$(‘a.post-edit-link’).live( ‘click’ , function() {
$(‘div.editarea’).editable(ajaxUrl, {event: ‘edit’, loadurl: ajaxUrl + ‘&action=get_post&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ‘content’, type: ‘autogrow’, cssclass: ‘textedit’, rows: ‘3′,
indicator : ”, loadtext: p2txt.loading, cancel: p2txt.cancel,
submit : p2txt.save, tooltip : ”, width: ‘90%’, onblur: ‘ignore’,
submitdata: {action:’save_post’, _inline_edit: nonce}});
$(this).parents(‘li’).children(‘div.editarea’).trigger(“edit”);
return false;
});
}

Add below code after above lines,

if (inlineEditPosts && isUserLoggedIn) {
$(‘a.shortlink’).live( ‘click’ , function() {
$(‘div.editarea’).editable(ajaxUrl, {event: ’shortlink’, loadurl: ajaxUrl + ‘&action=get_shortlink_ajax&_inline_edit=’ + nonce,
id: ‘post_ID’, name: ’shortlink’, type: ‘autogrow’, cssclass: ‘textedit’, rows: ‘3′,
indicator : ”, loadtext: p2txt.loading, cancel: p2txt.cancel,
tooltip : ”, width: ‘90%’, onblur: ‘ignore’});
$(this).parents(‘li’).children(‘div.editarea’).trigger(“shortlink”);
return false;
});
}

View P2 with Get Shortlink demo (it also uses Private Only plugin)
Username: user01
Password: 123456