Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes.

Demo/Download: http://topcoat.io/

Countable.js

As you can guess, countable.js is a JavaScript function to add live paragraph, word and character counting to any HTML element. It is very small and do not rely on any JS framework.

Demo/Download: http://radlikewhoa.github.io/Countable/

iCheck

Want super-looking checkboxes and radio buttons for your new web app? Then try iCheck, a jQuery plugin which allow you to easily customize radio buttons and checkboxes. iCheck is easy to use and comes with various skins and color schemes.

Demo/Download: http://damirfoy.com/iCheck/

CSS only responsive navigation

Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion. Here is a downloadable and reusable responsive navigation menu, made in CSS only.

Demo/Download: http://valdelama.com/css-responsive-navigation

Almost Flat UI

Based on Foundation Framework, Almost Flat UI is a complete HTML/CSS/JS framework to build your site on. It looks really clean and professional. Definitely worth a try!

Demo/Download: http://websymphony.net/almost-flat-ui/

Chart.js

Chart.js is a dependency free, lightweight and object-oriented tool to create client side graphs. It features 6 different chart types and is very easy to use.

Demo/Download: http://www.chartjs.org/

PlaceIMG

When building websites or apps, you often need placeholder images. This very handy service generates random images at the requested size. Super useful!

Demo/Download: http://placeimg.com/

jQuery PanZoom

jQuery Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+.

Demo/Download: https://github.com/timmywil/jquery.panzoom/

Perfect Scrollbar

If you want to be able to create perfect looking scrollbars, then you should definitely have a look to this tiny jQuery plugin. It helps you to create customized scrollbars with no css change on any original element.

Demo/Download: http://noraesae.github.io/perfect-scrollbar/

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.

Demo/Download: http://fitvidsjs.com/

Some scrapers display your blog in a frame to keep advantage of your content, and show their ads in another frame in order to try to make a few bucks. This code will force your blog to break out of the frames, so the visitor will only see your blog, not the scraper site.

Just paste the code below into your functions.php file, save it, and you’re done.

// Break Out of Frames for WordPress
function break_out_of_frames() {
	if (!is_preview()) {
		echo "\n<script type=\"text/javascript\">";
		echo "\n<!--";
		echo "\nif (parent.frames.length > 0) { parent.location.href = location.href; }";
		echo "\n-->";
		echo "\n</script>\n\n";
	}
}
add_action('wp_head', 'break_out_of_frames');

Source: http://wp-mix.com/break-out-of-frames-wordpress/

Protect your blog against image hotlinking

Most scrapers simply use your RSS feed and display it on their site, which means that they also use your original images on their sites, and consume your server bandwidth for their own websites. So you can definitely use this to inform the reader that he’s reading an article stolen from another blog.

Let’s create a small image saying something like “This article has been stolen from www.yoursite.com”. and upload it on your blog server. Then, edit your .htaccess file, (located in your WordPress blog root directory) and append this code to it:

RewriteEngine On
#Replace ?mysite\.com/ with your blog url
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#Replace /images/nohotlink.jpg with your "don't hotlink" image url
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Here is a funny example of this technique in action:

Source: http://www.wprecipes.com/how-to-protect-your-wordpress-blog-from-hotlinking

Automatically add a link to your post title

As the majority of content thieves are using automatic scraping tools, they’ll scrap all of your content, including the post title. A good way to discourage scrapers is to automatically put a link on your post titles, so each stolen post will automatically link to your original post.

To do so in WordPress, simply open your single.php file and locate where the title is displayed. Then, replace the code by the following:

<h1>
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h1>

Source: http://www.catswhoblog.com/how-to-protect-your-blog-from-content-thieves

Automatically add a link to your original posts using RSS feed

Another useful way to fight back against content theft is to automatically insert a copyright notice with a backlink to the original post on each RSS item. That way, scrapers who use your RSS feed to publish your content on their own sites automatically will also publish your copyright notice and backlink!

Simply add the code below to your functions.php file. Copyright notice can be customized on line 4.

