WebDevLounge | design, development, SEO and wordpress | articles, discussion and community

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Well It’s not often that I do a post like this but I think we all should every now and then. You see the sites like “How many 5-year olds can you beat in a fight” along with all those other tests. I recently discovered “How much money could you carry in a bank robbery” I managed to score $3,465,390. Pretty good aye? Let’s see what you get!

Have you seen those cryptic short URLs popping up everywhere - on web pages and even in Twitter or Plurk? If you build websites, you might wonder, “Why bother?,” especially since all the link juice ends up going to the service instead of to the source URL. This article discusses their uses, lists some services, and explains how you can create your own custom version in WordPress. It also covers a few concepts in the tutorial sections:

1. One way to use WordPress Custom Fields.
2. How to create conditional JavaScript code, based on PHP variables.
3. How to redirect a web page in WordPress.

Short URL Uses

To date, short URLs have a very small number of uses:

1. A replacement for when space is at a premium, such as on Twitter, Plurk, or similar services.
2. Use in podcasts/ vodcasts/ screencasts, to make it easier for listeners/ viewers to find an article.
3. Mask affiliate URLs.
4. Also making appearances in print.
5. Use for an online treasure hunt?

Know of any other uses? Short URLs have very specialized uses, but they’re good for that - especially #1. For use #2, the short URLs need to be friendlier than the standard cryptic URL - something discussed in detail below.

Services

Despite their focused use, there are numerous URL shortening services/ solutions, and they fall into a few categories:

1. Privately hosted, random cryptic URLs.
2. Self-hosted code, random cryptic URLs.
3. Privately hosted, refined URLs.
4. Self-hosted, refined URLs.

The screenshot below is an example of category #3 - a live demo of Khoi Vinh’s Shorty, which you can host a copy of, and which gives you control over the “short” URLs.

There are far too many URL shortening services to list them all here. Mashable had a list of 90+ URL shortening services earlier this year. Here are a few more services not on the Mashable list:

1. BrokenScript. (Allows a “seed” string as clue.)
2. elfURL.
3. Lesslink.
4. QuickURL/Qurl. (Offers picture hosting.)
5. RURL.
6. Shurl.org.
7. Shrinkster.com.
8. Snipr, whose API is used by Snipurl.
9. Snurl.
10. TinyURL.com.au.
11. Twurl (now incorporated into Tweetburner).
12. URL(x).
13. URL123.
14. Urlborg.
15. URLGap. (Allows for a tag to be used.)
16. ZipMyURL.
17. zURL.ws.

Several of the above services allow some degree of finer control over the final short URL. A few offer APIs or downloadable, self-hosting source code.

The Drawbacks of Using an External Service

Most existing URL shortening services are used when space is at a premium, so the fact that the URLs are cryptic doesn’t usually matter. But there are some downsides with using an outside service, whether for casual use or for a production website:

1. Link juice goes to someone else’s domain.
2. What happens if they go offline or even out of business? The short links you’ve used will break, and users will not find the target URL. (At the time of this writing, at least five services were unavailable, and at least three not listed here are no longer in service.)
3. What if you want to use short URLs in print, or more to the point, in web video/ screencasts? Cryptic URLs are not easy to remember when flashed for a few seconds. They’re even harder if you’re listening to them on an audio-only podcast. Friendlier URLs are necessary, though some services do offer this option.
4. What if you want to associate extra content with a short URL, and have the content be searchable somewhere? (Explained in more detail below.)

Create Your Own “Tiny URL” Site in WordPress

If you have very specialized needs for a short-URL service, consider running your own, for your use only. For example, I’ve been doing a lot of podcasting/ screencasting, and I’m always reluctant to mention/ show the URL of an article I want to reference. Most people are not going to remember something really long nor something cryptic. If I have a substitute that’s short and easy to remember, this could be a boon for listeners.

In a related use, my podcasts/ screencasts often have accompanying accompanying articles that will list the necessary URLs. However, I can’t record the podcast with the location of the URL because it doesn’t exist yet. Catch-22. And if the podcast is living at an audio/video sharing site, or is embedded at someone else’s site, listeners might have difficulties finding the corresponding article.

