Customize Wordpress: Quickly Add a Link to this Post Box

We all know that links are the currency of the web. The more links you have the stronger your site can become and without them your site will have a hard time being seen. For this reason it is important that you make it easy for people to link to you.

Within this tutorial we will learn how to display a “Link to this post” code box in your sidebar.

Please Note This is an Old tutorial. The examples used have changed.

The example and code I will be using are specifically for Thesis. If you aren’t running Thesis shame on you :). I suggest you give thesis a try today. If you are still content editing your own wordpress theme I’ll provide you with the code but you will have to edit your theme files on your own. Here is a link to the non-thesis section of this post.

If you are running Thesis, Congrats! The code provided within this post is built on Thesis hooks so it will we quick and easy for you to add.

Thesis Theme Users – Lets get Started:

For Thesis users here are the hooks and CSS you need to get started.

Ok so first open your /themes/thesis/custom/custom_functions.php file. We are going to drop in two hooks. Here they are, simply copy and paste both of them in and save. You may have to add or remove the php open and closings.

Header Hook: Adds Javascript

<? function thesis_add_to_header(){
	if(is_single()){?>
		<script type="text/javascript">
			function select_all(){
			var text_val=eval("document.linkform.linktopost");
			text_val.focus();
			text_val.select();
		</script>
	<? }
}
add_action('wp_head', 'thesis_add_to_header'); ?>

Sidebar Hook: Adds Link Box

<?
function thesis_custom_sidebar(){
if(!is_home() && is_single()){
	global $post; ?>
        <li id="linktopost" class="widget">
            <h3>Link to This Post</h3>
            <div id="copytext">
            <p>Did you find this post helpful? You can easily share this post with others by copying the code below and adding it to your favorite web page.</p>
                <form name="linkform">
                <textarea readonly="readonly" name="linktopost" onClick="select_all();">&lt;a href=&quot;<?= the_permalink();?>&quot; title=&quot;<?= the_title();?>&quot;&gt;<?= the_title()?>&lt;/a&gt;</textarea>
                </form>
		</div>
        </li>

<?

}
add_action('thesis_hook_after_sidebar_1', 'thesis_custom_sidebar');
?>

Thesis CSS

Now that we have successfully displayed the post box out to the page, lets style it. Begin, by opening your themes/thesis/custom/custom.css file and adding the following CSS.

.custom ul.sidebar_list li div#copytext {
	padding:10px;
	background:#e2ffc2;
	border:dashed 1px #ccc
}
.custom ul.sidebar_list li div#copytext p {
	margin-bottom:.75em;
}
.custom ul.sidebar_list li textarea {
	width:230px;
	height:50px;
	padding:5px;
	background:#EEEEEE;
	border:1px solid #ccc;
	font-size:11px;
}

As you may notice this theme uses a left sidebar, which isn’t part of the standard thesis layout. You may need to tweak the styling a bit to suit your needs.

I believe the default sidebar width is 195 px, if this is the case you will need to change the width of the textarea to be 165px or 175px instead of 230px;

---

Standard Wordpress Users – Lets get Started:

Display Linkbox: Place in Single.php or Sidebar.php

First you need to find where you want to place the box at, you probably want it somewhere in your sidebar or near your comments. So open your sidebar.php or single.php and drop the following code in.

<h3>Link to This Post</h3>
            <div id="copytext">
            <p>Did you find this post helpful? You can easily share this post with others by copying the code below and adding it to your favorite web page.</p>
                <form name="linkform">
                <textarea readonly="readonly" name="linktopost" onClick="select_all();">&lt;a href=&quot;<?= the_permalink();?>&quot; title=&quot;<?= the_title();?>&quot;&gt;<?= the_title()?>&lt;/a&gt;</textarea>
                </form>
		</div>

Select All Javascript: Place in Header.php

Once you have saved or reuploaded your edited theme file pull down your header.php and open it up for editing drop the following javascript between the head tags.

<script type="text/javascript">
function select_all(){
	var text_val=eval("document.linkform.linktopost");
	text_val.focus();
	text_val.select();
}
</script>

Save the header.php file and put it back up on your server. You now have the code implemented! To start styling play with your style.css file and make changes accordingly.

Closing

I hope this quick tutorial has been useful and look forward to seeing your comments and thoughts. If you have any requests for tutorials for Thesis feel free to drop us a line on the Contact page.

photo credit: Vesko Ruychev