// add custom feed content
function add_feed_content($content) {
	if(is_feed()) {
		$content .= '<p>This article is copyright &copy; '.date('Y').'&nbsp;'.bloginfo('name').'</p>';
	}
	return $content;
}
add_filter('the_excerpt_rss', 'add_feed_content');
add_filter('the_content', 'add_feed_content');

Source: http://digwp.com/2012/10/customizing-wordpress-feeds/

Create a custom RSS feed

While the technique above is good, it only display a small notice at the bottom of your posts. You might want a more in-depth solution, which allow you to limit the number of characters appearing in each RSS feed item.

Here is a ready to use WordPress page template that you can easily customize to fit your specific needs.

<?php
/*
Template Name: Custom Feed
*/

$numposts = 5;

function yoast_rss_date( $timestamp = null ) {
  $timestamp = ($timestamp==null) ? time() : $timestamp;
  echo date(DATE_RSS, $timestamp);
}

function yoast_rss_text_limit($string, $length, $replacer = '...') { 
  $string = strip_tags($string);
  if(strlen($string) > $length) 
    return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;   
  return $string; 
}

$posts = query_posts('showposts='.$numposts);

$lastpost = $numposts - 1;

header("Content-Type: application/rss+xml; charset=UTF-8");
echo '<?xml version="1.0"?>';
?><rss version="2.0">
<channel>
  <title>Yoast E-mail Update</title>
  <link>http://yoast.com/</link>
  <description>The latest blog posts from Yoast.com.</description>
  <language>en-us</language>
  <pubDate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></pubDate>
  <lastBuildDate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></lastBuildDate>
  <managingEditor>joost@yoast.com</managingEditor>
<?php foreach ($posts as $post) { ?>
  <item>
    <title><?php echo get_the_title($post->ID); ?></title>
    <link><?php echo get_permalink($post->ID); ?></link>
    <description><?php echo '<![CDATA['.yoast_rss_text_limit($post->post_content, 500).'<br/><br/>Keep on reading: <a href="'.get_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.']]>';  ?></description>
    <pubDate><?php yoast_rss_date( strtotime($post->post_date_gmt) ); ?></pubDate>
    <guid><?php echo get_permalink($post->ID); ?></guid>
  </item>
<?php } ?>
</channel>
</rss>

Source: http://yoast.com/custom-rss-feeds-wordpress/

Let’s start with a handy snippet that will automatically redirect the reader to the post if only one post is found. Simply paste it in your functions.php file and you’re done.

add_action('template_redirect', 'redirect_single_post');
function redirect_single_post() {
    if (is_search()) {
        global $wp_query;
        if ($wp_query->post_count == 1) {
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
        }
    }
}

Source: http://www.paulund.co.uk/redirect-search-results…

Display the number of results in WordPress search

When a search is done on your blog, WordPress does not return the number of results found. Though, this can be useful for the person who made the search.

In order to display the number of results, open your search.php file. In it, search for the following:

<h2 class="pagetitle">Search Results</h2>

Now replace it with:

<h2 class="pagetitle">Search Results for <?php 
/* Search Count */ 
$allsearch = &new WP_Query("s=$s&showposts=-1"); 
$key = wp_specialchars($s, 1); 
$count = $allsearch->post_count; _e(''); 
_e('<span class="search-terms">'); 
echo $key; _e('</span>'); _e(' — '); 
echo $count . ' '; _e('articles'); 

wp_reset_query(); ?></h2>

Source: http://www.problogdesign.com/wordpress/3-codes-for-a-far-better…

Enlight searched text in search results

Here is an easy way to make your search results more user-friendly: Enlight searched text.
To do so, open your search.php file and find the the_title() function. Replace it with:

echo $title;

Now, just before the line you just modified, add this code:

<?php
	$title 	= get_the_title();
	$keys= explode(" ",$s);
	$title 	= preg_replace('/('.implode('|', $keys) .')/iu',
		'<strong class="search-excerpt">\0</strong>',
		$title);
?>

Save the search.php file and open style.css. Append the following line to it:

strong.search-excerpt { background: yellow; }

That’s all. Better, isn’t it?

Source: http://yoast.com/wordpress-search/

Limit posts per page on search

By default, WordPress outputs 10 posts per page on the search results page. If you need to change this number, just paste the following code in your functions.php file. Replace the number on line 3 by the desired number of posts to be displayed.

