Today while working on a clients site trying to fix w3 validation errors I found this interesting error when urlencode was’t able to encode/escape the space character in the title of the post.
Scenario (urlencode not working for space character in php):
The w3 validator error said:
Line 142, Column 297: Bad value http://twitter.com/home?status=10 Ways to (… removed …) for attribute href on element a: Illegal character in query: not a URL code point.
When I checked the source code in WordPress single.php file, it was:
<a href="http://twitter.com/home?status=<?php print(urlencode(the_title())); ?>+<?php print(urlencode(get_permalink())); ?>" class="btnTw" title="Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><span class="shtweet">TWEET</span><span class="twCount<?php the_ID(); ?>">(0)</span></a>
We can see in the code above that “the_title() is being urlencode by php, but the output still contained the white space! :/ weird!
Confused why urlencode didn’t work? Oh and btw rawurlencode wouldn’t work for this condition too!
Difference between Urlencode and Rawurlencode
Just a few words about the difference between urlencode and rawurlencode output in PHP specific to space character encoding.
Urlencode changes space character to: %
Why urlencode isn’t encoding space in php in our twitter scenario
Well the issue with this piece of code for twitter share button was that the_title() itself echo the title value for current post. Which means the title got echo before urlencode was even able to work on it.
So the problem is that we have to allow urlencode to work on the title and then the title should be sent out to the browser.
How to urlencode WordPress Post Title correctly
Well the solution to the issue of white space in wp title not being encoded properly by urlencode can be solved by replacing the_title() function with another builting wordpress function get_the_title().
The get_the_title() function don’t echo the value of the title of wordpress post automatically and just holds it and assigns it to the calling variable or function.
We need echo or print command to echo the title value with get_the_title().
Proper code to show twitter share button with w3 valid wordpress title
The final code which should be used instead of the above one is as follow (hint: only the_title() changed to get_the_title() ):
<a href="http://twitter.com/home?status=<?php print(urlencode(get_the_title())); ?>+<?php print(urlencode(get_permalink())); ?>" class="btnTw" title="Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><span class="shtweet">TWEET</span><span class="twCount<?php the_ID(); ?>">(0)</span></a>
Now your url is properly encoded and will not give the validation error!