To summarize the functional requirements:

1. I need complete control of the redirect URL, not random alphanumeric characters.
2. I’d like to attach some text and possibly images to the short URL page so that users can browse the site and find what they want. If I don’t have massive quantities of redirect posts in my service, they will not even have to remember the short URL.
3. Alternately, users can also search for a site name or keyword at my service, to help pinpoint the redirection they’re looking for. Again, they don’t have to remember the short URL.

So to satisfy all these needs, I need my own short URL service. Obviously, if the URLs are going to be friendly and easy to remember, they’re not necessarily going to be as short as the typical cryptic short URL. If that’s not a concern, then the rest of this post covers how to set up your own URL shortening and redirection service in WordPress. My live example, Qurly.net, uses WP 2.5.1, but everything should work in early versions of WP.

[Note that the code below gives you complete control over the "short" URL. If you want something more random and don't mind the cryptic URLs, check out Wnyia.org's Making Your Own Tiny URLs with PHP.]

Process

The short URL redirection process I use requires WordPress Custom Fields. Here is a summary of the general process, which is expand on below:

1. Create a new post and assign a category of “Redirect”. (This is actually optional, though if you use your own service for both regular blog posts and URL redirection, you might want to make redirect “posts” distinct and filter them out on the home page. I don’t do that because I actually want them to appear on the home page.)
2. In the post, set up a Custom Field for the redirect URL: redirect-url. For the value of redirect-url, give it the URL that the short URL will redirect to.
3. Change the post’s slug to whatever short URL you want  (done in post Edit mode). Don’t use forward slash, “/”, backslash, “”,  spaces or any other unacceptable URL slug characters. (Forward slashes are reserved for use in full URLs, not in the slugs.) Instead, consider using either underscore, “_”, or hyphen, “-”.
4. Save the post.
5. Test it by either clicking the post’s permalink from the homepage, or by typing in the short URL directly in your browser.

Of course, you need handler code to do the actually redirect. This is discussed shortly.

The snapshot below is how the Custom Fields pane looks in WP 2.5.1 when you are editing a post (new or existing).

I’ve used the Field name redirect-url, as that’ll be tested for in the handler code. Once you create a custom field name the first time, it’ll be available in the left-side dropdown menu for all other posts (new or existing).

Next, you have to edit the WordPress post slug. The snapshot below shows you where to find it in WP 2.5.1 (which is different than past versions):

Now, just save the post and test it.

The Handler Code

I’ll warn you before hand that the handler code looks very convoluted (though I’ve seen worse when developing interactive sites in Perl, JavaScript and HTML). If you look closely, though, it’s not really too complicated. It’s one of those situations where the explanation is lengthier than the code.

Here is a code fragment from a modified single.php template file (using WordPress’ Default theme):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php get_header(); ?>
 
	<div id="content" class="widecolumn">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
 
	<!-- Short URL Redirection Code -->
	<?php
	if ( $redirecturl = get_post_meta($post->ID, 'redirect-url', true) )
	{ ?>
		<?php
		echo "Redirect URL: [". $redirecturl. "]<br/>";
		?>
		<script type="text/javascript">
			location.href ="<?php echo $redirecturl; ?>";
		</script>
 
	<?php } ?>

There is more than one way to do a page redirect, but you cannot use PHP’s header() function because WordPress’ header.php file will have already sent out HTML header information. I also don’t want to have to make any changes to the web server’s .htaccess file, since not everyone has access. So here is the basic handler logic in use, which lives in your WP theme’s single.php file.