function limit_posts_per_search_page() {
	if ( is_search() )
		set_query_var('posts_per_archive_page', 20); 
}

add_filter('pre_get_posts', 'limit_posts_per_search_page');

Source: http://wordpress.org/support/topic/limit-post-per-search-page

Search within post type only

If you want to force the search engine to search only within a specific post type, here is the solution. Paste the code below into your functions.php file after you changed the post type name on line 4.

function SearchFilter($query) {
  if ($query->is_search) {
    // Insert the specific post type you want to search
    $query->set('post_type', 'feeds');
  }
  return $query;
}
 
// This filter will jump into the loop and arrange our results before they're returned
add_filter('pre_get_posts','SearchFilter');

Source: http://www.hongkiat.com/blog/wordpress-search-plugin-snippet/

Limit search to specific categories

Is it also possible to limit search to specific categories. To do so, just replace the categories IDs on line 3 and paste the following code on your search.php template:

<?php if( is_search() )  :
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("s=$s&paged=$paged&cat=1,2,3");
endif; ?>

Source: http://www.wprecipes.com/how-to-limit-search-to-specific-categories

Completely shut down WordPress search

Although search is a really useful feature on most websites, sometimes you simply don’t need it at all. Did you knew that you could completely shut down WordPress search? Just include the function below in your functions.php file.

function fb_filter_query( $query, $error = true ) {
    if ( is_search() ) {
        $query->is_search = false;
        $query->query_vars[s] = false;
        $query->query[s] = false;
 
        // to error
        if ( $error == true )
            $query->is_404 = true;
    }
}
 
add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Source: http://wpengineer.com/1042/disable-wordpress-search/

Make your search results unlimited

As I already stated before, the fact that WordPress displays 10 posts by default on the search results page can be annoying. If you’d like to display unlimited search results on the same page, here’s an easy way to do it.

In search.php, find the code below:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Once you found it, replace it by this:

<?php $posts=query_posts($query_string . '&posts_per_page=-1'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

That’s all. You’re done!
Source: http://wphacks.com/how-to-make-wordpress-search-results-unlimited/

The first thing to do is to make sure your files are in the right format for HTML5 video playing. Right now, there’s no standard format so you’ll have to have multiple versions of the same file in order to serve the right format to the client browser. This is indeed the biggest problem with HTML5 videos right now.

You’ll need the 3 following formats: The first is .mp4 (or .m4v) which is used on Apple products such as iPads, Safari, etc. The second format needed is .ogv, an open-source format used by Firefox. And the last one is .webm.

Converting your file into those formats is pretty easy if you use this very handy tool named Video Converter. You have nothing to install on your computer, simply upload your video, choose the desired output format, and you’re done!

Now that you have your video in the required formats, let’s start coding. You’ll see, it’s very easy.

Step 2: Coding the player

Below is the basic code for displaying a HTML5 video on a web page. Please note that in order to have the video properly displayed on iPad, you must start with the .mp4 video in the src list.

On line 5, I have added a download link for older browser who don’t recognize the <video> tag.

<video width="800" height="374">
	<source src="my_video.mp4" type="video/mp4" />
	<source src="my_video.ogv" type="video/ogg" />
	<source src="my_video.webm" type="video/webm" />
	Video tag not supported. Download the video <a href="video.webm"&gthere</a&gt.
</video>

A very important thing to remember is to make sure your server is serving video files with the correct MIME type in the Content-Type header. To make sure it will, open your site .htaccess file (don’t forget to do a backup before any modification) and add the lines below:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Also, various attributes can be used with the <video> element, for example to autoplay the video, loop it, or automatically display some controls. For the full reference, please see the w3 site.

Step 3: Creating a fallback for older browsers

Now, you have a super cool HTML5 video player. But the problem is that some older browsers don’t support any HTML video at all. For those browsers, the only solution is to use a Flash fallback.

As the purpose of this tutorial is not to show how to built a Flash video player, I’m assuming that you have your video in the .flv format (named video.flv below) as well as a flash .flv player (named fallback.swf).

As you can see below, I have added my <object> tag inside the <video> tag. That’s simple as that!

<video width="800" height="374">
	<source src="my_video.mp4" type="video/mp4" />
	<source src="my_video.ogv" type="video/ogg" />

	<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">
		<param name="movie" value="fallback.swf" />
		<param name="flashvars" value="autostart=true&amp;file=video.flv" />
	</object>

</video> 

SlabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space. Basically, it means that your headline will always look great whatever of the client screen size.
Download: http://www.frequency-decoder.com/2012/01/08/slabtext-a-jquery-plugin…

jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.
Download: http://masonry.desandro.com/

TinyNav.js

TinyNav.js is a super useful jQuery plugin which allows you to automatically turn a navigation menu into a select for small devices such as iPhones. A must have!
Download: http://tinynav.viljamis.com/

FitText.js

FitText is a simple jQuery plugin that automatically make a text fit the width of its parent element. Perfect for awesome, responsive headlines!
Download: http://fittextjs.com/

Breakpoints.js

Simply define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. Very useful on complicated layouts!
Download: http://xoxco.com/projects/code/breakpoints/

ResponsiveSlides.js

Slideshows are very popular among the web. Though, forcing them to fit any screen size can be a little tricky. ResponsiveSlides.js allow you to create responsive slideshows, which will look great whatever on any device.
Download: http://responsive-slides.viljamis.com/

Flare

Flare is another jQuery plugin for building responsive and full width slideshows. It is not free but it is absolutely worth $10 as it is very easy to use and visually pleasant.
Download: http://is.gd/flarecwc

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.
Download: http://fitvidsjs.com/

Responsive tables

Does your tables break your responsive layout? If yes, here is a simple JS/CSS combo that will let your tables adapt to small device screens without everything going to hell. A must have for any tables!
Download: http://www.zurb.com/playground/responsive-tables

jq-idealforms

Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms. It is super easy to use.
Download: http://elclanrs.github.com/jq-idealforms/

When developing a WordPress theme, widget or plugin, the best way to start is by using a “blank” template file so you’ll save time and you’ll start on solid foundations. Here are my favorites:

• Underscores.me: in my humble opinion, the best way to start coding a new WordPress theme. Simply fill the options and you’ll get offered to download a rock solid blank WordPress theme template.
• WP Widget Starter file: a blank template for developing WordPress widgets.
• Plugin Starter: a base class that is easily extended to make plugin development better, faster and stronger.
• WP Starter Kit: a development template for rapidly building WordPress plugins.
• Threaded comments: Basic CSS styles for threaded comments. Always a good start when it comes to styling comments!

WordPress Hosting

Basically, it is pretty easy to find a suitable webhost to host a WordPress site or blog. Though, I do recommend the following hosts for the good results I had with them since years:

• Vidahost: CatsWhoCode webhost. Super fast, reliable, no down time and a super friendly and reactive support. It’s not cheap at all, but definitely the best option if your site is receiving a lot of traffic, or if you’re looking to host multiple sites on a single server.
• WP Web Host: The webhost I recommend for people looking for an affordable and easy way to host a WordPress based website or blog. Friendly support with strong WordPress knowledge. Good service for small/medium sites.

On the other hand, I do not recommend Maven Hosting and PHPNet as I had bad results with both of them. I never hosted any of my websites on Bluehost, but I worked with a client who did and I didn’t found the performances good.

Free themes

There’s literally thousands of WordPress themes that you can download and use freely on your blog. But let me be honest, most of them are ugly. Though, you can still find great theme that you can use for free. My personal list of favorite places to get quality free themes:

• WordPress.org Themes: The official repository for WordPress themes. Most are old and/or ugly, but there’s lots of beautiful, well coded free themes.
• Smashing Magazine: The popular design blog offers very cool free themes from time to time.
• Blog Oh Blog Themes: Quality themes, clean code.
• ThemeLab: Lots of beautiful free themes.
• SkinPress: A few cool themes to download and use freely.

Want even more free themes? 1st Web Designer compiled this list of 20 places to get free themes.

Also, note that several premium theme sellers distribute free themes from time to time. Please check out the list below for more info.

Premium themes

Although you can find good looking themes for free, lots of quality themes requires you to pay for it. A big pro of premium themes is that authors offer support, so you’ll have someone to help if needed.

• Themeforest: Probably my favorite place to get quality themes for a cheap price. Hundreds of themes to choose from. Most themes have a clean code; however code quality may vary from a theme to another.
• WooThemes: very popular premium theme seller. High quality design and code.
• WP Zoom: High quality design, solid code, great support. Provide some free themes as well.
• Elegant Themes: Beautiful themes, well coded. Pay once and get access to more than 80 themes.
• Themify: Affordable themes with great design and quality.

Tutorials sites and blogs

When developing WordPress themes or plugins, you often need to refer to quality tutorials in order to learn new things or consolidate your knowledge. Below is my personal selection of interesting tutorial sites and blogs.

• WP Tuts+: New articles almost everyday, always interesting.
• Smashing Magazine: The popular design blog have some very in-depth tutorials and articles about WP.
• Digging into WordPress: One of my favorites WordPress tutorials blog. Authored by Jeff Starr and Chris Coyier.
• WP Engineer: Lots of coding tutorials, tip and tricks. A must read for WordPress enthusiasts.
• WPMU: A multi-author site, with lots of new content every week.

I guess most of you know that here at CatsWhoCode, I often write lots of useful posts about WordPress, so don’t forget to bookmark the site if you haven’t done already!

Code snippets

Several websites and blogs are offering ready to use WordPress code snippets. Super useful when you need to achieve a particular task.

• WPRecipes: Another site of mine, online since 2008, with over 450 WordPress code snippets, hacks and tricks.
• CSS-Tricks snippets: Quality code snippets repository.
• WP Mayor: Several interesting code snippets.
• WP Snippets: One of my favorite online place when I’m looking for a hack or snippet.
• Snipplr: Lots of user-submitted code snippets.

WordPress News

• WordPress.org News: Indeed, the first place to have a look at when looking for WordPress news is the official site.
• WP Candy: Popular WordPress site with tons of fresh news.
• Weblog Tolls Collection: One of the oldest blogs about WordPress.
• WPTopics: A news site which aggregate news from lots of interesting blogs.

HTML5 introduced new input types url and email are one of those. They allow you to write a more semantically correct code and make the form completion easier on mobile devices, by displaying special buttons (like the @ or .com buttons) depending on the input type.

Here is the url attribute in action:

<input type="url" value="">

And the email attribute as well. Please also pay attention to the pattern attribute as I will explain it below.

<input type="email" pattern="[^ @]*@[^ @]*" value="">

Source: http://davidwalsh.name/html5-email

Regexp patterns for form validation

Before HTML5, when you used a form on your website, you had to use JavaScript to create a front-side validation. Now with HTML5 and the pattern attribute, you can define a regular expression pattern to validate the data.

The following snippet is for validating email addresses:

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

This one is for strong passwords:

<input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

And this one is for validating phone numbers:

<input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

Source: http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/

Context menus with HTML5

HTML5 context menus allows you to add elements to the contextual menu which appears when the user right click somewhere on your page.
At the time of writing this article, the contextmenu element is only compatible with Firefox, so let’s hope other browsers will implement it very soon.

<section contextmenu="mymenu"> 
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>

Source/Demo: http://speckyboy.com/2013/02/13/quick-tip-the-html5…

HTML5 video, with Flash fallback

One of the greatest new possibilities of HTML5 is definitely its ability to play video files without requesting the use of Flash. Though, as older browsers are not compatible with HTML5 videos, you should implement a Flash fallback. The following example show how to embed mp4 and ogv videos in HTML5, with a Flash fallback for older browsers.

<video width="640" height="360" controls>
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.OGV"  type="video/ogg" />
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
		<param name="movie" value="__FLASH__.SWF" />
		<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
		<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
		     title="No video playback capabilities, please download the video below" />
	</object>
</video>

Source: http://camendesign.com/code/video_for_everybody

Autocompletion with HTML5 datalists

Using the datalist element, HTML5 allows you to create a list of data to autocomplete an input field. Super useful!

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Source/Demo: http://davidwalsh.name/datalist

Hidden elements using HTML5

HTML5 introduce the hidden attribute, which allow you to hide a specific element, as you would do it in CSS using display:none.

<p hidden>You can't see this text</p>

Source: http://html5demos.com/hidden

element with autofocus

The autofocus attribute allow you to force the focus on a specific element. Useful for search pages such as google.com homepage.

<input autofocus="autofocus" />

Source: http://davidwalsh.name/autofocus

HTML5 prefetching

Some time ago I wrote a detailed article about HTML5 prefetching. Basically, prefetching is a simple technique to prefetch and load a resource which is not included in the current page.

The example below shows the prefetching of an image:

<link rel="prefetch" href="http://www.catswhocode.com/wp-content/uploads/my_image.png">

Source: http://www.catswhocode.com/blog/mastering-html5-prefetching

Playing audio files with HTML5

HTML5 can play videos as I shown you before, and of course it can also play audio files such as the popular mp3 format. As an example, here is a minimalist but functional audio player.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Play</button>
	<button onclick="document.getElementById('player').pause()">Pause</button>
	<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
	<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div> 

Source: http://www.catswhocode.com/blog/mastering-the-html5-audio-property

By default, WordPress allow commenters to use some HTML tags in the comment textarea. But depending on your blog, you might want to allow the use of more tags.

To do so, simply paste the code below into your functions.php file. The list of allowed tags can be modified on line 4.

// Create function which allows more tags within comments
function allow_pres() {
  global $allowedtags;
  $allowedtags['pre'] = array('class'=>array());
}

// Add WordPress hook to use the function
add_action('comment_post', 'allow_pres');

» Source: http://davidwalsh.name/wordpress-comment-tags

Remove autolinks in comments

When a commenter paste a url link into the comment form, WordPress automatically transform it into a hypertext link. This is good on most cases, but personally I do not like this as many people used my blog comments to advertise their own products and services.

Removing autolinks in comments is super easy: Just insert the line of code below into your functions.php file.

remove_filter('comment_text', 'make_clickable', 9);

» Source: http://www.wprecipes.com/wordpress-hack-remove-autolinks-in-comments

Remove the url field from WordPress comments form

If you don’t want your commenters to be able to enter their website url, here is a snippet to remove the url field from WordPress comment form.

Simple paste the code below in your functions.php file, save it, and you’re done.

function remove_comment_fields($fields) {
    unset($fields['url']);
    return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

» Source: http://wp.tutsplus.com/tutorials/creative-coding/customizing-comments…

Add more fields to the comments form

I just shown you how to remove a field from the comment form, but now, what if you want to add a new field to the form? The following example will add a new field for the commenter to add his age.

Let’s start by adding the field. To do this, copy the code below and paste it in your functions.php file:

function add_comment_fields($fields) {
 
    $fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
        '<input id="age" name="age" type="text" size="30" /></p>';
    return $fields;
 
}
add_filter('comment_form_default_fields','add_comment_fields');

function add_comment_meta_values($comment_id) {
 
    if(isset($_POST['age'])) {
        $age = wp_filter_nohtml_kses($_POST['age']);
        add_comment_meta($comment_id, 'age', $age, false);
    }
 
}
add_action ('comment_post', 'add_comment_meta_values', 1);

Now, to display the age of the commenter, use the following code:

<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>

» Source: http://wp.tutsplus.com/tutorials/creative-coding/customizing-comments…

Insert comments programatically

On some specific cases, you might want to insert comments programmatically. Doing so is definitely easy, as shown below. Simply execute this code and it will add a new comment in your database.

$data = array(
	'comment_post_ID' => 1,
	'comment_author' => 'admin',
	'comment_author_email' => 'admin@admin.com',
	'comment_author_url' => 'http://www.catswhocode.com',
	'comment_content' => 'Lorem ipsum dolor sit amet...',
	'comment_author_IP' => '127.0.0.1',
	'comment_agent' => 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; fr; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3',
	'comment_date' => date('Y-m-d H:i:s'),
	'comment_date_gmt' => date('Y-m-d H:i:s'),
	'comment_approved' => 1,
);

$comment_id = wp_insert_comment($data);

» Source: http://www.wprecipes.com/wordpress-hack-insert-comments-programatically

Automatically disable commenting on posts older than X days

If your blog is very popular, you probably receive lots of comments, some on very old posts… So why not automatically disable commenting on posts older than X days?

Paste the code below in your functions.php file. The code will disable comments on post older than 30 days. The amount of days can be changed on line 3.

function close_comments( $posts ) {
	if ( !is_single() ) { return $posts; }
	if ( time() - strtotime( $posts[0]->post_date_gmt ) > ( 30 * 24 * 60 * 60 ) ) {
		$posts[0]->comment_status = 'closed';
		$posts[0]->ping_status    = 'closed';
	}
	return $posts;
}
add_filter( 'the_posts', 'close_comments' ); 

» Source: http://perishablepress.com/wordpress-tip-disable-comments-in-old-posts-via-php/

Add target=”blank” to all links in comment text

Using the HTML target="blank" attribute is generally discouraged as this force the opening of a link in a new tab or window, but I know how clients like it. So if you need to add a target="blank" attribute to every links in comments text, just paste the code shown below in your functions.php and you’ll get the job done.

function autoblank($text) {
	$return = str_replace('<a', '<a target="_blank"', $text);
	return $return;
}
add_filter('comment_text', 'autoblank');

» Source: http://www.catswhocode.com/blog/snippets/add-target_blank-on-all-link

Customize comments markup

By default, WordPress outputs a standard comments list, but if can be customized if needed. Paste the following code into your functions.php file and customize as desired.

function my_custom_comments($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
   <?php if ($comment->comment_approved == '0') : ?>
      <em><?php _e('Your comment is awaiting moderation.') ?></em>
   <?php endif; ?>

   // Comments markup code here, e.g. functions like comment_text(); 

}

Once done, use the following line of code in comments.php to display your custom comment markup:

<?php wp_list_comments("callback=my_custom_comments"); ?>

» Source: http://css-tricks.com/snippets/wordpress/customize-comments-markup/

Disable comments feeds in individual posts

By default, WordPress create RSS feeds for all individual posts. If you don’t want or need them, you can disable them with the following code snippet. Simply paste it in your functions.php file and you’ll get rid of individual post feeds.

// disable comment feeds for individual posts
function disablePostCommentsFeedLink($for_comments) {
	return;
}
add_filter('post_comments_feed_link','disablePostCommentsFeedLink');

» Source: http://digwp.com/2009/11/disable-comment-feeds-individual-posts/

Want more WordPress tips and snippets? Then have a look to WPRecipes, another blog of mine!

The following CSS class will display any color image in black and white. The vendor prefix allows the trick to work on any browser.

img.desaturate { 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

Source/Demo: http://demosthenes.info/blog/532/Convert-Images-To-Black–White-With-CSS

Page top shadow in CSS3

Here is a simple snippet to give your website a nice page top shadow. Easy to apply and visually pleasant!

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

Source/Demo: http://playground.genelocklin.com/depth/

Detecting double-clicks in CSS3

Believe it or not, it’s possible to detect when an element has been double-clicked by using just CSS, as demonstrated in the following code:

<div class="test3">
  <span><input type="text" value="&nbsp;" readonly="true" />
  <a href="http://google.com">Double click me</a></span>
</div>

<style type="text/css">
.test3 span {
	position: relative;
}
.test3 span a { 
	position: relative;
	z-index: 2; 
}
.test3 span a:hover, .test3 span a:active { 
	z-index: 4; 
}
.test3 span input { 
	background: transparent; 
	border: 0; 
	cursor: pointer; 
	position: absolute; 
	top: -1px; 
	left: 0; 
	width: 101%;  /* Hacky */
	height: 301%; /* Hacky */
	z-index: 3; 
}
.test3 span input:focus { 
	background: transparent; 
	border: 0; 
	z-index: 1; 
}
</style>

Source/Demo: http://css-tricks.com/examples/CSSDoubleClick/

Triangles in CSS3

Yes, it’s actually possible to draw triangles using only CSS. Although it’s probably not the best way of doing it, I still find this technique pretty useful and interesting.

/* create an arrow that points up */
div.arrow-up {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points down */
div.arrow-down {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points left */
div.arrow-left {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

Source/Demo: http://davidwalsh.name/css-triangles

Using CSS calc()

calc() works like a function and allow you to perform calculations to determine the size and shape of objects. It can be used anywhere a length is required.

/* basic calc */
.simpleBlock {
  width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

Source/Demo: http://davidwalsh.name/css-calc

Pure CSS text gradients

Text gradients have always been popular on the internet. Now with CSS3, it’s a lot easier to create beautiful gradients in a matter of minutes.

h2[data-text] {
	position: relative;
}
h2[data-text]::after {
	content: attr(data-text);
	z-index: 10;
	color: #e3e3e3;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Source: http://snipplr.com/view/49911/pure-css-text-gradients/

Disabling pointer events with CSS

The newly introduced pointer-events property allow you to deactivate pointer events on an element. For example, a link with the following class will not be clickable anymore.

.disabled { pointer-events: none; }

Source/Demo: http://davidwalsh.name/pointer-events

Stiched elements in CSS3

The following code snippet shows how to create a nice stitched look around any element. Nice!

p {
	padding: 5px 10px;
	margin: 10px;
	background: #ff0030;
	color: #fff;
	font-size: 21px;
	line-height: 1.3em;
	border: 2px dashed #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
	-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
	box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
	text-shadow: -1px -1px #aa3030;
}

Source: http://www.catswhocode.com/blog/snippets/stitched-elements-in-css3

Custom scrollbars with CSS3 and WebKit

Remember 10 years ago where almost anyone used Microsoft exclusive properties to customize the look of scrollbars? Well, now you can do the same with Webkit.

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: -webkit-linear-gradient(left, #547c90, #002640);
  border: 1px solid #333;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

Source/Demo: http://davidwalsh.name/custom-scrollbars

Blurry text with CSS3

A simple but very nice text blur effect. Easy and good-looking!

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Source/Demo: http://css-tricks.com/snippets/css/blurry-text/

Pure CSS corner ribbon

This code is a bit long, but it creates a fancy corner ribbon in pure CSS.

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>

And the CSS:

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

Source/Demo: http://jsfiddle.net/chriscoyier/H6rQ6/1/

Is your JavaScript code ugly or hard to read? If yes, no problem: Here is JS Beautifier, a handy tool to make your JS code more prettier and easier to read. JS Beautifier can also deobfuscate code, which can be very useful in several situations.
→ Visit JSBeautifier

JSconsole

When developing JavaScript, debugging is not always easy and finding errors in your code can be very time-consuming. This tool, named, JSconsole, allow easy online debugging of any JS code. A real time-saver!
→ Visit JSconsole

jsFiddle

jsFiddle is a complete playground for web developers. It allows you to edit JavaScript, HTML and CSS snippets and share, embed or tweet them.
→ Visit jsFiddle

JS Mini

Speed is always a concern when it comes to web development. As users don’t like to wait, you have to make sure that your code will be fast to load. To do so, you should definitely make your JavaScript and jQuery code lightweight using this online tool. Code can be reduced up to 60%.
→ Visit JS Mini

JavaScript Obfuscator

Sometimes you might want to prevent from people being able to have a look at your JavaScript code. The best solution is to obfuscate your code and make it a lot harder to understand for people. This handy tool allows you to obfuscate your code online.
→ Visit JavaScript Obfuscator

Regex Pal

Regular expressions are very useful in programming, but they can also be very tricky, especially for beginners. If you need to test a JavaScript regular expression, this website is the perfect tool to do so.
→ Visit Regex Pal

JS Lint

JS Lint is a very useful tool that takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location.
→ Visit JS Lint

JS String Escape

In JavaScript, special characters inside a String can really mess things up. The web server can read the JavaScript file, using the wrong encoding, the users browser can have the wrong encoding setting. A way to avoid that is to use escape codes. This online JavaScript escape tool does that automatically.
→ Visit JS String Escape

JS Pretty

JS Pretty is a free online JavaScript and jQuery beautifier tool that uncompresses and uncompacts your js code so it is readable and aligns it so it looks pretty.
→ Visit JS Pretty