1. Inside the WP “loop” code, before rendering the post page, check if the current page has Post Meta information (Custom Fields). Specifically, we’re testing for a Custom Field called “redirect-url”, using the WP function get_post_meta() inside a block of PHP code. The variable $post->ID supplies the ID of the current post. The third parameter, true, says to only grab a single value of redirect-url. (WP allows you to use the same custom field name multiple times in the same post. If we use “false”, then the value returned by get_post_meta() is an array, even if there’s only one value. Since we only use redirect-url once per “post”, it’s simpler to grab a single-valued variable than an array.
2. Once we have the value of redirect-url, we assign it to the variable $redirecturl. (If there is no redirect-url Custom Field, the code falls through the PHP if statement and the page will get rendered.
3. The PHP echo statement displays the redirect URL on screen. This is purely for debugging purposes. Feel free to remove it.
4. Inside the PHP if statement, we do a redirect by using a JavaScript location.href assignment. Here’s where the code is a bit convoluted. The redirect URL is stored in a PHP variable, but we’re using JavaScript code for the redirect. So we need to use a fragment of PHP code inside the JavaScript code. Once a new URL has been assigned to location.href, the redirect is automatic.

Note: If you have a theme that combines index.php and single.php into index.php, you’ll have to find where the template code renders a single post page’s contents and insert the handler code accordingly.

How a Reader Uses Your URL Shortening Service

This is set up at my Qurly.net site, on WP 2.5.1. I have only two examples set up, at the time of this writing, though they should be sufficient to demonstrate the redirection at work.

When you’ve set up a redirect “post” and provided the short URL either in a web page or maybe in a podcast, a curious user can use this redirect service in a few ways:

1. Browse the home page, find the desired “post”, then click on the permalink. (See snapshot above.)
2. Use the site’s Search for a keyword or target site name. Click on a search result’s permalink. (At the time of writing, using Search at Qurly.net results in headlines only, no descriptions.)
3. Type in the short URL directly into the browser.

All of these ways will cause a redirect to the target URL, if the redirect post is set up correctly.

So if I have a podcast and mention some “CSS Grids retrospective” article at “Webdevlounge.com”, I might mention a custom short URL of “qurly.net/webdev-cssgrids”. That’s still a bit harder to remember, but the listener can also search for either “CSS Grid” or “Webdevlounge” at Qurly.net. (For screencasts/ vodcasts, I can display the short URL I’ve set up.)

This is arguably a much simpler experience for podcast listeners, as opposed to needing to remember some big long URL or a short cryptic one that’s not memorable at all.

The full code of the single.php I’m using (based on WP 2.5.1’s Default Theme) can be downloaded here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<?php get_header(); ?>
 
	<div id="content" class="widecolumn">
 
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
 
	<!-- Short URL Redirection Code -->
	<?php
	if ( $redirecturl = get_post_meta($post->ID, 'redirect-url', true) )
	{ ?>
		<?php
		echo "Redirect URL: [". $redirecturl. "]<br/>";
		?>
		<script type="text/javascript">
			location.href ="<?php echo $redirecturl; ?>";
		</script>
 
	<?php } ?>
 
 
		<div class="navigation">
			<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
			<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
		</div>
 
		<div class="post" id="post-<?php the_ID(); ?>">
			<h2><?php the_title(); ?></h2>
 
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
 
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
				<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
 
				<p class="postmetadata alt">
					<small>
						This entry was posted
						<?php /* This is commented, because it requires a little adjusting sometimes.
							You'll need to download this plugin, and follow the instructions:
							http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
							/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ?>
						on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
						and is filed under <?php the_category(', ') ?>.
						You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?> feed.
 
						<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
							// Both Comments and Pings are open ?>
							You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site.
 
						<?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) {
							// Only Pings are Open ?>
							Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site.
 
						<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
							// Comments are open, Pings are not ?>
							You can skip to the end and leave a response. Pinging is currently not allowed.
 
						<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) {
							// Neither Comments, nor Pings are open ?>
							Both comments and pings are currently closed.
 
						<?php } edit_post_link('Edit this entry.','',''); ?>
 
					</small>
				</p>
 
			</div>
		</div>
 
	<?php comments_template(); ?>
 
	<?php endwhile; else: ?>
 
		<p>Sorry, no posts matched your criteria.</p>
 
<?php endif; ?>
 
	</div>
 
<?php get_footer(); ?>

Other Uses

I’m using Qurly.net for a very specialized use: in podcasts and vodcasts, so that people have an easy way to quickly find a specific post. I could also use it in some of the other ways mentioned earlier, though I do little affiliate blogging. Still, the way this is set up leaves room for future possibilities.

Final Thoughts

Qurly.net is set up for my use, though I’m offering very limited access to only the first 10 people that explicitly request it in the comments of this article. (If you use it for spam, pr0n, unethical or illegal purposes, you’ll be blacklisted.) Also, if you’re already a colleague of mine, it’s open to you as well. As for others, my apologies but I just don’t have time at present to enable and monitor multiple accounts.

This is a very simple guide on which plugins you can install today to increase your blogs performance in the search engine rankings. It’s based on a few years of experience in optimizing WordPress blogs. Some of the blogs I did this on had 50% more traffic from the search engines within 2 weeks!

1. HeadSpace2
   Headspace2 is one of the two plugins by John Godley that I keep promoting to everyone. Simply install it and use the special tags in the options to change your page titles and meta descriptions to meaningful stuff, make sure the post and page names are the first things in your title, and then your blog name.
2. Redirection
   The other plugin by John Godley is Redirection. You can use this to redirect old URL’s to new ones, but it has one feature that is my prime reason for using it. It automatically adds a redirect to it’s database when you change a posts slug. So, you can now easily change your post slugs and do not have to worry anymore about search engines and users going to the wrong place.
3. SEO Friendly Images
   This plugin automatically optimizes ALT and TITLE attributes for each of your images that doesn’t have one. This will make them xHTML valid, and it will also help you a bit in your rankings. Download it here.
4. SEO Slugs
   SEO Slugs automatically removes words like ‘a’, ‘the’ and ‘in’ and other stop words from your post slugs before saving them, making your URL’s a lot shorter and cleaner, which will improve your chances to rank and improve usability!
5. Robots Meta
   One of my own plugins, Robots Meta might be a bit impressive on first install. Without going in to all the details here, I’d suggest you at least enable the following options:
   • Prevent indexing of search result pages
   • Prevent indexing of login and register pages
   • Prevent indexing of all admin pages
   • Prevent indexing of author archives
   • Nofollow login and registration links
   • Replace the Meta Widget with a nofollow one
6. RSS Footer
   Another plugin of mine, RSS Footer will allow you to add a link back to each blog post on your blog in your feed. This way, if scrapers scrape your RSS feed, they will always link back to your original article. Since using this, I’ve come to love scrapers!
7. Yoast Breadcrumbs
   The last of my plugins, Yoast Breadcrumbs, actually only released this morning, is a plugin to easily add breadcrumb paths to your theme. This is a very good way for your users to navigate around your site, and for search engines to determine the structure of your site. For maximum SEO effect, you should enable the category to show up in your single posts breadcrumbs.
8. WP Page Numbers
   WordPress’ default pagination is one of the reasons why search engines won’t index older posts, they simply can’t find a post that’s buried 10 clicks away. Using WP Page Numbers, you can change the pagination to use numbers, and link to several pages at once, highly increasing your WordPress SEO.

These tips should help you a lot in improving your rankings. If you want to go even further, read my in-depth article on WordPress SEO, and be sure to start reading my SEO blog.

Well, another milestone for Web Dev Lounge! This is our first Free Wordpress Theme for WDL and I can’t wait to release a few more! I will try to keep these themes really top notch quality. Tell me what you think of it in the comments

• Two Coloumns
• Fixed Width
• Widget Ready
• Nice sexy green!

Preview | Download

Thumbnail:

Hope you all enjoy it! Questions:

• What do you think of the color scheme?
• Want more colours?
• Features for more themes?

We all think our websites and blogs are easy to use. The positioning of navigation elements, the words we use for page titles, the widgets in the sidebar … they all make perfect sense. To us.

It’s easy to lose sight of the readers of our blog, who – depending on our niche – might have very different expectations from the ones we have. And the features which make perfect sense to a repeat visitor might confuse someone who’s come to our blog from Digg or StumbleUpon.

Here’s how to get your site “user tested” in order to make it more reader-friendly:

1. Find a willing victim who’s never used visited your site or blog before. This might be a friend, a colleague, your spouse or your mum.
2. Sit them down in front of a computer (ideally their own machine — or at least set yours up to resemble their’s. For example, they might be used to IE not Firefox.)

   Continue reading..

Hello everyone, this article is going to focus on some simple effective ways of becoming a better web designer online. The article will not only cover “at the computer” methods, it will also review ways of becoming a better designer away from the computer.

1. Analyze Your Client, Don’t Let Them Ask All The Questions.

When a client approaches you for your services automatically there are many questions that they are asking, such as “What is your turnaround time for this project?” “What is the overall price range for this type of service?”. What you should do next in your reply to this is ask them a few questions such as whereabouts they live, what age they are, how long have they been hiring web designers, who have they hired in the past. These questions just give you a better idea of who you are working with and get a better understanding of the type of person they are.

Continue reading..

If your a web developer looking to add some extra functionality to your clients website and look good while your at it, then than an auto suggest search bar is something you might consider. Ever since ‘Google Suggest‘ rolled out the labs, hundreds of clones have sprung up on a variety of websites, each with a slight twist on the original. This article is going to show you how to make your own ‘auto suggest’ search bar in three easy steps.

This article assumes you have a solid grounding in HTML, CSS, Javascript and PHP. It is showing technique, not teaching you the language.

Step 1 - Good Form

The first step towards making our finished product is to develop the front-end of the site. This is basically going to consist of a HTML form containing an text input dialog, a submit button and a placeholder for our suggestions. With that in mind, lets look at the code:

Continue reading..

Well its been a good 2 and a half months that this site has been up now and it’s growing like a wild flame! We’ve had 25 or so quality articles / tutorials and about 7 miscalaneous posts. The site has been maintaining 1k uniques a day and we’ve sold our first ad this week.

We just hit the 200 mark on the RSS count, and well, went a bit above. The count rests at 214 now, an accomplishment I think I can be proud of.

The contest. The contest isn’t really going as well as I thought it would of. With only 2 entries, I thought I’d be upto around 15 now. I’m expecting a few more entries within the week but I’d love if you could all submit an article, or at the least subscribe to RSS by email, you can win some pretty awesome prizes. Things are doing a bit better with the RSS by Email, with 18 entries, but still, it could be a couple of hundred seeing how easy it is. Please check out the contest!

Continue reading..

You’ve probably seen it on various websites: those neat little inline slideshows that browse you through a gallery of images (or content if you want, too). Most people simply copy the code to use it on their own site, but I believe that by making it yourself, you learn new techniques and gain new insight. Therefore I’ll walk you through this tutorial that teaches you how to achieve this through the use of CSS and MooTools.

Continue reading..

CSS Articles are posted every day on the web but the trouble is finding the quality ones. With the thousands and thousands out there only a small percentage are of very high quality - and of worth linking to. I’m going to be linking to articles on basics, writing good code, css frameworks, css layouts, navigation, forms, and of course cross browser tips. In each section I will try and provide atleast 10 links, if you users want to submit on to the list I will try my best to edit this post to add it. I hope to make this post and ever expanding list and a great resource for all people wanting to expand there css knowledge, or learn it from the basics.

Basics, Learning CSS and Getting Started:

1. Top 10 Reasons to Learn CSS

We asked Faculty member and published CSS guru Christopher Schmitt. Christopher’s so convinced that CSS should be a part of every designer’s Web design toolkit, he devoted two lessons in Sessions’s updated Web Design I course to creating CSS layouts.

2. CSS Basics.com

You’ve heard the buzz about the seperation of style from content, but you are stuck in the world of nested tables and deprecated markup. If so, you have come to the right place! Using CSS to style your (X)HTML files, will benefit you and your visitors in many ways.

3. Learn HTML and CSS: An Absolute Beginner’s Guide

So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous.

4. CSS - Beginners

CSS is used to control the style of a web document in a simple and easy way.

CSS stands for Cascading Style Sheet.

This tutorial gives complete understanding on CSS.

Continue reading..