Don’t like the default font used by WordPress editor? No problem, the following code will allow you to change it. Simply paste it to your theme functions.php file. You can define which font to use on line 5.

add_action( 'admin_head-post.php', 'cwc_fix_html_editor_font' );
add_action( 'admin_head-post-new.php', 'cwc_fix_html_editor_font' );

function cwc_fix_html_editor_font() { ?>

<style type="text/css">#editorcontainer #content, #wp_mce_fullscreen { font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; }</style>
<?php }

Source: http://devpress.com/blog/fixing-wordpress-3-2s-html-editor-font/

Quick and easy maintenance mode

Sometimes, you need to put your blog on hold while performing some maintenance. Many plugins are allowing you to do so, but here is a simpler solution: Just paste the following snippet into your functions.php file and save it. Your blog is now unavailable to anyone except administrators. Don’t forget to remove the code when you’re done with maintenance!

function cwc_maintenance_mode() {
    if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) {
        wp_die('Maintenance, please come back soon.');
    }
}
add_action('get_header', 'cwc_maintenance_mode');

Source: http://skyje.com/2011/05/wordpress-code-snippets/

Simpler login url

Would you like to be able to use a simpler url like http://website.com/login to login to your WordPress dashboard? If yes, just read this recipe to learn how to implement it on your own blog.

Open your .htaccess file (located at the root of your WordPress install) and add the following code. Remember to backup your .htaccess file before editing it!

RewriteRule ^login$ http://yoursite.com/wp-login.php [NC,L]

Source: http://www.wprecipes.com/simpler-wordpress-login-url

Disable theme switching

When working with clients, it can be good to keep the control of what they can do to prevent possible problems. For example, disabling theme switching can be a good idea, especially if the site you built heavily rely on the theme. To do so, just paste the code below into the functions.php file of the theme. Once done, the client will not be able to switch themes anymore.

add_action('admin_init', 'cwc_lock_theme');
function cwc_lock_theme() {
	global $submenu, $userdata;
	get_currentuserinfo();
	if ($userdata->ID != 1) {
		unset($submenu['themes.php'][5]);
		unset($submenu['themes.php'][15]);
	}
}

Source: http://sltaylor.co.uk/blog/disabling-wordpress-plugin-deactivation-theme-changing/

Disable RSS feed

By default, WordPress include the popular RSS functionnality, which is great for blogs. But if you’re using your WordPress install as a static site, having RSS feeds may become a bit confusing for your visitors.

This code will totally disable RSS feeds (As well as other formats) from your blog. Just paste the code into functions.php, and you’re done.

function cwc_disable_feed() {
	wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}
add_action('do_feed', 'cwc_disable_feed', 1);
add_action('do_feed_rdf', 'cwc_disable_feed', 1);
add_action('do_feed_rss', 'cwc_disable_feed', 1);
add_action('do_feed_rss2', 'cwc_disable_feed', 1);
add_action('do_feed_atom', 'cwc_disable_feed', 1);

Source: http://wpengineer.com/287/disable-wordpress-feed/

Filter custom post types by author in admin

Here is a function which adds a dropdown select control of users next to existing filters (by default, date). It also works in tandem with the built in author filtering which is available when you click on an author in on admin listing pages (by default on posts and pages).

As usual, the only thing you have to do to implement this code is to paste it into your functions.php file.

function cwc_restrict_manage_authors() {
        if (isset($_GET['post_type']) && post_type_exists($_GET['post_type']) && in_array(strtolower($_GET['post_type']), array('your_custom_post_types', 'here'))) {
                wp_dropdown_users(array(
                        'show_option_all'       => 'Show all Authors',
                        'show_option_none'      => false,
                        'name'                  => 'author',
                        'selected'              => !empty($_GET['author']) ? $_GET['author'] : 0,
                        'include_selected'      => false
                ));
        }
}
add_action('restrict_manage_posts', 'cwc_restrict_manage_authors');

Source: http://forrst.com/posts/WordPress_Custom_Post_Types_Filter_by_Author_in-s9p

Add post thumbnails to RSS feed

This very cool piece of code will get the post thumbnail and automatically add it to your RSS feeds. Paste the code into functions.php and save the file. Don’t forget that you need to use a theme that supports post thumbnails for this snippet to work.

function cwc_rss_post_thumbnail($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
        $content = '<p>' . get_the_post_thumbnail($post->ID) .
        '</p>' . get_the_content();
    }

    return $content;
}
add_filter('the_excerpt_rss', 'cwc_rss_post_thumbnail');
add_filter('the_content_feed', 'cwc_rss_post_thumbnail');

Source: http://snipplr.com/view.php?codeview&id=56180

Remove WordPress admin bar

Introduced in WordPress 3.X, the new “Admin bar” is an useful feature, but if you don’t like it, you can easily remove it. Just paste the following snippet into your functions.php file.

add_filter('show_admin_bar', '__return_false');

Source: http://speckyboy.com/2011/03/01/how-to-remove-the-admin-bar-from-wordpress-3-1/

Go to Source

Need a piece of code quickly? MicroJS is a brand new site which aim to provide JavaScript code snippet for most common tasks: Ajax, Json, DOM, Object-Oriented JavaScript, and more. A true gold mine to have in your bookmarks!
Visit http://microjs.com/

Diva.js

Diva is a Javascript frontend for viewing documents, designed to work with digital libraries to present multi-page documents as a single, continuous item. It is designed to work with a IIPImage server and will be an awesome tool for those working on library or bookstore websites. A demo is available here if you want to have a look.
Visit http://ddmal.music.mcgill.ca/diva/

Bookmarklet Generator

As you can guess, this tool is a bookmarklet generator: Simply paste your regular JavaScript code, press the button and you’ll get a bookmarklet – ready to be installed on your browser bar.
Visit http://benalman.com/code/test/jquery-run-code-bookmarklet/

jQAPI

Like any other jQuery developers, I spend a large amount of time digging in the documentation. jQAPI is a website which provides the jQuery documentation in a more user-friendly way, so it is now my reference site when I need any jQuery help.
Visit http://jqapi.com

heatmap.js

Day after day, JavaScript continues to surprise me with its endless possibilities: For example, heatmap.js allows you to generate web heatmaps with the html5canvas element based on your data. Easy and efficient!
Visit http://www.patrick-wied.at/static/heatmapjs/

Respond.js

Remember my article about adaptable layouts with CSS3 media queries? Respond.js is a small script that allow you to use CSS3 media queries on browsers that do not support it yet (Yes IE, we’re looking at you…).
Visit https://github.com/scottjehl/Respond/blob/master/respond.min.js

Modernizr

Modernizr is a script that helps older browsers to work almost as good as newest ones, so you can build modern applications that will work on IE6 and 7. Your clients will love it, that’s guaranteed.
Visit http://www.modernizr.com/

YepNope

YepNope aim is pretty simple: It answers yep, or nope. For example, ask YepNope is Modernizr is loaded. If yes, ask YepNope to do this, and if not, ask YepNope to do that. That’s simple as that, and very useful in many cases.
Visit http://yepnopejs.com/

Ligature.js

Ligature.js is, unsurprisingly, a script that adds pretty ligatures to any kind of text. A must-have for all typography lovers out here!
Visit http://code.google.com/p/ligature-js/

FitText.js

FitText is a very interesting tool, that allows the automatic resizing of a text regarding the size of its parent element. Just have a look to the website and resize your browser: The text will fit. Another very interesting tool for modern websites and applications!
Visit http://fittextjs.com/

Go to Source

Let’s start this compilation with an interesting effect created using only CSS3: A png image with a changing background. The background is using CSS3 transitions. Not the kind of effect you’ll put on your website, but definitely an interesting demo of what CSS3 can do.
View source: http://jsfiddle.net/chriscoyier/vhKhT/

Create adaptable layout using CSS3 media queries

CSS3 media queries allow you to adapt a web layout to the browser width. Which means that you can easily create an adaptable layout that fits both big displays and mobile devices. You probably already checked my article on that subject, so I’ve picked another informative tutorial written by webdesigner Nick La. A technique any web developer should know!
View tutorial: http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

Dim entire page when certain link is rolled over, css way

Very cool for web apps: Once a particular link is rolled over, the rest of the page is dimmed. This technique may also be a starting point for other great experiments.
View source: http://jsfiddle.net/chriscoyier/pVsKe/1/

Clipping text with CSS3 text-overflow

text-overflow is a new CSS3 property which allows you to define how to handle a text which is bigger than its container. This example will show you anything you need to know about this property. Unfortunely, as I’m writing this post text-overflow is only supported by Opera and IE9.
View source: http://www.456bereastreet.com/archive/201105/clipping_text_with_css3_text-overflow/

Full Browser Width Bars

Another goldie from Chris Coyier: In this tutorial, he’ll teach you how to create full browser width bars easily.
View source: http://css-tricks.com/examples/FullBrowserWidthBars/

CSS Mask-Image & Text

A great text effect using CSS3 and mask images. Unfortunately, the effect is not supported by some browsers, but it degrades gracefully. This effect will probably be very popular when CSS3 will be fully supported by all major browsers.
View source: http://trentwalton.com/2011/05/19/mask-image-text/

Image slider with CSS3 transitions

Who’s never heard of JavaScript sliders, such as NivoSlider? That kind of effect is very popular for the past two or three years. With the new CSS3 animations, it is now possible to enhance transitions between images. This tool, called Flux Slider, supports either jQuery or Zepto.js. It works on any browser supporting CSS3 transitions.
View source: http://blog.joelambert.co.uk/2011/05/05/flux-slider-css3-animation-based-image-transitions/

Flared Borders with CSS

Remember that time when you had to create images just to display a box with rounded corners? Thanks to the border-radius, this painful process is no longer needed. This very cool tutorial will show you how to create an element that flares into another using only CSS. The whole code degrades gracefully in older browsers.
View source: http://orderedlist.com/blog/articles/flared-borders-with-css/

Go to Source

Remove www in url

For SEO reasons, you might always remove (or use) the www prefix in your urls. The following snippet will remove the www from your website url and redirect any url with the www to the non-www version.

RewriteEngine On
RewriteCond %{HTTP_HOST} !^your-site.com$ [NC]
RewriteRule ^(.*)$ http://your-site.com/$1 [L,R=301]

Source: http://css-tricks.com/snippets/htaccess/www-no-www/

Prevent hotlinking

Hotlinking is a bad practice that consist of using the images from another site on yours. When you’re hotlinked by someone else, your bandwidth is used for someone else profit. Of course, you may want to prevent hotlinkers. Just add the following snippet to your .htaccess file after replacing the example urls by your own urls.

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]

Source:

Redirect all WordPress feeds to feedburner

Most bloggers are using Feedburner, a web service that lets you know how many people are reading your blog via feeds. If you’re using WordPress, you should redirect all WordPress feeds (rss, atom, etc) to your feedburner feed. Modify lines 2 and 3, and then paste this code to your .htaccess file.

<IfModule mod_alias.c>
 RedirectMatch 301 /feed/(atom|rdf|rss|rss2)/?$ http://feedburner.com/yourfeed/
 RedirectMatch 301 /comments/feed/(atom|rdf|rss|rss2)/?$ http://feedburner.com/yourfeed/
</IfModule>

Source: http://www.wprecipes.com/how-to-redirect-wordpress-rss-feeds-to-feedburner-with-htaccess

Create custom error pages

Tired of the old errors pages of your site? Just create some html files with the look you want, upload them to your server, and add the following to your .htaccess file:

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

Source: http://css-tricks.com/snippets/htaccess/custom-error-pages/

Force download of specific files

When offering some files such as mp3s, eps or xls, for download on your site, you may force download instead of letting the browser decide what to do.
This snippet will force the download of .xls and .eps files from your server.

<Files *.xls>
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</Files>
<Files *.eps>
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</Files>

Source: http://www.givegoodweb.com/post/30/forcing-a-download-with-apache-and-htaccess

Log PHP errors

This snippet is an interesting way to log errors from your php file into a log file. Just create a php_error.log file somewhere on your server, and add the snippet to your .htaccess file. Don’t forget to modify the log file location on line 7.

# display no errs to user
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
# log to file
php_flag log_errors on
php_value error_log /location/to/php_error.log

Source: http://css-tricks.com/snippets/htaccess/php-error-logging/

Remove file extensions from urls

File extensions may be useful to developers, but there’s absolutely no need for your site visitors to be able to see them. This snippet will remove the .html extension on any html files. Of course, this code can be easily adapted to remove extensions from other file extensions such as php.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Replace html with your file extension, eg: php, htm, asp

Source: http://eisabainyo.net/weblog/2007/08/19/removing-file-extension-via-htaccess

Prevent directory listing

On your web server, when a directory do not have an index file, Apache automatically create a list of all files from the current directory. If you do not wish that anyone can see which files are on your server, just add the following code to your .htaccess file to prevent automatic directory listing.

Options -Indexes

Reduce pages weight by compressing static data

Do you know that it is possible to send compressed data to the visitors, which will be decompressed by the client? This code will definitely save you (and your visitor) bandwidth and reduce your pages weight.

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Automatically add utf-8 charset to files

In order to avoid encoding problems, you can force a specific encoding directly on your .htaccess file. That way, you’ll ensure that your html documents will always render correctly, even if your forget to add a <meta http-equiv="Content-Type"> directive on your html pages.

<FilesMatch "\.(htm|html|css|js)$">
AddDefaultCharset UTF-8
</FilesMatch>

Source: http://www.askapache.com/htaccess/setting-charset-in-htaccess.html

Go to Source

• View Demo
• Download files

1 – Add HTML5 doctype

The first thing to do is create a valid HTML5 document. The HTML5 doctype is easier to remember than ones used for xhtml:

<!DOCTYPE html>
<html>
  ...

Create a file named index.html, or get the example files from my CSS3 media queries article to use as a basis for this tutorial.
In case you need it, the full HTML5 specs are available on the W3C website.

2 – Add .htaccess support

The file we’re going to create to cache our web page is called a manifest file. Before creating it, we first have to add a directive to the .htaccess file (assuming your server is Apache).

Open the .htaccess file, which is located on your website root, and add the following code:

AddType text/cache-manifest .manifest

This directive makes sure that every .manifest file is served as text/cache-manifest. If the file isn’t, then the whole manifest will have no effect and the page will not be available offline.

3 – Create the manifest file

Now, things are going to be more interesting as we create a manifest file. Create a new file and save it as offline.manifest. Then, paste the following code in it. I’ll explain it later.

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg

Right now, you have a perfectly working manifest file. The way it works is very simple: After the CACHE declaration, you have to list each files you want to make available offline. That’s enough for caching a simple web page like the one from my example, but HTML5 caching has other interesting possibilities.

For example, consider the following manifest file:

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css

NETWORK:
search.php
login.php

FALLBACK:
/api offline.html

Like in the example manifest file, we have a CACHE declaration that caches index.html and style.css. But we also have the NETWORK declaration, which is used to specify files that shouldn’t be cached, such as a login page.

The last declaration is FALLBACK. This declaration allows you to redirect the user to a particular file (in this example, offline.html) if a resource (/api) isn’t available offline.

4 – Link your manifest file to the html document

Now, both your manifest file and your main html document are ready. The only thing you still have to do is to link the manifest file to the html document.

Doing this is easy: simply add the manifest attribute to the html element as shown below:

<html manifest="/offline.manifest">

5 – Test it

Once done, you’re ready to go. If you visit your index.html file with Firefox 3.5+, you should see a banner like this one:

Other browser I’ve tested (Chrome, Safari, Android and iPhone) do not warn about the file caching, and the file is automatically cached.

Below you’ll find the browser compatibility of this technique: As usual Internet Explorer does not support it.

• IE: No support
• Firefox: 3.5+
• Safari: 4.0+
• Chrome: 5.0+
• Opera: 10.6+
• iPhone: 2.1+
• Android: 2.0+

Go to Source

This statement may sound pretty obvious, but actually many publicly available themes don’t pass W3C HTML or CSS validation. When building a theme, it is important to respect HTML and CSS standards so your code will be clean and (mostly) cross-browser compatible. A valid HTML/CSS theme is also a proof of quality development.

HTML, XHTML and HTML5 code can be checked on theW3C website. The W3C also have a free tool to check your CSS coding, althought with the rise of CSS3 and its vendor prefixes, it is pretty hard to obtain a 100% valid stylesheet.

Respect WordPress coding standards

Like most other open-source projects, WordPress have its own list of coding standards. This meticulous coding style convention is here to keep harmony among the thousands of themes and plugins availables and maintain a consistent style so the code can become clean and easy to read at a glance.

For example, the coding convention forbids to use PHP shorthand tag:

<? ... ?>
<?=$var?>

Instead, use full PHP tags:

<?php $var; ?>

The complete coding standard guide can be read on WordPress codex. On a personnal note, I really think that WordPress should recommend coding CSS in “blocks” instead of “lines”.

Don’t forget wp_head()

Within the <head> and </head> tags of most WordPress themes, you’ll find a function named wp_head(). This function may look useless to newcommers, but it is extremely important: Many plugins use this function to “hook” code in WordPress header. Without this function within your <head> and </head> tags, lots of plugins will not be able to work.

A similar function named wp_footer(); can be found in the footer.php file of most themes. Don’t forget it as well, it is used by plugins to hook code in your theme footer. For example, analytics.

Be careful when including hacks

Do you know my blog WPRecipes? In case you don’t, it is a place where I share WordPress hacks and code snippets. The site is quite popular among the community and I’m happy that many people seems to enjoy my hacks.

But last year, Gravity Forms developer Carl Hancock let me know that one of my hacks (Named Disable WordPress automatic formatting on posts using a shortcode) was intensively used on themes sold at Themeforest, and caused conflicts with Gravity Forms.

Of course, I felt sorry for the countless hours Carl and his team wasted in support due to the conflict between their plugin, and my hack. This is why hacks may be used on your own theme, or on a client theme, but you should not include hacks in a theme you’re going to distribute, excepted if you know exactly what you’re doing.

Start from something solid

In order to save time, most developers prefer starting coding from an existing theme. For example, I’ve used Cris Coyier’s Blank Theme as the starting point of most of the themes I’ve created in 2010 and 2011.

But don’t start from a finished plugin. I’ve seen themes coded over WooThemes and then re-released. Let me tell you, the code was an absolute nightmare!

If you’re looking for a rock solid basis to create your theme, give a go to Constellation: It is a “blank” HTML5/CSS3 theme, which the current CatsWhoCode theme derives from.

Use localized strings

When coding a WordPress theme or plugin, you have to think about those that doesn’t speak English. Using the PHP language, two very useful functions are available for you to create a translatable theme or plugin:

The first is the function _e(), which prints on screen the desired text, translated into the user language:

_e("Text to translate", "textdomain");

The second is __() wich is basically the same than _e(), but returns the text:

function say_something() {
    return __("Text to translate", "textdomain");
}

By using those functions, you make your work translatable in any language, which is a very great thing for people that blog in another language than English. Don’t forget to read my guide about making multilingual WordPress themes if you want to know more about the topic.

Prefix your php functions

It may looks like a detail at first, but prefixing your php functions is always a good practice. Why? Because most people would name their functions using common names such as display_stuff(). And if a theme developer named one of his functions with the same name that a function from a plugin the end user is using… Boom, the site is broken, and the user is not happy.

A bad example is to name your functions like this:

function display_stuff($stuff){
...
}

Instead, add a prefix such as your initials:

function cwc_display_stuff($stuff){
...
}

It do not require a big effort and it can avoid big problems for the non tech-savvy user.

Test content formating

A blog is used to display content. Then, why so many available themes do not comes with a style for HTML lists or blockquotes? To make sure users will be happy with your theme, you should make sure that all HTML elements looks good.

To do so, you can use a plugin named WP Dummy Content, which allow you to create posts, pages, categories and more so you can check how good you theme looks when it’s full of content.

Another tool to have in your tool box is the WP Lorem Ipsum Post Pack, a XML file that contains categories, sub-categories, pages, sub-pages, 30 test posts, tags, thumbnails via custom fields, and a “Testing the Elements” post so that you can test html elements, such as <h2>, <blockquote>, so you can test your theme in depth. Importing this XML is easy: Login to your dashboard, navigate to Tools → Import, and select the file.

Make sure your theme supports the latests functions

Do you think your theme is ready for public distribution? If yes, you should always make a final checking using the Theme-Check plugin, which is an easy way to test your theme and make sure it’s up to spec with the latest theme review standards.

Theme Check can be installed as any other plugins, and will let you know about any coding mistakes such as the use of a deprecated function.

Release your theme as GPL

With the success of WordPress, people created companies and started to sell “premium” themes. Most of them with released under the terms of the GPL licence, but several theme vendors chose to go with a licence that may, in their opinion, give them a better protection against piracy.

Though, WordPress team stated numerous times that themes have to be GPL compliant.

Although I am not a GPL fanatic, most WordPress users are, and trying to release a theme that is not GPL compliant will make you a pariah, and might even get you a lawsuit. So, don’t do something stupid: Respect WordPress licence, or choose another platform to work on.

Any other useful tip? Feel free to share it in a comment!

Go to Source

Are you surprised that Internet Explorer 6/8 CSS3 support is almost non existent? I guess most of you aren’t. Unfortunately, some clients may want you to create a website that look like in a modern browser in IE. This is when CSS3 Pie is useful: It allows you to use most of the CSS3 cool features on IE.
→ Visit CSS3 Pie

CSS3 Builder

With this tool, you can design complex CSS3 boxes using an interface looking exactly like the one used for applying Photoshop effects. Definitely a great tool to save lots of time.
→ Visit CSS3 Builder

CSS3 Drop shadow generator

This one is quite similar to CSS3 builder, just use the sliders to visually design your drop shadow. Once done, just copy the CSS code which have been automatically created. Paste it to your css file, and you’re ready to go!
→ Visit CSS3 Drop shadow generator

Cascader

This tool isn’t CSS3 specific, but it is so useful that it would have been a shame not to include it on that list. Cascader lets you input some HTML code and it will detect all inline CSS, remove it from the HTML and add it to a separate stylesheet. A true time saver for those looking for clean HTML.
→ Visit Cascader

Border Radius.com

border-radius is one of the most popular CSS3 properties. Those who remember how boring it was to create boxes with rounded corners using images certainly know why. This tool allow you to quickly create a box and get the appropriate CSS3 code.
→ Visit Border Radius.com

Button Maker

CSS3 allows you to create awesome buttons. This tool, created by Chris Coyier, makes CSS3 button design extremely easy: Just pick colors, adjust radius, and get the code, ready to be pasted into your CSS file.
→ Visit Button Maker

CSS3 Generator

Need help with CSS3 declarations? This very handy generator helps you create declarations for most popular CSS3 properties: @font-face, RGBA, text-shadow, border-radius, and more.
→ Visit CSS3 Generator

Modernizr

Modernizr is a small script that detect support for CSS3 and adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. For example, if the browser does not support the multiple backgrounds functionality, a no-multiplebgs class will be added to the <html> element. then it will be pretty easy for you to fall back.
→ Visit Modernizr

HTML5 & CSS3 Support

Need to know if Internet Explorer 8 supports the text-shadow property? Just have a look to this very useful chart, which reveals CSS3 support for all major browsers. Definitely a page to have in your bookmarks!
→ Visit HTML5 & CSS3 Support

CSS3 Gradient Generator

As you can guess, this tool is a gradient generator. Just pick your colors using the picker, preview it in the preview area, and grab your ready-to-be-pasted code. It’s easy as that!
→ Visit CSS3 Gradient Generator

CSS3 Please

CSS3 Please is another very helpful site which allow you to copy and paste most common CSS3 declarations. It also has a preview area so you can live test your declarations.
→ Visit CSS3 Please

CSS3 Cheat Sheet

When coding, cheat sheets are very helpful to quickly remember properties and their syntax. Smashing Magazine has created this CSS3 cheat sheet that you can download and print. A preview version in .gif format is also available here.
→ Visit CSS3 Cheat Sheet

Go to Source

• View demo (Horizontally resize your browser to view it in action)
• Download files

Creating the default layout

The first step of this tutorial is obviously to create a HTML page. I chose to make a simple HTML5 page with only a header image, a title, and some text. Copy the following code and paste it into a file named index.html.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
   	<title>Cats Who Code demo</title>
	<link href="style.css" type="text/css" rel="stylesheet" media="screen">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
</head>

<body>
	<div id="container">
		<header class="ma-class-en-css">
			<h1 id ="logo"><a href="#">Cats Who Code</a></h1>
		</header>

		<div id="content">
       		<h2>Paris, France</h2>
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula massa. Donec consequat, risus nec viverra condimentum, elit velit dignissim dui, id congue sapien leo tincidunt est. Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce sodales fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapien eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget faucibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id aliquam nec, vulputate vitae mauris. Integer gravida, neque eu placerat egestas, urna metus bibendum nisl, quis congue felis velit id diam. Quisque non tortor at turpis facilisis placerat quis sed felis. Ut eget ipsum dolor, id lacinia leo. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis. Morbi ultrices risus vulputate magna dignissim sed ultricies arcu tristique. Sed non facilisis sapien.</p>

			<p>Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate tortor, in iaculis ipsum orci vitae libero. Vestibulum laoreet accumsan erat vel pretium. Ut turpis elit, ultricies id accumsan non, condimentum feugiat neque. Nam ut erat urna, a porta augue. Donec vel porttitor magna. Cras eget tortor eget ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet accumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gravida velit at nulla imperdiet varius.</p>
        </div><!-- #content -->

		<footer>A demo by <a href="http://www.catswhocode.com">CatsWhoCode</a></footer>
	</div><!-- #container -->
</body>
</html>

Once done, we have to add a stylesheet to our index.html page. The following code is the basic styling for the page. Paste it into a file named style.css.

*{
	/* On a production site, use a real reset instead of this! */
	margin:0;
	padding:0;
}            

body{
	background:#f5f5f5;
	font-family:"Lucida Grande", Arial;
	font-size:13px;
	line-height:21px;
	color:#444;
}     

p{
	margin:15px 0;
}              

h2{
	margin-top:20px;
}

#container{
	background:#fff;
	border-left:1px #ddd solid;
	border-right:1px #ddd solid;
	border-bottom:1px #ddd solid;
	width:600px;
	margin:0 auto;
}  

header h1#logo a{
	text-indent:-9999px;
	display:block;
	width:600px;
	height:82px;
	background:url(image-med.jpg) no-repeat 0 0;
}             

#content{
	width:95%;
	margin:0 auto;
}

footer{
	text-align:center;
	width:100%;
	display:block;
	font-size:11px;
}

Right now, if you look to your index.html page through your web browser, you’ll see something like the screenshot below. Nothing spectular, right? Keep reading, we’re going to dive into the interesting part.

Using CSS3 media queries to make our layout fit in all screen resolutions

If you had a look to your index.html page with a screen resolution bigger than 800*600, you might find the layout is really small. So, what about allowing large screens to display a bigger version, while still using the small version for people with lower resolutions?

This is what CSS3 media queries can do for you. Open your style.css file and paste the code below at the end of the file:

@media screen and (min-width:1200px){
	#container{
		width:1100px;
	}  

	header h1#logo a{
		width:1100px;
		height:150px;
		background:url(image.jpg) no-repeat 0 0;
	}                          

}

Now, have a look at index.html again: The layout is indeed bigger. Horizontally resize the window size… The site switches back to the small layout. How great is that?

As you can see, there’s nothing complicated at all in implementing this technique. @media screen tells the browser this applies only for screens, because we don’t want to resize anything for print. And and (min-width:1200px) specifies that the screen must have a 1200px minimum width. If these requirements are met, then the code within the parenthesis is taken into consideration by the browser, and redefines previous styles.

Now that we created a bigger version for bigger screens, what about a very small version for mobiles? Paste this code into style.css and you’re done.

@media screen and (max-width:767px){
	#container{
		width:320px;
	} 

	header h1#logo a{
		width:320px;
		height:44px;
		background:url(image-small.jpg) no-repeat 0 0;
	}                           

}

Dealing with images

Images always play an important part of a website. So, let’s add an image to our website layout. Re-open index.html and insert the following code just before the first closing </p>

<img src="notre-dame.jpg" alt="Photo by Wlappe">

If you have a look to index.html with a big screen, no problem. But if you resize the window horizontally…ouch.

The solution to that problem is quite simple: As we resize the website layout, we have to resize images as well. The max-width CSS property is here to help.

Insert the following on your style.css file:

img {
	max-width:570px;
	margin:10px 0;
}

A default image size is now defined. Now we can setup sizes for big screens as well as mobile devices:

@media screen and (min-width:1200px){
	img {
		max-width:1000px;
	}
}

@media screen and (max-width:767px){
	img {
    	max-width:305px;
	}
}

Now, resize your browser: Images are resized with the layout!

Limitations

Guess what? Internet Explorer (excepted the newly released IE9) doesn’t know anything about the CSS @media property. Which means that even on a big screen, IE users will see the default layout.

Hope you enjoyed this tutorial. Have a great day!

Go to Source

• View demo
• Read jPlayer documentation
• Download files

Creating the database

First, create a new SQL database. Let’s call it radio. Once done, we have to create a table. We only need 4 fields: An id, the mp3 url, the artist name and the song title. Here is the SQL code to use in order to create the table named songs:

CREATE TABLE `songs` (
  `song_id` int(11) NOT NULL AUTO_INCREMENT,
  `url` varchar(500) NOT NULL,
  `artist` varchar(250) NOT NULL,
  `title` varchar(250) NOT NULL,
  PRIMARY KEY (`song_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

We now have a database and a table to store basic information about songs we’re going to play on our radio. Now we have to populate the table. Choose some mp3 files and insert the following statement into your database:

INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/songurl.mp3', 'Artist name', 'Song name');
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/anothersongurl.mp3', 'Another artist', 'Another song');
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/onemoresongurl.mp3', 'One more artist', 'One more song');

Right now, the database is ready.

Creating the HTML

Of course, we have to create a HTML page. First, grab your copy of jPlayer, the jQuery plugin we’re going to use to create the online radio. Unzip the file, then upload the js/ and skin/ to your server.

Then, create a file named demo.html on your server and insert the following code into it:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
	<title>Online radio using jQuery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
</head>

<body>
	<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div class="jp-audio">
			<div class="jp-type-single">
		    	<div id="jp_interface_1" class="jp-interface">
					<ul class="jp-controls">
						<li><a href="#" class="jp-play" tabindex="1">play</a></li>
						<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
						<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
					</ul>

					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>

					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>

					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
				</div>

				<div id="jp_playlist_1" class="jp-playlist">
					<ul>
						<li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

This code has been taken from jPlayer’s demos. It is a simple html code that insert the necessary JavaScript files (jQuery + the jPlayer plugin) as well as the CSS and html used to display the music player. Right now, the player do not display correctly: We still have to use some jQuery to animate it. We’ll see that in a minute.

Getting files from the database

Now, we have to create a PHP file that will get a random song from the database, and display the file url as well as the artist and song name so we can grab it using Ajax. First, get your copy of ezSQL that I chose to use to manage my database queries. (Full ezSQl tutorial available here) Unzip the files and upload ez_sql_core.php and ez_sql_mysql.php to the server.

Once done, create a file named getsong.php on the server. Paste the following code in it:

<?php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){ 

	include_once "ez_sql_core.php";
	include_once "ez_sql_mysql.php";
	$db = new ezSQL_mysql('db_user','db_password','db_name','db_host'); 

	$song = $db->get_row("SELECT * FROM songs ORDER BY RAND() LIMIT 1");

	$artist = $song->artist;
	$songname = $song->title;
	$url = $song->url;
	$separator = '|';
	echo $url.$separator.$artist.$separator.$songname;
} 

?>

Nothing complicated: I’ve included the ezSQL files needed, created a connection to the database, then requested one row from the songs table. The 3 values (File url, artist, and song name) are displayed on screen, separated by a pipe.

The conditional statement is used to detect Ajax requests and prevent people from being able to display songs url by simply typing http://www.yousite.com/getsong.php on their browser address bar.

Making it work

Alright, we’re almost done. What we need now is to use some jQuery to request a song using Ajax and our getsong.php file. Then, we’ll use jPlayer to play it.

Open your demo.html and paste the following after line 10:

<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			var data = $.ajax({
			  url: "getsong.php",
			  async: false
			 }).responseText;

		    var string = data.split('|');
			$(this).jPlayer("setMedia", {
				mp3: string[0]
			}).jPlayer("play");

			$('#artist').html(string[1]);
			$('#songname').html(string[2]);
		},
		ended: function (event) {
			var data = $.ajax({
			  url: "getsong.php",
			  async: false
			 }).responseText;

		    var string = data.split('|');
			$(this).jPlayer("setMedia", {
				mp3: string[0]
			}).jPlayer("play");

			$('#artist').html(string[1]);
			$('#songname').html(string[2]);
	    },
		swfPath: "js",
		supplied: "mp3"
	});
});
//]]>
</script>

Now, if you save the file and point your browser to http://www.yoursite.com/demo.html, your radio should work: It gets a song from the database and play it. When the song’s over, another one is automatically selected.

There’s probably better ways to write this code (It has a lot of redundant code, which is always a bad practice) so don’t hesitate to write a comment if you have a better version to suggest.

How to enhance the script

While we have a working radio, it is very basic and can be enhanced: For example, we should exclude song already played (using songs ids stored in the database) or even better, create playlists. I haven’t worked on it yet, but if you are interested let me know in a comment and I might write a tutorial about it.

Go to Source

HTML5 introduced useful new form elements as such as sliders, numeric spinners and date pickers. This tutorial will show you how to create a form with HTML5, and make it look really cool with CSS3. A great way to get started in both CSS3 and HTML5.
» View tutorial

CSS3 form without images and JavaScript

This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. For those who can’t understand French, just get the source code and have fun with it.
» View tutorial

Stylish Contact Form with HTML5 & CSS3

I really love what British web developer Chris Spooner creates. This time, he’s back with a quality tutorial about creating a form and using CSS3 to style it. The result is, as you can see above, really cool.
» View tutorial

Beautiful CSS3 Search Form

Most search forms (Including the one I use on this site!) looks boring. Using a little CSS3, you can turn the old and boring form into something definitely modern and cool. A must read tutorial.
» View tutorial

Prettier Web Form with CSS 3

This pretty simple tutorial will show you how you can create a form using some basic CSS3 properties, such as box-shadow.
» View tutorial

Slick CSS3 Login Form

Once again, a simple tutorial to create a simple form using CSS3 but absolutely no images.
» View tutorial

Glowform: Amazing CSS3 form

Wow! This form looks really great, isn’t it? This form do not use any images, only CSS3. I urge you to read this tutorial and the form source code, because you’ll learn lots of great techniques about creating killer forms without using images.
» View tutorial

Clean and Stylish CSS3 Form

This form is simple, clean and stylish. Nothing fancy but techniques you’ll may use on most websites you’ll make.
» View tutorial

Signup form with CSS3 and jQuery

jQuery is definitely a great tool to make forms more usable. This tutorial will show you how to create a good looking form using CSS3, and how to make it more user-friendly with some jQuery.
» View tutorial

jQuery & CSS3 Drop-down menu with integrated forms

At last but not least, here is a tutorial about how to create a CSS3/jQuery dropdown menu with integrated forms. No doubt, your clients will love it!
» View tutorial

Go to Source

When your project isn’t based on a CMS or framework, it can be a good idea to implement a simple caching system on your pages. The following code snippet is very simple, but works well for small websites.

<?php
    // define the path and name of cached file
    $cachefile = 'cached-files/'.date('M-d-Y').'.php';
    // define how long we want to keep the file in seconds. I set mine to 5 hours.
    $cachetime = 18000;
    // Check if the cached file is still fresh. If it is, serve it up and exit.
    if (file_exists($cachefile) && time() - $cachetime < filemtime($cachefile)) {
    include($cachefile);
        exit;
    }
    // if there is either no file OR the file to too old, render the page and capture the HTML.
    ob_start();
?>
    <html>
        output all your html here.
    </html>
<?php
    // We're done! Save the cached content to a file
    $fp = fopen($cachefile, 'w');
    fwrite($fp, ob_get_contents());
    fclose($fp);
    // finally send browser output
    ob_end_flush();
?>

» Credit: Wes Bos

Calculate distances in PHP

Here is a very handy function, which calculate the distance from a point A to a point B, using latitudes and longitudes. The function can return the distance in miles, kilometers, or nautical miles.

function distance($lat1, $lon1, $lat2, $lon2, $unit) { 

  $theta = $lon1 - $lon2;
  $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) +  cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
  $dist = acos($dist);
  $dist = rad2deg($dist);
  $miles = $dist * 60 * 1.1515;
  $unit = strtoupper($unit);

  if ($unit == "K") {
    return ($miles * 1.609344);
  } else if ($unit == "N") {
      return ($miles * 0.8684);
    } else {
        return $miles;
      }
}

Usage:

echo distance(32.9697, -96.80322, 29.46786, -98.53506, "k")." kilometers";

» Credits: PHP Snippets.info

Convert seconds to time (years, months, days, hours…)

This useful function will convert a time in seconds to a time in years, months, weeks, days, and so on.

function Sec2Time($time){
  if(is_numeric($time)){
    $value = array(
      "years" => 0, "days" => 0, "hours" => 0,
      "minutes" => 0, "seconds" => 0,
    );
    if($time >= 31556926){
      $value["years"] = floor($time/31556926);
      $time = ($time%31556926);
    }
    if($time >= 86400){
      $value["days"] = floor($time/86400);
      $time = ($time%86400);
    }
    if($time >= 3600){
      $value["hours"] = floor($time/3600);
      $time = ($time%3600);
    }
    if($time >= 60){
      $value["minutes"] = floor($time/60);
      $time = ($time%60);
    }
    $value["seconds"] = floor($time);
    return (array) $value;
  }else{
    return (bool) FALSE;
  }
}

» Credits

Force file download

Some files, such as mp3, are generally played throught the client browser. If you prefer forcing download of such files, this is not a problem: The following code snippet will do that job properly.

function downloadFile($file){
        $file_name = $file;
        $mime = 'application/force-download';
	header('Pragma: public'); 	// required
	header('Expires: 0');		// no cache
	header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
	header('Cache-Control: private',false);
	header('Content-Type: '.$mime);
	header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
	header('Content-Transfer-Encoding: binary');
	header('Connection: close');
	readfile($file_name);		// push it out
	exit();
}

» Credit: Alessio Delmonti

Get current weather using Google API

Want to know today’s weather? This snippet will let you know, in only 3 lines of code. The only thing you have to do is to replace ADDRESS by the desired adress, on line 1.

$xml = simplexml_load_file('http://www.google.com/ig/api?weather=ADDRESS');
  $information = $xml->xpath("/xml_api_reply/weather/current_conditions/condition");
  echo $information[0]->attributes();

» Credit: Ortanotes

Basic PHP whois

Whois services are extremely useful to get basic information about a domain name: owner, creation date, registrar, etc. Using PHP and the whois unix command, it is extremely easy to create a basic whois PHP function. Please note that the whois unix command must be installed on your server for this code to work.

$domains = array('home.pl', 'w3c.org');

function creation_date($domain) {
    $lines = explode("\n", `whois $domain`);
    foreach($lines as $line) {
        if(strpos(strtolower($line), 'created') !== false) {
            return $line;
        }
    }

    return false;
}

foreach($domains as $d) {
    echo creation_date($d) . "\n";
}

» Credits: Snipplr

Get latitude and longitude from an adress

With the popularity of the Google Maps API, developers often needs to get the latitude and longitude of a particular place. This very useful function takes an adress as a parameter, and will return an array of data containing both latitude and longitude.

function getLatLong($address){
	if (!is_string($address))die("All Addresses must be passed as a string");
	$_url = sprintf('http://maps.google.com/maps?output=js&q=%s',rawurlencode($address));
	$_result = false;
	if($_result = file_get_contents($_url)) {
		if(strpos($_result,'errortips') > 1 || strpos($_result,'Did you mean:') !== false) return false;
		preg_match('!center:\s*{lat:\s*(-?\d+\.\d+),lng:\s*(-?\d+\.\d+)}!U', $_result, $_match);
		$_coords['lat'] = $_match[1];
		$_coords['long'] = $_match[2];
	}
	return $_coords;
}

» Credits: Snipplr

Get domain favicon using PHP and Google

These days, many websites or webapps are using favicons from other websites. Displaying a favicon on your own site is pretty easy using Google and some PHP.

function get_favicon($url){
  $url = str_replace("http://",'',$url);
  return "http://www.google.com/s2/favicons?domain=".$url;
}

» Credits: Snipplr

Calculate Paypal fees

Ah, Paypal fees. Every person who ever used the popular online payment service had to pay their fees. So what about a PHP function to easily calculate the fee for a specific amount?

function paypalFees($sub_total, $round_fee) {

	// Set Fee Rate Variables
	$fee_percent = '3.4'; // Paypal's percentage rate per transaction (3.4% in UK)
	$fee_cash    = '0.20'; // Paypal's set cash amount per transaction (£0.20 in UK)

	// Calculate Fees
	$paypal_fee = ((($sub_total / 100) * $fee_percent) + $fee_cash);

	if ($round_fee == true) {
		$paypal_fee = ceil($paypal_fee);
	}

	// Calculate Grand Total
	$grand_total = ($sub_total + $paypal_fee);

	// Tidy Up Numbers
	$sub_total   = number_format($sub_total, 2, '.', ',');
	$paypal_fee  = number_format($paypal_fee, 2, '.', ',');
	$grand_total = number_format($grand_total, 2, '.', ',');

	// Return Array
	return array('grand_total'=>$grand_total, 'paypal_fee'=>$paypal_fee, 'sub_total'=>$sub_total);
}

» Credits: Snipplr

(Last snippet have been removed due to an error, sorry)

Go to Source

Before installing a plugin on your blog, the first thing to do is to localize theme strings. PHP and the Gettext tool (which allow easy string translation) have two functions: _e() and __().

The only difference between _e() and __() is that _e() echo a string while __() is used to assign a string to a variable.

Let’s say your theme have the following code:

<div class="content">
    <h1>Welcome to my site!</h1>
    <p>I hope you'll like it.</p>
</div><!-- #content -->

What you have to do is to wrap all strings into the _e() or __() functions, as shown in the example below:

<div class="content">
    <h1><?php _e("Welcome to my site!"); ?></h1>
    <p><?php _e("I hope you'll like it."); ?></p>
</div><!-- #content -->

Once done, your string will be recognized by the WPML plugin (we’re going to install it) as translatable strings.

2 – Install and configure the WPML plugin

Now that your theme is fully localized, the next step is to install the WPML plugin, which will make our blog multilingual. Install the plugin using your WordPress dashboard, or get it here. Activate the plugin, then you’ll see a “WPML” link on your WordPress dashboard. Click on it and add at least one language.

3 – Translate theme strings

Once done, you now have to translate your theme strings in French. To do so, click on the “Theme and plugins localization” link located under the “WPML” tab. On the “Theme and plugins localization” page (See screenshot below) choose the Translate the theme by WPML option, so you’ll be able to directly provide translations in your WordPress dashboard. Though, if your prefer using a .mo file, the WPML plugin allows it as well, so feel free to choose your favorite option.

4 – Translate site content

Now, you have to translate your site/blog content. WPML provide an easy way to do it: Simply edit one of your posts or pages and have a look at the right side of the screen: you’ll see a box where you can create a translation for each of your posts and pages.

Translating your site content can take a while if your site have lots of pages, but thanks to the WPML plugin it is pretty easy to do.

5 – Translating your site menu

Right now, almost all your site is fully multilingual. Though, you still have to translate your navigation menu. To do so, simply go to “Appearance”, “Menus” and select your current menu. As you can see on the screenshot below, WPML has added some new options to allow you to create a new menu per language. How cool is that?

Right now, you should have a fully multilingual website. Hope you enjoyed this tutorial!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Easily create multilingual sites with WordPress

Go to Source

Due to the popularity of mobile devices such as the iPhone or the BlackBerry, websites are now going mobile. jQuery Mobile is a complete framework that allow you to easily create killer mobile sites. If you want an example or a demo, just have a look to this tutorial I’ve wrote a few months ago.
And if you want me to build your mobile site, I’m your cat man. Just send me an email.

»Visit jQuery Mobile

Nivo Slider

Ah, image sliders. Nothing new about them, right? Sure, but Nivo Slider is so great that I had to write about it. This jQuery plugin allow you to create images/content slider efficiently and easily.

»Visit Nivo Slider

jCycle

jCycle is a new jQuery plugin dedicated to add smooth transitions to images. It supports 6 different transition types and is pretty easy to use. Freelancers, your clients will love it!

»Visit jCycle

Uniforms

Web forms are an essential aspect of a website, but theyr visual aspect is often neglected. Uniforms helps you to give a gorgeous look and feel to forms elements such as radio buttons or select drop downs, which are generally a pain to style using pure CSS.

»Visit Uniforms

Columnizer

Thanks to CSS3, it is now possible to display a text on X different columns easily. But as you can guess, Internet Explorer doesn’t support CSS3 yet, which means that we have to find an alternative solution to use columns on the web. Happilly, columnizer is here to help. This neat jQuery plugin will help you to render your text on columns easily.

»Visit Columnizer

Isotope

Isotope is definitely an incredible jQuery plugin which allow you to create dynamic and intelligent layouts. You can hide and reveal items with filtering, re-order them with sorting, and a lot more. Of course, Isotope allow lots of cool animations. A definitive must-see for all web developers.

»Visit Isotope

jqDnR

jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. The plugin is simple, lightweight (972 bytes) and extremely easy to implement. A great way to make your website more user-friendly.

»Visit jqDnR

jQuery Touchwipe

Do you want to create awesome images galleries for your mobile websites? If yes, then jQuery Touchwipe won’t deceive you. This plugin allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery. The plugin is only 1kb and works on Android as well.

»Visit jQuery Touchwipe

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

8 awesome new jQuery plugins to have in your toolbox

Go to Source

Due to the popularity of mobile devices such as the iPhone or the BlackBerry, websites are now going mobile. jQuery Mobile is a complete framework that allow you to easily create killer mobile sites. If you want an example or a demo, just have a look to this tutorial I’ve wrote a few months ago.
And if you want me to build your mobile site, I’m your cat man. Just send me an email.

»Visit jQuery Mobile

Nivo Slider

Ah, image sliders. Nothing new about them, right? Sure, but Nivo Slider is so great that I had to write about it. This jQuery plugin allow you to create images/content slider efficiently and easily.

»Visit Nivo Slider

jCycle

jCycle is a new jQuery plugin dedicated to add smooth transitions to images. It supports 6 different transition types and is pretty easy to use. Freelancers, your clients will love it!

»Visit jCycle

Uniforms

Web forms are an essential aspect of a website, but theyr visual aspect is often neglected. Uniforms helps you to give a gorgeous look and feel to forms elements such as radio buttons or select drop downs, which are generally a pain to style using pure CSS.

»Visit Uniforms

Columnizer

Thanks to CSS3, it is now possible to display a text on X different columns easily. But as you can guess, Internet Explorer doesn’t support CSS3 yet, which means that we have to find an alternative solution to use columns on the web. Happilly, columnizer is here to help. This neat jQuery plugin will help you to render your text on columns easily.

»Visit Columnizer

Isotope

Isotope is definitely an incredible jQuery plugin which allow you to create dynamic and intelligent layouts. You can hide and reveal items with filtering, re-order them with sorting, and a lot more. Of course, Isotope allow lots of cool animations. A definitive must-see for all web developers.

»Visit Isotope

jqDnR

jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. The plugin is simple, lightweight (972 bytes) and extremely easy to implement. A great way to make your website more user-friendly.

»Visit jqDnR

jQuery Touchwipe

Do you want to create awesome images galleries for your mobile websites? If yes, then jQuery Touchwipe won’t deceive you. This plugin allows you to obtain the wipe event on an iPhone, iPad or iPod Touch which can be used for example to scroll through an image gallery. The plugin is only 1kb and works on Android as well.

»Visit jQuery Touchwipe

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

8 awesome new jQuery plugins to have in your toolbox

Go to Source

By default, WordPress editor don’t allow html tags wich aren’t compliant with the XHTML 1.0 standard. For example, iframes will be stripped out by the editor. If for some reason you have to insert an iframe into a post or page, this can be very frustrating.

The code below will force the editor to accept more tags. Just paste it into your theme functions.php file, save it, and you’re done.

function fb_change_mce_options($initArray) {
	$ext = 'pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

» Source: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Set HTML editor as the default

I know a lot of tech-savvy persons who don’t really like WordPress “visual” editor. Personally, I don’t use it because I’m used to writing HTML, and also because WYSIWYG editors are more likely to produce bad, not valid or dirty code.

If you prefer using the HTML editor, then what about making it your blog default? Just paste the line below into your theme functions.php file, and you’re done.

add_filter('wp_default_editor', create_function('', 'return "html";'));

» Source: http://www.wprecipes.com/how-to-set-html-editor-as-the-default-in-wordpress

Set default content in WordPress editor

Do you always insert the same text on all your posts, for exemple to tell people to subscribe to your rss feed? If yes, you should definitely set up WP to have it automatically inserted in the editor.

Open your functions.php file, and paste this code. That’s all you need to do to define some default content.

add_filter( 'default_content', 'my_editor_content' );

function my_editor_content( $content ) {
	$content = "If you enjoyed this post, make sure to subscribe to my rss feed.";
	return $content;
}

» Source: http://justintadlock.com/archives/2009/04/05/how-to-preset-text-in-the-wordpress-post-editor

Add your language to spell check

By default, WordPress have an English spellchecker so you can check mistakes in your posts (Too bad it doesn’t work with grammar!). But, what if you blog in another language than English?

If you want to add another language to WordPress spellcheck, that’s actually quite easy to do. Paste the following into functions.php to add French to the spellchecker.

function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+French=fr, English=en';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

» Source: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Add buttons to WordPress editor

TinyMCE (The name of the WYSIWYG editor used by WordPress) have some buttons that allow you to make some text bold, insert paragraphs, and so on.
Want to insert a custom button? It’s not so hard at all. The following code show how you can do it easily. Just paste it to your functions.php file and a “Youtube” button will be displayed into your editor. Please note that this code add a button to the editor, but do not trigger any action. If you’d like to get more info about custom buttons, have a look at the source site.

function add_youtube_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_youtube_tinymce_plugin');
     add_filter('mce_buttons', 'register_youtube_button');
   }
}

add_action('init', 'add_youtube_button');

function register_youtube_button($buttons) {
   array_push($buttons, "|", "brettsyoutube");
   return $buttons;
}

function add_youtube_tinymce_plugin($plugin_array) {
   $plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
   return $plugin_array;
}

» Source: http://brettterpstra.com/adding-a-tinymce-button/

Set different editor stylesheets for different post types

Cutom post types are definitely one of the best new things added to WordPress last year. Now, you probably created some post types to display your portfolio or some code snippets. So, what about using a different stylesheet for your editor, depending on the type of the post you’re currently writing?

Just paste the following code into your functions.php file. You’ll have to adapt it a bit, depending on your post types. Don’t forget to change the stylesheets names as well.

function my_editor_style() {
    global $current_screen;
    switch ($current_screen->post_type) {
    case 'post':
        add_editor_style('editor-style-post.css');
        break;
    case 'page':
        add_editor_style('editor-style-page.css');
        break;
    case 'portfolio':
        add_editor_style('editor-style-portfolio.css');
        break;
    }
}
add_action( 'admin_head', 'my_editor_style' );

» Source: http://wpstorm.net/2010/04/editor-styles-custom-post-types-wordpress-3-0/

Display hidden buttons in TinyMCE

By default, the TinyMCE editor have buttons for most common tasks such as bold text, italic, titles, etc. But you may need other text formatting options, like, for example, horizontal rules.

To reveal hidden buttons, simply add this code to your functions.php file:

function enable_more_buttons($buttons) {
  $buttons[] = 'hr';
  $buttons[] = 'fontselect';
  $buttons[] = 'sup'; 

  // etc, etc... 

  return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");

The available buttons are: bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument, and separator.
» Source: http://www.sycha.com/wordpress-add-hr-button-tinymce-visual-editor

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Killer hacks to enhance WordPress editor

Go to Source

OpenBook – Magazine theme

Back in 2008, when “magazine” themes where the absolute hype, I’ve released OpenBook, a “magazine” theme inspired by Darren Hoyt’s Mimbo. OpenBook was release on WPHacks, and was downloaded more than 500 times that year.

Just two months ago, I’ve re-released OpenBook in a new version, which is 100% compatible with WordPress 3.0+. This new version includes wp_nav_menu() support, sidebar widgets, and the theme have a complete custom control panel where you can set-up its options.
» Download OpenBook or view the live demo.

Snippet – Thematic child theme

Theme frameworks are quite popular these days. Most are premium themes (Genesis, Thesis) but the best one in my opinion is 100% free. This framework is called Thematic.

I’ve used Thematic intensively last year, on Cats Who Code, my NYC tourism blog Visiter New York and the now abandonned blog PHP Snippets. On this last site, I’ve created a child theme named Snippet: It is simple, clean and perfect for a developer. As I know most of CWC readers are developers, I thought some of you would definitely enjoy it.

» Download Snippet or view the live demo.

jQuery Mobile – Mobile theme

If you’re a CWC reader for some months, you probably remember my How to create a mobile WordPress theme with jQuery Mobile article, which was a tutorial about creating a mobile theme for your WordPress blog, using the excellent framework jQuery Mobile.

This theme, simply named jQuery Mobile is optimized for mobile devices such as the iPhone, Android, Blackberries, etc. It is a great basis for building a mobile website. Of course, you can also use it on your own blog, along with a plugin like IWPhone, which can automatically detect a mobile device and switch from your regular theme to a mobile theme.

» Download jQuery Mobile Theme or view the live demo.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

3 free WordPress themes I’ve created for you

Go to Source

Hardcoding is generally not a good practice, however in the case of an established website, hardcoding your blog url, site url, template path and stylesheet path will make your blog run faster.

When a function such as bloginfo('url') is called, WordPress executes a query to your database to get the value, except if the value can be found on your wp-config.php file.
To hardcode those constants, edit wp-config.php and paste the following (Don’t forget to change the values!):

define('WP_HOME', 'http://www.catswhocode.com'); // blog url
define('WP_SITEURL', 'http://www.catswhocode.com'); // site url
define('TEMPLATEPATH', '/absolute/path/to/wp-content/themes/cwc5');
define('STYLESHEETPATH', '/absolute/path/to/wp-content/themes/cwc5');

Source: http://digwp.com/2009/07/optimize-wordpress-performance-with-the-wp-config-php-file/

Set HTML editor as the default

I know a lot of tech-savvy persons who don’t really like WordPress “visual” editor. Personally, I don’t use it because I’m used to writing HTML, and also because WYSIWYG editors are more likely to produce bad, not valid or dirty code.

If you prefer using the HTML editor, then what about making it your blog default? Just paste the line below into your theme functions.php file, and you’re done.

add_filter('wp_default_editor', create_function('', 'return "html";'));

Source: http://www.wprecipes.com/how-to-set-html-editor-as-the-default-in-wordpress

Make term edition a lot easier

For some reason, WordPress uploader won’t let you upload some filetypes, such as Textmate’s .tmCommand. If you need to upload those files to your WordPress blog, here is a very nice snippet that will allow you to do it.

Simply paste the following code on your functions.php file. If needed, you can add more file types by adding them on line 4, separated by a pipe (|)

<?php
function addUploadMimes($mimes) {
    $mimes = array_merge($mimes, array(
        'tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'
    ));

    return $mimes;
}
?>

add_filter('upload_mimes', 'addUploadMimes');

Source: http://www.wprecipes.com/wordpress-tip-allow-upload-of-more-file-types

Remove autolinks in comments

Links in comments can be a good thing when they’re useful and relevant, but unfortunely lots of people are just leaving links in your comments in order to get clicks and backlinks.
As this became a recurrent problem on my blogs, I’ve looked for a solution and found a piece of code that will make urls appears as text, not as links.

As always, the code have to be pasted to your functions.php file.

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

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

Easily modify contact info

I always wondered why WordPress still has a Yahoo and a AIM field for user contact information while nowadays, services like Facebook or Twitter became a lot more popular.

This simple hack will remove the AIM, Yahoo and Jabber fields and will replace them with Twitter, Facebook and LinkedIn. Just paste the code below in your functions.php file, and you’re ready to go.

function extra_contact_info($contactmethods) {
    unset($contactmethods['aim']);
    unset($contactmethods['yim']);
    unset($contactmethods['jabber']);
    $contactmethods['facebook'] = 'Facebook';
    $contactmethods['twitter'] = 'Twitter';
    $contactmethods['linkedin'] = 'LinkedIn';

    return $contactmethods;
}
add_filter('user_contactmethods', 'extra_contact_info');

Advanced users would probably enjoy this class which allow you to manage user contact info easily.
Source: http://thomasgriffinmedia.com/blog/2010/09/how-to-add-custom-user-contact-info-in-wordpress/

Leverage browser caching via .htaccess

One of the easiest way to improve your blog speed and general user experience is to leverage browser caching to reduce the number of http queries that the server needs to process. In fact, static files like images or PDF documents are not likely to change often so we can improve our blog speed by telling user browsers that they don’t need to download those files again if they’re already on the browser cache.

Open your .htaccess file (located at the root of your WordPress install) and paste the following. Remember to always make a backup before editing .htaccess.

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES CACHING ##

Source: http://thomasgriffinmedia.com/blog/2010/11/how-to-leverage-browser-caching-in-wordpress-via-htaccess/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Awesome WordPress hacks to make your blogger life easier

Go to Source

Step 1: Getting files

We could have created our theme from scratch, but there’s no need to reinvent the wheel when there’s tools that can help you save lots of time. The tool we’re going to use is called Blank Theme. It is a functional WordPress theme, but without any styling. That way, it can be used as a starting point for creating your own themes. For example, I’ve used Blank Theme to create the current Cats Who Code theme.

Blank Theme has been created by Chris Coyier and it can be downloaded here. Get a copy and unzip it on your server or hard drive: We’re going to start. Optionally, open the style.css file and modify the theme name to fit your own needs.

Step 2: Header and Footer files

As we’re going to create a theme that will rely much on jQuery, the first thing we have to do is to link to jQuery and the jQuery Mobile files. You can either download the files individually and link them to the theme, or you can use jQuery’s CDN and link the online versions to your theme. I personally prefer linking to the online version, but it’s up to you.

Open the header.php file from the Blank Theme directory, and insert the following code to link to jQuery Mobile, within the <head> and </head> tags:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

Once done, the required jQuery files are now linked to our theme. But we’re not done yet with header.php. As jQuery Mobile uses HTML5, we have to modify the doctype. Replace the first 6 lines of the file with:

<!DOCTYPE html>
<html>
<head>

Then, scroll down to the bottom of the file and locate the <body> tag. Replace everything from the <body> tag until the end of the file by the following:

<body <?php body_class(); ?>>
    <div data-role="page" data-theme="b" id="jqm-home">
        <div data-role="header">
            <h1><?php bloginfo('name'); ?></h1>
	</div>

        <div data-role="content">

We just dove in jQuery Mobile with the code above. What? We haven’t even wrote a single line of JavaScript! That’s right. jQuery Mobile doesn’t need you to write any JavaScript. All it needs is some <div> tags with the proper data-role attribute.

As an explanation, take a look at line 3 of the code above. Have you noticed the data-role="header"? It describe a header bar. If you save the file and view your theme right now, you’ll notice a header bar on the top of the screen, with your blog name.

Now, save header.php and open footer.php. Replace its content by:

        </div><!-- data role content-->

        <div data-role="footer" class="ui-bar">
            <a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
        <?php wp_footer(); ?>
    </div><!-- data role content-->
</body>

This simple code will insert a footer bar to our theme, with a button that will scroll up to the header when the user will tap on it. Did you noticed the data-icon attribute? It allows you to specify which kind of icon you want. In our case, we want an up arrow, but there’s lots of different icons you can use.

Step 3: The homepage

Now, let’s code our homepage. As we’re building a theme for mobile devices, we do not need anything fancy. Let’s build a list of our recent posts. To do so, open the index.php file, locate the loop, and replace it by the following code:

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php endwhile;endif ?>
</ul>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

Save the file and take a look to your theme: It looks great! We now have a list of posts on our homepage. Once again, we have a very good looking list, with some nice transition effects, without coding a single line of JavaScript. That’s the magic of jQuery mobile.

The list is created by using the data-role="listview" attribute on the unordered list. The other attributes specifies the appearance of the list. Want to experiment a bit? Simply replace data-theme="c" by data-theme="b" and see what happens.

Now, modify the loops of the search.php and archive.php files like we did with index.php.

Step 4: Post and pages files

By default, the single.php and page.php files from the Blank Theme looks good in our mobile version, so we do not need to modify those files. Though, we can do something to enhance user experience: Mask the comments by default, and show them only if the user decides to. This can be done extremely easily using jQuery mobile.

Open comments.php and locate line 15. Insert the following line:

<div data-role="collapsible" data-state="collapsed">

Then, go to line 31 and insert a closing </div> just before the else statement. Save the file and have a look at one of your posts: Comments are now masked by default, and a tap/click on the bar display them. If you prefer to show the comments by default, no problem: simply remove the data-state="collapsed" attribute. That’s all we need to create a collapsible content block.

Did you noticed that on posts, the header bar is showing a “Back” button? A click/tap on it will take you back to your blog homepage.

Step 5: Implementing search

Right now, we have a theme fully optimized for mobile devices. But it is missing something important: An easy to access search bar. Open your searchform.php file and replace its content by the following:

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
    <div data-role="fieldcontain">
	    <input type="search" name="s" id="search" value="" />
	</div>
</form>

After you saved the file, reopen index.php and include the search form between the get_header() function and the unordered list which contain our posts:

<?php include('searchform.php'); ?>

Our homepage now has a working search form. Right now, our theme is done and we can use it on a production site.

Step 6: Final touches

Of course, even if the theme we’ve built is perfectly functional, there are still a lot of things that can be done to enhance its look and functionality. For example, I have noticed that the search field is smaller than the list items. In order to make the search field as wide as the list items, paste the following in style.css:

.ui-input-search{
    width:96% !important;
}

That’s all for today. I hope you enjoyed this tutorial. If you want to download the finished theme, just click here.

Also, I just redesigned my other blog Cats Who Blog so don’t hesitate to visit it or grab the RSS feed to read it later. The blog is now 100% focused on tools to make your life as a blogger, developer or designer easier. Enjoy!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to create a mobile WordPress theme with jQuery Mobile

Go to Source

Have you seen my blog sidebar? I display the number of followers I have in full text. This is actually pretty easy to do. The first thing you need is this function:

function get_followers($twitter_id){
	$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name='.$twitter_id);
	if (preg_match('/followers_count>(.*)</',$xml,$match)!=0) {
		$tw['count'] = $match[1];
	}

	return $tw['count'];
}

Once you have the function, you can call it as shown below:

$nb =  get_followers('phpsnippets');
echo "PHP Snippets already have ".$nb." followers!";

» Credit: http://www.phpsnippets.info/get-twitters-followers-in-php

Get latest Twitter status

Using PHP and cURL, it is pretty easy to get the status of a specific user. Once you have it, what about displaying it on your blog, like I do in WPRecipes footer?

function get_status($twitter_id, $hyperlinks = true) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://twitter.com/statuses/user_timeline/$twitter_id.xml?count=1");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/<text>(.*)<\/text>/', $src, $m);
    $status = htmlentities($m[1]);
    if( $hyperlinks ) $status = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]", '<a href="%5C%22%5C%5C0%5C%22">\</a>', $status);
    return($status);
}

The function is extremely easy to use:

echo get_status('catswhocode');

» http://www.phpsnippets.info/get-twitter-status-using-php

Link to update status, without encoding problems

Many websites and blogs show you how to create a link to Twitter that will update your status. But unfortunely, most websites don’t explain what you need to do in order to avoid encoding problems of spaces and special characters.

<a href="http://twitter.com?status=@catswhocode Hi Jean, how are you?">Tweet!</a>

So, where’s the change? Pretty simple: Just note that I havent linked to http://www.twitter.com, but to http://twitter.com, without the www.

A working example can be seen on my company website: http://www.webdevcat.com/contact.

Get number of retweets for a specific page

Most bloggers are using the Tweetmeme widget to display the number of retweets of their posts. Did you know that Tweetmeme also has an API you can use to get how many times a specific url has been retweeted?

The following function will get the number of RT’s of the url passed as a parameter:

function tweetCount($url) {
    $content = file_get_contents("http://api.tweetmeme.com/url_info?url=".$url);
    $element = new SimpleXmlElement($content);
    $retweets = $element->story->url_count;
    if($retweets){
        return $retweets;
    } else {
        return 0;
    }
}

Using the function is easy, as you can expect:

echo tweetCount('http://www.catswhocode.com');

Note that the Twitter API also provide a way to get the number of retweets. See http://urls.api.twitter.com/1/urls/count.json?url=www.google.com for example.

» http://www.phpsnippets.info/get-how-many-times-a-page-have-been-retweeted-using-php

Testing friendship between two users

If you want to know if a specific user is following you (or someone else) you have to use the Twitter API. This snippet will echo true if the two users specified on lines 18 and 19 are friends. It will return false otherwise.

/* makes the request */
function make_request($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

/* gets the match */
function get_match($regex,$content) {
	preg_match($regex,$content,$matches);
	return $matches[1];
}

/* persons to test */
$person1 = 'phpsnippets';
$person2 = 'catswhocode';

/* send request to twitter */
$url = 'https://api.twitter.com/1/friendships/exist';
$format = 'xml';

/* check */
$persons12 = make_request($url.'.'.$format.'?user_a='.$person1.'&user_b='.$person2);
$result = get_match('/<friends>(.*)<\/friends>/isU',$persons12);
echo $result; // returns "true" or "false"

» http://www.phpsnippets.info/get-twitter-status-using-php

Shorten urls for Twitter

As you know if you’re a Twitter user, you can’t post messages which are longer than 140 characters. To avoid this problem, you have to use an url shortener. There’s lots of different url shorteners on the internet. TinyUrl.com is one of them, it doesn’t produce the shortest urls but what I really love it is that you don’t need to have an account to use it with PHP.

The following function takes a long url as a parameter and return a shorter url, using the TinyUrl url shortener.

function getTinyUrl($url) {
    return file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
}

» http://www.phpsnippets.info/convert-url-to-tinyurl

Shorten urls using Bit.ly

In the previous snippet of that article, I’ve shown you how you can shorten your urls using TinyUrl.com. This is cool, but I’m pretty sure some of you prefer using the bit.ly service. No problem, you can still use PHP to get your shortened url.

function bitly($url) {
	$content = file_get_contents("http://api.bit.ly/v3/shorten?login=YOURLOGIN&apiKey=YOURAPIKEY&longUrl=".$url."&format=xml");
	$element = new SimpleXmlElement($content);
	$bitly = $element->data->url;
	if($bitly){
		return $bitly;
	} else {
		return '0';
	}
}

To use the function, simply use the following:

echo bitly("http://www.catswhocode.com");

» http://woorkup.com/2010/06/06/3-practical-wordpress-code-snippets-you-probably-must-know/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP snippets to interact with Twitter

Go to Source

On big projects, the usual good practice is to use a CMS or a framework such as Symfony or CodeIgniter to build your site on. But on smaller projects, many developers are still using PHP functions such as mysql_query() to do SQL queries to the database.

While it’s functional, I do not recommend to use all those mysql_XXX functions: Most websites are using MySQL, that’s right, but if one day you have to deal with another DB like PostGres or Oracle… Your code will not work at all, and you’ll have to rewrite it. Scary, isn’t it? This is why is it recommended to use a database abstraction layer, an API which unifies the communication between your application/website and databases such as MySQL, Oracle or PostgreSQL.

As you can guess, ezSQL allows you to work with various databases very easily. Though, please note that it does not support differences in SQL syntax implementations among different databases.

Also, ezSQL provide a few methods which simplify queries to the database, and help producing a cleaner code.

ezSQL and WordPress

As most of you are familiar with WordPress, you probably know the wpdb class, which allows you to send queries to the database. As wpdb is based on ezSQL, and you’re already familiar with the WordPress class, you won’t have any trouble to learn using ezSQL. And don’t worry if you never heard of WordPress or the wpdb class. ezSQL is extremely easy to learn and to use.

Downloading and installing ezSQL

Right, I have talked too much. How about some coding now? Let start by grabbing your copy of ezSQL. Once you have it, unzip on your server (or hard drive).

In order to be able to use ezSQL in your projects, you have to include two files: The first is ez_sql_core.php, which is ezSQL core file. The second depends on the database you’re going to use. In order to use ezSQL with a MySQL database, you have to include ez_sql_mysql.php.

Once done, you have to create a ezSQL object. This is done easily using your database username, password, name and host. The following example demonstrates the inclusion of the required files and the creation of a ezSQL object:

include_once "../shared/ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('db_user','db_password','db_name','db_host');

Now, you have an object called $db. We’ll use it run any types of queries to our database.

Queries examples

ezSQL has a few methods to make SQL queries extremely simple. Let’s see what you can do with it:

Execute any query

In order to insert, delete or most generally, run any kind of query to the database, we have to use the query method. In case of a data insertion, the method will return the insert id.

$db->query("INSERT INTO users (id, name, email) VALUES (NULL,'The Cat','cat@google.com')");

Example of an update query:

$db->query("UPDATE users SET name = 'Patrick' WHERE id = 4");

Select a row

The get_row method is great if you just need to select a row from your database. The example below executes a simple select query and displays the results.

$user = $db->get_row("SELECT name, email FROM users WHERE id = 4");

echo $user->name;
echo $user->email;

Select a single variable

If you only need a variable, the get_var method is here to help. Using it is extremely simple as shown below.

$var = $db->get_var("SELECT count(*) FROM users");

echo $var;

Select multiple results

Although the methods documented above are quite useful, most of the time you’ll need to get various rows of data from your database. The method called get_results will get various data from your database. To output the data, a simple foreach() loop is all you need.

$results = $db->get_results("SELECT name, email FROM users");

foreach ( $results as $user ) {
    echo $user->name;
    echo $user->email;
}

Select a column

If you need to get a column, you can use the get_col method. The second parameter is the column offset.

foreach ( $db->get_col("SELECT name,email FROM users",0) as $name ) {
            echo $name;
}

Debug

When something doesn’t work as expected, ezSQL has a great method to perform some debugging. Not surprising, the method is called debug. When called, the method will display the last query performed and its associated results.

$db->debug();

I hope you enjoyed this article and that you’ll use ezSQL in your future projects. It’s a great tool which was very helpful for me many times!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

PHP: Fast and easy SQL queries using ezSQL

Go to Source

The Demo

Click on the image to view a live demo. You can also get the source on Github.

Getting ready

Let’s start by organizing our work. To achieve the effect of this tutorial, we’ll need to create 3 files:

• progress.html, which will contain our markup.
• ui.css which will contain our CSS styles.
• progress.js which will contain some additional jQuery animations.

Create a directory on your webserver (or hard drive) and create the files.

The HTML markup

Here we go. Open your progress.html file and paste the following markup in it:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pure CSS Progress Bar</title>

	<link rel="stylesheet" href="stylesheets/ui.css">
	<link rel="stylesheet" href="stylesheets/ui.progress-bar.css">
</head>
<body>
	<div id="container">
		<div id="progress_bar" class="ui-progress-bar ui-container">
        	<div class="ui-progress" style="width: 79%;">
				<span class="ui-label" style="display:none;">Processing <b class="value">79%</b></span>
      		</div><!-- .ui-progress -->
    	</div><!-- #progress_bar -->  

		<div class="content" id="main_content" style="display: none;">
	    	<p>Hello, World!</p>
	  	</div><!-- #main_content -->
	</div><!-- #container -->
</body>
</html>

Let me explain the code a bit: On line 1, I’ve declared a HTML5 doctype. Then, lines 12 to 16 contains the markup for the progress bar itself. If you save the file and view it in your browser right now, you’ll see that nothing appears. Don’t worry, we’re going to apply so CSS3 magic in a minute.

Diving into CSS3

Open your ui.css file and paste the following code in it. There’s nothing fancy there, just some basic styles (that I’ve simplified from the original source) for the layout.

body {
  background:#eee;
  padding: 30px;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  margin: 0;
}

#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;

}

.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
} 

.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

Once you are done, we can finally get into more serious things. The code below will make your progress bar come to life. I’ll explain it in details in a minute. For now, copy it and paste it in your ui.css file.

@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
   background-position: 44px 0;
  }
}      

.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}        

.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  border: 1px solid #4c8932;
  -webkit-animation: animate-stripes 2s linear infinite;
}

Save your ui.css file and view progress.html in your web browser, and you’ll see your gorgeous progress bar, done without using any image.
So, what’s inside? Let me explain the code a bit.

First, we have two CSS classes: .ui-progress-bar and .ui-progress. The first is the container, and the second is the green progress bar.

• Lines 1 to 9: These lines define a webkit-specific animation, which allows us to move an element from a pint to another.
  For more details about webkit animations, see http://webkit.org/blog/324/css-animation-2/.
• Line 16: The border-radius CSS3 property allows you to define a radius and get rounded corners.
• Line 17: Mozilla specific property for border-radius.
• Line 18: Webkit specific property for border-radius.
• Line 19: The -webkit-gradient property allows you to add a gradient to an element. It works only on Webkit, other browsers will ignore this property.
• Line 20: Mozilla specific property, similar to -webkit-gradient with a different syntax.
• Lines 21 to 23: box-shadow (and its browser specific alternatives) allows you to add a shadow to an element.
• Line 34: Webkit specific property, based on the standard background-size property, which allows you to specify the size of a background image.
• Line 56: Triggers webkit animation defined on line 1.

Final touch: Using jQuery to animate the progress bar

A pure CSS3 progress bar is a very cool thing, but progress bars are here to show progress, so we have to animate it. We’re going to use jQuery to do so.

Open your progress.html file and paste the two line below just above the closing</body> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="progress.js" type="text/javascript" charset="utf-8"></script>

This code will load jQuery from Google (Which I recommend to do instead of loading your own copy) as well as your progress.js file, which will contain the required code to animate the progress bar.

Now, paste the code below in your progress.js file:

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000, 

        easing: 'swing',

        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);

          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }

          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );

$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });

});

Save the file, and view progress.html in your web brower: Wow, the progress bar is now animated. How cool is that?

This Javascript code makes the progress bar go from 0 to 100, and then, it displays a message, which is simply “Hello World” in our tutorial.

I hope you enjoyed reading this tutorial as much as I enjoyed writing it. Have fun with CSS3!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to create a kick-ass CSS3 progress bar

Go to Source

When you have to use some Javascript in an html file, you should always use the following <script> tag:

<script type="text/javascript">
    ... some JS code
</script>

But instead, how many times have you seen this when looking at the source code?

<script type="text/javascript" language="javascript">
    ... some JS code
</script>

In HTML, the language attribute is deprecated due to its redundancy with the type attribute. You should never use it anymore.

Keep your code in an external file

Using an external .js file for your Javascript code is a lot cleaner than writing it in your html document, and it also allows the browser to cache the file, which will result in a faster website.

Put your Javascript code in a .js file, then use the <script> tag in your html document to import the file:

<script type='text/javascript' src='http://www.catswhocode.com/myscript.js'></script>

Don’t wrap code in HTML comments

In the 90′s some very old browsers weren’t able to interpret Javascript. In order to prevent unwanted results on those browsers, it was considered good practice in 1994-1997 to wrap Javascript code within html comments, so browsers with no Javascript support will simply ignore it.
Here is an example of some code wrapped within html comments:

<script language="JavaScript">
<!--
...some code
//-->
</script>

However, in 2010, all browsers (Even IE6, that means a lot) can interpret Javascript, so there’s absolutely no need to wrap code within comments anymore. Even worse, if code is wrapped within comments and use the decrement symbol --, you’ll expect some weird problems due to the fact the browser may think it’s the end of the html comment.

Use a framework

Unless your Javascript code is really short and easy, you should always avoid reinventing the wheel by using a framework of your choice. In my opinion, jQuery is the best and has an awesome community, so you should give it a try if you haven’t already.

Always declare your variables using var

You should introduce any variable you create with the var statement, otherwise it gets to the global scope. Also, using var makes your code more readable and self-explanatory.
Example of variable created using the var statement:

var name = "Jean";
var size = data.length;

Keep your code unobtrusive

Some years ago, when a programmer wanted to add an event to an html element (for example, if you want to validate a date when the user typed something) he simply put Javascript code in the html, using a special attribute such as onblur, onchange, onclick, etc.
Example:

<input type="text" name="date" onchange="validateDate()" />

This works great, but it is a bit dirty. HTML should only contain the document description. Just like it’s bad practice to use inline CSS styles, it’s bad practice to use inline Javascript.

Instead, what about using some unobtrusive Javascript? Using jQuery, it is pretty easy to do, as you can see in the following example:

$(document).ready(function(){
	$('input[name=date]').bind('change', validateDate);
});

Include your scripts at the bottom of your HTML files

Not so long ago, it was generally considered good practice to insert your Javascript files within the <head> and </head> tags of your html document.
But browsers read html files from top to bottom, and load external files dynamically. Which mean that inserting scripts within the <head> and </head> tags will make your Javascript load before some of the page content.
In order to always load scripts after the content, Javascript files should always been included at the bottom of your html files, as shown below:

    <script src="myscript.js?" type="text/javascript"></script>
  </body>
</html>

Use JSLint

JSLint is a web-app which takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate solution.
JSLint is great to find bugs in your code, and also things that may be written in a better way. This site is definitely my favorite coding buddy when developing some Javascript.

Don’t use document.write

The good old document.write method has been deprecated for years, however it is still very common to see it while browsing code.

document.write("hello world");

Instead of using this deprecated method, you should use the DOM and the innerHTML function to insert text on a page:

document.getElementById('hello').innerHTML('hello world');

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Best practices for modern Javascript development

Go to Source

If someone leaves a comment containing a url, the url will be automatically transformed to a link by WordPress. This can be useful, but personally I don’t like to see many links in comments, especially when they’re a bit spammy.
This is why I decided, on the latest CWC theme, to remove comments autolink. Doing so is pretty easy, just paste the following into your functions.php file. Once you saved the file, you’ll notice that autolinks have disappeared.

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

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

Automatically notify your users of new posts

If you run a private site using WordPress, then it could be useful to notify your users when a new post is published. The following snippet will get all user emails from your database and will send an email to them automatically when a post is published.
Of course, you shouldn’t use that code on your blog as it does not currently have any unsubscribe option.

function email_members($post_ID)  {
    global $wpdb;
    $usersarray = $wpdb->get_results("SELECT user_email FROM $wpdb->users;");
    $users = implode(",", $usersarray);
    mail($users, "New WordPress recipe online!", 'A new recipe have been published on http://www.catswhocode.com');
    return $post_ID;
}

add_action('publish_post', 'email_members');

Twitter style “time ago” dates

Displaying dates using the “5 days ago” format is becoming very popular on blogs, thanks to Twitter popularity.
I have seen lots of complicated tutorials to use this format on your WordPress blog, however many people don’t know that WordPress has a built-in function to do the same thing: human_time_diff().

Paste the snippet below anywhere within the loop, and it will display your dates using the “time ago” format.

Posted <?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

» Source: http://www.phpsnippets.info/display-dates-as-time-ago

Display post thumbnail in your RSS feed

Introduced in WordPress 2.9, the the_post_thumbnail() function is very useful to easily add and display a thumbnail attached to a post. Unfortunately, there’s no built-in way to display this thumbnail on your RSS feed.

Happily, the function below will solve this problem. Simply paste it in your functions.php, save it, and the post thumbnail will be automatically displayed on your RSS feed.

function diw_post_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<div>' . get_the_post_thumbnail($post->ID) . '</div>' . $content;
	}
	return $content;
}
add_filter('the_excerpt_rss', 'diw_post_thumbnail_feeds');
add_filter('the_content_feed', 'diw_post_thumbnail_feeds');

» Source: http://digwp.com/2010/06/show-post-thumbnails-in-feeds/

Block external requests

By default, WordPress does some external requests in order to get the available updates and the WordPress news shown in your dashboard. Personally, I don’t mind them, but I’ve recently had clients who didn’t wanted any external requests. So, I’ve blocked them using this interesting hack.
Simply add the following line to your wp-config.php file:

define('WP_HTTP_BLOCK_EXTERNAL', true);

If you need to allow some external requests, it it easy to create a whitelist, as shown below:

define('WP_ACCESSIBLE_HOSTS', 'rpc.pingomatic.com');

This line of code have to be pasted in wp-config.php as well.
» Source: http://digwp.com/2010/08/pimp-your-wp-config-php/

Easy debug mode

When things go wrong, you can always use the super useful WordPress debug tool, WP_DEBUG. By default, you have to paste a line of code in your wp-config.php to make the debug mode available.
By if you need to easily access the debug mode even when your site is live, you should edit your wp-config.php file and replace

define('WP_DEBUG', true);

by:

if ( isset($_GET['debug']) && $_GET['debug'] == 'debug')
  define('WP_DEBUG', true);

Once done, simply add a GET parameter to the url of the page you’d like to debug, as shown below:

http://www.catswhocode.com/blog/about?debug=debug

Of course, for obvious security reasons you should replace the name debug by a random word of your choice so no one will ever see your site in debug mode.
» Source: http://yoast.com/wordpress-debug/

Use WordPress shortcode in theme files

WordPress shortcodes are a super easy way to add content such as rss feeds, google maps, galleries and more into your posts or pages. But what about being able to output shortcodes in your theme files?
A built-in function exists, but most people never heard of it. The function is called do_shortcode(). It takes one parameter, the shortcode you’d like to display. I’ve heard you can ad more than one shortcode as a parameter, but I haven’t tried it yet.

do_shortcode('[gallery]
');

» Source: http://codex.wordpress.org/Function_Reference/do_shortcode

Allow upload of more file types

If you ever tried to upload some not so common filetypes, such as Textmate’s .tmCommand to your WordPress blog, you may have experienced an error, because WordPress simply doesn’t want you to upload some other file type.
Fortunately, you can add new file types to WordPress whitelist. Doing so is quite easy, just paste the following piece of code in your functions.php, and you’re done.
Note that file types have to be separated by a pipe.

function addUploadMimes($mimes) {
    $mimes = array_merge($mimes, array(
        'tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'
    ));

    return $mimes;
}

add_filter('upload_mimes', 'addUploadMimes');

» Source: http://www.wprecipes.com/wordpress-tip-allow-upload-of-more-file-types

Google Docs PDF viewer shortcode

Google Docs is definitely the easiest way to read documents in .pdf, .doc or .xls online. So, if you want to share a PDF file with your readers, what about creating a shortcode that will open the PDF in Google Docs instead of forcing download?

Simply paste the code in your functions.php.

function pdflink($attr, $content) {
	return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
}
add_shortcode('pdf', 'pdflink');

Once you saved the file, you’ll be able to use the shortcode on your posts and page. Here is the syntax:

[pdf href="http://yoursite.com/linktoyour/file.pdf"]View PDF[/pdf]

» Source: http://www.wprecipes.com/wordpress-tip-create-a-pdf-viewer-shortcode

Detect the visitor browser within WordPress

Well, this hack is not so new, but it still remains one of my favorites. What this code does is pretty simple, it detects the name of the visitor browser and adds it to the body_class() function.
That way, you can correct browser-specific problems extremely easily. The function has to be pasted in your functions.php file.

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

The function output will look like:

<body class="home blog logged-in safari">

» Source: http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

10 useful new WordPress hacks

Go to Source

» View tutorial

Your own Google buttons using CSS3

» View tutorial

CSS3 Gradient Buttons

» View tutorial

Kick-Ass CSS3 Button

» View tutorial

Pure CSS3 icons

» View tutorial

Extremely fancy CSS3 buttons

» View tutorial

BonBon: Sweet CSS3 buttons

» View tutorial

Realistic Looking CSS3 Buttons

» View tutorial

CSS3 “Aqua” buttons with no images

» View tutorial

Flexible CSS3 toggle buttons

» View tutorial

Building beautiful buttons with css gradients

» View tutorial

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Top 10 CSS3 buttons tutorials

Go to Source

Required fields

Whose ever tried to submit a form and gotten an error message saying that you “forgot” to enter your email address? Probably not a lot of us: In fact, 99 percent of all web forms have at least one field marked as required.

In good ol’ HTML, we had to manually display that a specific field is required, most of the time by using a red asterisk. But with HTML5, you can set up a input field to be required:

<input type="text"  name="client_name" required>

And on the CSS side, something like

input:required {
    border: 1px red solid;
}

will save you a lot of time.

Two similar attributes are also available: optional and invalid. They work exactly as the required attribute explained above.

Placeholders

In a form, an input field always has a label explaining what kind of information is required. While you can currently use the label tag to display a label for a specific text field, HTML5 introduces the placeholder attribute. As shown below, using it is pretty simple:

<input name="firstname" placeholder="Please enter your first name">

The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.

The placeholder attribute currently works only in safari/webkit. Don’t worry about other browsers though, it is pretty easy to simulate placeholders using javascript:

Autofocus

A new HTML5 attribute is named autofocus. If applied to an element, the element will automatically receive the focus once the page is loaded. This can be seen on some sites and most search engines.

Nothing complicated, just use the syntax below, and remember that in HTML5, there’s no more need for attributes to have a value like in XHTML 1.0.

<input name="search" autofocus>

Email fields

Asking someone’s email on a web form is extremely common because email is still the easiest way to contact someone over the internet. HTML5 introduces a new type for the input element, named email.

<input name="email" type="email">

Pattern attribute

When validating a web form, we have to validate the data entered by the visitor. The new pattern HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.

This is, in my opinion, an extremely good thing, which will save lots of time to developers when coding forms. Though, remember that you should always validate data on the server side as well.

<input type="text" name="Phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>

Url fields

Nowadays, many people have a website, blog, or at least a Twitter profile. This is why many web forms offer the possibility to enter an url.

HTML5 introduces a new type for the input element, designed specifically for entering urls:

<input name="url" type="url">

Although I didn’t test it myself, I heard that the W3C validator will raise an error if the value of a url field doesn’t match a proper url structure.

Date pickers

Many businesses are offering an appointment request through their website. In that case, the visitor has to specify the day they would like an appointment. HTML5 introduces the date type for the input element:

<input name="day" type="date">

When clicked, the date attribute will display a date picker so visitors will simply have to choose a date instead of entering it manually. Unfortunately, except in Opera, most browsers don’t have it implemented yet.

Note that a date picker can be implemented on your forms using the following types:

<input type="date">
<input type="datetime">
<input type="month">
<input type="week">
<input type="time">

Isn’t that user friendly? Personally, I can’t wait to implement this in my forms but as I said earlier this isn’t very well implemented in browsers at the time of writing this post. Of course, Javascript is always here to help. On this site I found a simple fallback implementation for the input type=date HTML5 attribute:

var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
    // No HTML5 native date picker support, use jQuery or your favorite framework to create one.
}

Search boxes

To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new type for search fields.

<input name="q" type="search">

For now, the only difference with regular text inputs is that, if you use Safari, the search box will have rounded corners. But maybe interesting functionalities will be implemented in the future. Let’s hope, because right now I have to admit that I don’t really see why we should use this type.

Sliders type and step attribute

HTML5 is also introducing sliders: A new type for the input element, which allows visitors to easily select a number instead of entering it manually.

<input name="number" type="range" min="0" max="10">

The example above allows the visitor to choose a number between 0 and 10. If you want the slider to be incremented/decremented 2 by 2, you’ll have to use one more new attribute: step. Here is an example:

<input name="number" type="range" min="0" max="10" step="2" >

That way, visitors will only be able to select numbers like 0, 2, 4, and so on.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Enhance your web forms with new HTML5 features

Go to Source

Here we go! The first thing to do is obviously to create a directory on your Mac (or PC, nobody’s perfect ). You should name it chart for example. Once done, download the required Javascript and CSS files and save it on your hard drive.

Now, create a new html document, named charts.html. Copy the html structure below, and paste it into your newly created charts.html file.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>Charts!</title>       

</head>

<body>

</body>
</html>

Did you notice that I used the <!DOCTYPE html> doctype? It is the right doctype to use, as the javscript code we’ll add later will turn a html table into a HTML 5 canvas.

Step 2: Adding data

Now that we downloaded the javascript files and created an html document, it’s time to add data. Copy the code below and paste it within the <body> and </body> tags of your charts.html file.

<table>
	<caption>Visits from August 16 to August 21</caption>
	<thead>
		<tr>
			<td></td>
			<th scope="col">Monday</th>
			<th scope="col">Tuesday</th>
			<th scope="col">Wednesday</th>
			<th scope="col">Thursday</th>
			<th scope="col">Friday</th>
			<th scope="col">Saturday</th>
			<th scope="col">Sunday</th>
		</tr>
	</thead>
	<tbody>

		<tr>
			<th scope="row">CatsWhoCode.com</th>
			<td>12541</td>
			<td>11204</td>
			<td>11354</td>
			<td>10058</td>
			<td>9871</td>
			<td>8254</td>
			<td>5477</td>
		</tr>
		<tr>
			<th scope="row">WpRecipes.com</th>
			<td>9855</td>
			<td>8870</td>
			<td>8731</td>
			<td>7488</td>
			<td>8159</td>
			<td>6547</td>
			<td>4512</td>
		</tr>
		<tr>
			<th scope="row">CatsWhoBlog.com</th>
			<td>3241</td>
			<td>2544</td>
			<td>2597</td>
			<td>3108</td>
			<td>2114</td>
			<td>2045</td>
			<td>950</td>
		</tr>
	</tbody>
</table>

Of course, feel free to add your own data to make the example more interesting for you.

Step 3: Let the magic happen

Alright, now we have a bunch of downloaded files and an html document. It’s time to merge them all together and finally generate the chart.
Unzip the downloaded file and open the extracted directory. Copy the following files into your chart directory.

• charting/css/basic.css
• charting/css/visualize.css
• charting/css/visualize-light.css
• charting/js/visualize.js

Once done, we obviously have to link the css and javascript files to our document. Paste the following after the <title> tag of the document:

<link href="basic.css" type="text/css" rel="stylesheet" />
<link href="visualize.css" type="text/css" rel="stylesheet" />
<link href="visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="visualize.js"></script>

It’s time to give life to our chart. Paste the final piece of code after the script calls:

<script type="text/javascript">
	$(function(){
		$('table').visualize();
	});
</script>

Once you saved the file, your HTML table should be displayed along with a good looking chart. If you don’t want the table to be visible, simply hide it using the display:none css property.

Additional explanations

Generating bar charts is definitely great, but what if your preference goes to a pie chart? No problem, visualize.js allows 4 different type of charts: Bar, area, pie and line.

Changing the default type is pretty easy: Just add the type parameter as shown below:

$('table').visualize({type: 'pie'});

Cool, isn’t it? Visualize.js accepts even more parameters to make sure your chart will look exactly how you want. Here are the parameters which can be used:

• type: string. Accepts ‘bar’, ‘area’, ‘pie’, ‘line’. Default: ‘bar’.
• width: number. Width of chart. Defaults to table width
• height: number. Height of chart. Defaults to table height
• appendTitle: boolean. Add title to chart. Default: true.
• title: string. Title for chart. Defaults to text of table’s Caption element.
• appendKey: boolean. Adds the color key to the chart. Default: true.
• colors: array. Array items are hex values, used in order of appearance. Default: ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']
• textColors: array. Array items are hex values. Each item corresponds with colors array. null/undefined items will fall back to CSS text color. Default: [].
• parseDirection: string. Direction to parse the table data. Accepts ‘x’ and ‘y’. Default: ‘x’.
• pieMargin: number. Space around outer circle of Pie chart. Default: 20.
• pieLabelPos: string. Position of text labels in Pie chart. Accepts ‘inside’ and ‘outside’. Default: ‘inside’.
• lineWeight: number. Stroke weight for lines in line and area charts. Default: 4.
• barGroupMargin: number. Space around each group of bars in a bar chart. Default: 10.
• barMargin: number. Creates space around bars in bar chart (added to both sides of each bar). Default: 1

That’s all for today. Have fun with the charts

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to easily create charts using jQuery and HTML5

Go to Source

Just two years ago, we all used Photoshop to create beautiful inset typography. Now, you can do it using only CSS3. This great tutorial will help you getting started.
View tutorial: http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Create Beautiful CSS3 Typography

Technically speaking, styling text is very simple. The hard part is the artistic part: How to make text easy to read and look good? This is the focus of the tutorial, which is a must read for all web developers and designers.
View tutorial: http://blog.echoenduring.com/2010/05/13/create-beautiful-css3-typography/

Create a Letterpress Effect with CSS Text-Shadow

The “letterpress” effect is very popular in web design. Many people do it using Photoshop, but you can do it extremely easily using CSS3 only. How? Chris Spooner shows you how in this interesting article.
View tutorial: http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow

How to Create a Cool Anaglyphic Text Effect with CSS

Chris Spooner again! This time, the talented British web designer comes back with a tutorial showing you how you can create a anaglyphic effect with CSS. Not sure I’ll use it on a live site, but it’s always interesting to know how to do it.
View tutorial: http://line25.com/tutorials/how-to-create-a-cool-anaglyphic-text-effect-with-css

Text Rotation with CSS

Why should text always be displayed horizontally? CSS3 has the transform: rotate property, which allow you to rotate any elements, including text. The following tutorial, written by Jonathan Snook, will show how in details how to achieve an awesome rotated text effect.
View tutorial: http://snook.ca/archives/html_and_css/css-text-rotation

Text Embossing Technique With CSS

One more technique I’ve done exclusively in photoshop in the past. Thanks to CSS3, I’m now able to do it entirely in CSS.
View tutorial: http://www.reynoldsftw.com/2009/03/text-embossing-technique-with-css/

Adding an outline to your text using the CSS3 text-stroke property

Although this technique only works in webkit for now, I must admit that I really love it. You can add an outline to text, and even better, use transparent text with a solid outline.
View tutorial: http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property

CSS textured text

Ok, this isn’t new, and this isn’t CSS3, but this example is so great that I can’t not feature it on this post. Nick La from WebDesignerWall explains how you can make gradients or textured texts using CSS.
View tutorial: http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

8 examples of stunning CSS3 text effects

Go to Source

Less is probably the most well known CSS preprocessor. It allow a simplified syntax and the use of variables. Less CSS is for the Ruby programming language, however it looks like Aaron Russel created an extension for creating cached stylesheets your PHP projects can use.

Get it: http://lesscss.org

Sass

On their website, Sass claims to make CSS fun again. To be honest, I must admit that what this project is capable of is very interesting. Like Less CSS, it allow the use of variables and have a simplified syntax. Sass is definitely a great tool, unfortunely only available for Ruby, as far as I know.

Get it: http://sass-lang.com/

Turbine

If like me, you’re a PHP Lover, here is a css preprocessor made for your favorite language. I haven’t tested it yet, but Turbine looks very cool. It allow a minimal syntax, automatically gzip multiple css, fix cross-browser issues, and a lot more. A must check if you’re into PHP.

Get it: http://turbine.peterkroener.de/index.php

Switch CSS

Switch is a full featured, production ready CSS preprocessor. It runs under Apache with mod_python, or as an environment-agnostic command line tool.

Get it: http://sourceforge.net/projects/switchcss/

CSS Cacheer

CSS Cacheer is a very cool preprocessor which allows developers to create plugins. It requires PHP and Apache with mod_deflate and mod_rewrite in order to work.

Get it: http://retired.haveamint.com/archive/2008/05/30/check_out_css_cacheer

CSS Preprocessor

Another interesting preprocessor, written in PHP 5. Among other things, this tool allow you to use expressions such as margin-left: (200px * 3/2 – 10px); in your stylesheets.

Get it: http://pornel.net/css

DT CSS

DtCSS speeds up CSS coding by extending the features to CSS. Such as nested selectors, color mixing and more. DtCSS reads the CSS file with special syntax written for DtCSS, and outputs the standard CSS. It also comes with a smart caching system.

Get it: http://code.google.com/p/dtcss/

CSS PP

Unfortunely, CSS PP is still in alpha status, but the authors says the code will be released very soon. One of the good points of this projects is that it will be available in PHP, Python and Ruby. Great news for developpers who work with all of these languages.

Get it: http://csspp.org/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

8 CSS preprocessors to speed up development time

Go to Source

Do you remember back in 2008, when I created WP Vote? This site was the first (as far as I know) social voting site created 100% within WordPress. Users were able to submit a story, which was automatically published on the blog.

Inserting a post programmatically in WordPress is extremely easy. You have to use the wp_insert_post() function, which takes an array as a parameter.
Here is a working example. If you want to test it, paste the code below on your functions.php file.

global $user_ID;
$new_post = array(
    'post_title' => 'My New Post',
    'post_content' => 'Lorem ipsum dolor sit amet...',
    'post_status' => 'publish',
    'post_date' => date('Y-m-d H:i:s'),
    'post_author' => $user_ID,
    'post_type' => 'post',
    'post_category' => array(0)
);
$post_id = wp_insert_post($new_post);

Cool, isn’t it? Let have a closer look to the parameters specified in the $new_post array:

• post_title: the name of the post.
• post_content: the content of the post
• post_status: the post status (published, draft, etc)
• post_date: use date() or specify a custom date
• post_author: Author id of the post author
• post_type: Can be post, page, or a custom post type
• post_category An array of categories ids

Source: http://www.webmaster-source.com/2010/02/09/programmatically-creating-posts-in-wordpress

Inserting comments

Inserting comments is not harder than inserting posts. I personally never used this code, but here is it in case you need it. To give it a try, simply paste it in your functions.php file.

$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);

Just like the wp_insert_post() function, wp_insert_comment() takes an array as a parameter. Here are the data used:

• comment_post_ID: ID of the commented post
• comment_author: Name of the comment author
• comment_author_email: Email address of the comment author
• comment_author_url: Website of the comment author
• comment_content: Text of the comment
• comment_author_IP: IP address of the comment author
• comment_agent: User agent of the commenter browser
• comment_date: Date of the comment
• comment_date_gmt: GMT date of the comment
• comment_approved: Is the comment approved? 1 for yes and 0 for “awaiting moderation”

Adding categories to a post

Now that we saw how to insert a post or a comment into WordPress database, let’s see how to make a post part of one (or more) categories. WordPress has a built-in function for that, named wp_set_object_terms().

What you have to do is to create an array with the desired categories ID, and then use the function as shown below:

$category_ids = array(4, 5, 6);
wp_set_object_terms( $post_id, $category_ids, 'category');

The wp_set_object_terms() function take 3 parameters: The post ID, an array of categories ID, and the taxonomy type (In this example, category).

Adding tags to a post

Adding tags to a post is extremely simple as well. Even better, it does not require a new function, you can do so by using wp_set_object_terms().
Take a look at the example below:

$tag_ids = array(7, 8, 9);
wp_set_object_terms( $post_id, $tag_ids, 'post_tag');

Looks very similar with the previous piece of code, which allowed us to add categories to a post, isn’t it? In fact, the only difference is the taxonomy type: Here the parameter is post_tag instead of category.
Source: http://wpprogrammer.com/snippets/add-a-category-or-tag-to-a-post-programatically/

Automatically create a custom field when a post is published

I recently had a client who wanted to have a custom field created automatically, each time he published a new post, so he wouldn’t have to create a custom field with a default value for each article he wrote.
This piece of code was a real life-saver: Just paste it on your functions.php file and publish a new post: A custom field has been created automatically.

function add_custom_field_automatically($post_ID) {
	global $wpdb;
	if(!wp_is_post_revision($post_ID)) {
		add_post_meta($post_ID, 'field-name', 'custom value', true);
	}
}
add_action('publish_page', 'add_custom_field_automatically');
add_action('publish_post', 'add_custom_field_automatically');

So how does it work? First, a function has been created. This function make sure the post isn’t a revision on then adds a custom field named field-name, with custom value as a value.
Then, a “hook” is used to make sure that every time a post or page will be published, the add_custom_field_automatically() function will be called.
Source: http://wpcanyon.com/tipsandtricks/adding-a-custom-field-automatically-on-postpage-publish/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

WordPress: How to insert data programmatically

Go to Source

Sometimes, for example, when displaying search results, it is a great idea to highlight specific words. This is exactly what the following function can do:

function highlight($sString, $aWords) {
	if (!is_array ($aWords) || empty ($aWords) || !is_string ($sString)) {
		return false;
	}

	$sWords = implode ('|', $aWords);
 	return preg_replace ('@\b('.$sWords.')\b@si', '<strong style="background-color:yellow">$1</strong>', $sString);
}

Source: http://www.phpsnippets.info/highlights-words-in-a-phrase

Get your average Feedburner subscribers

Recently, Feedburner counts had lots of problems and it’s hard to say that the provided info is still relevant. This code will grab your subscriber count from the last 7 days and will return the average.

function get_average_readers($feed_id,$interval = 7){
	$today = date('Y-m-d', strtotime("now"));
	$ago = date('Y-m-d', strtotime("-".$interval." days"));
	$feed_url="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feed_id."&dates=".$ago.",".$today;
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_URL, $feed_url);
	$data = curl_exec($ch);
	curl_close($ch);
	$xml = new SimpleXMLElement($data);
	$fb = $xml->feed->entry['circulation'];

	$nb = 0;
	foreach($xml->feed->children() as $circ){
		$nb += $circ['circulation'];
	}

	return round($nb/$interval);
}

Source: http://www.catswhoblog.com/how-to-get-a-more-relevant-feedburner-count

Automatic password creation

Although I personally prefer leaving users to choose their password themselves, a client recently asked me to generate passwords automatically when a new account is created.
The following function is flexible: You can choose the desired length and strength for the password.

function generatePassword($length=9, $strength=0) {
	$vowels = 'aeuy';
	$consonants = 'bdghjmnpqrstvz';
	if ($strength >= 1) {
		$consonants .= 'BDGHJLMNPQRSTVWXZ';
	}
	if ($strength >= 2) {
		$vowels .= "AEUY";
	}
	if ($strength >= 4) {
		$consonants .= '23456789';
	}
	if ($strength >= 8 ) {
		$vowels .= '@#$%';
	}

	$password = '';
	$alt = time() % 2;
	for ($i = 0; $i < $length; $i++) {
		if ($alt == 1) {
			$password .= $consonants[(rand() % strlen($consonants))];
			$alt = 0;
		} else {
			$password .= $vowels[(rand() % strlen($vowels))];
			$alt = 1;
		}
	}
	return $password;
}

Source: http://www.phpsnippets.info/generate-a-password-in-php

Compress multiple CSS files

If you’re using different CSS files on your site, they might take quite long to load. Using PHP, you can compress them into a single file with no unnecessary white spaces or comments.
This snippet has been previously discussed on my “3 ways to compress CSS files using PHP” article.

header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
  /* remove comments */
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  /* remove tabs, spaces, newlines, etc. */
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  return $buffer;
}

/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');

ob_end_flush();

Source: http://www.phpsnippets.info/compress-css-files-using-php

Get short urls for Twitter

Are you on Twitter? If yes, you probably use a url shortener such as bit.ly or TinyUrl to share your favorite blog posts and links on the network.
This snippet take a url as a parameter and will return a short url.

function getTinyUrl($url) {
    return file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
}

Source: http://www.phpsnippets.info/convert-url-to-tinyurl

Calculate age using date of birth

Pass a birth date to this function, and it will return the age of the person; very useful when building communities or social media sites.

function age($date){
	$year_diff = '';
	$time = strtotime($date);
	if(FALSE === $time){
		return '';
	}

	$date = date('Y-m-d', $time);
	list($year,$month,$day) = explode("-",$date);
	$year_diff = date("Y") – $year;
	$month_diff = date("m") – $month;
	$day_diff = date("d") – $day;
	if ($day_diff < 0 || $month_diff < 0) $year_diff–;

	return $year_diff;
}

Source: John Karry on http://www.phpsnippets.info/calculate-age-of-a-person-using-date-of-birth

Calculate execution time

For debugging purposes, it is a good thing to be able to calculate the execution time of a script. This is exactly what this piece of code can do.

//Create a variable for start time
$time_start = microtime(true);

// Place your PHP/HTML/JavaScript/CSS/Etc. Here

//Create a variable for end time
$time_end = microtime(true);
//Subtract the two times to get seconds
$time = $time_end - $time_start;

echo 'Script took '.$time.' seconds to execute';

Source: http://phpsnips.com/snippet.php?id=26

Maintenance mode with PHP

When updating your site, it is generally a good thing to temporarily redirect your users to a “Maintenance” page so they will not see any critical info such as error messages.
This is generally done using an .htaccess file, but it can be done easily with PHP:

function maintenance($mode = FALSE){
    if($mode){
        if(basename($_SERVER['SCRIPT_FILENAME']) != 'maintenance.php'){
            header("Location: http://example.com/maintenance.php");
            exit;
        }
    }else{
        if(basename($_SERVER['SCRIPT_FILENAME']) == 'maintenance.php'){
            header("Location: http://example.com/");
            exit;
        }
    }
}

Source: http://www.phpsnippets.info/easy-maintenance-mode-with-php

Prevent js and css files from being cached

By default, external files such as javascript and css are cached by the browser. If you want to prevent this from caching, simply use this easy tip:

<link href="/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" /&glt;

The result will look like this:

<link href="/stylesheet.css?1234567890" rel="stylesheet" type="text/css" /&glt;

Source: http://davidwalsh.name/prevent-cache

Add (th, st, nd, rd, th) to the end of a number

Another useful snippet which will automatically add st, nd, rd or th after a number.

function make_ranked($rank) {
	$last = substr( $rank, -1 );
	$seclast = substr( $rank, -2, -1 );
	if( $last > 3 || $last == 0 ) $ext = 'th';
	else if( $last == 3 ) $ext = 'rd';
	else if( $last == 2 ) $ext = 'nd';
	else $ext = 'st'; 

	if( $last == 1 && $seclast == 1) $ext = 'th';
	if( $last == 2 && $seclast == 1) $ext = 'th';
	if( $last == 3 && $seclast == 1) $ext = 'th'; 

	return $rank.$ext;
}

Source: http://phpsnips.com/snippet.php?id=37

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

10 life-saving PHP snippets

Go to Source

You can see the working form on my site PHP Snippets. It is a site of mine, so don’t hesitate to grab the RSS feed and follow it on Twitter if you want.

Step 1: Creating the page template

The first step is to create a page template. To do so, copy the page.php code into a new file named page-contact.php.

We have to add a comment at the beginning of the contact.php file to make sure WordPress will treat the file as a page template. Here’s the code:

<?php
/*
Template Name: Contact
*/
?>

Your contact.php file should look like this:

<?php
/*
Template Name: Contact
*/
?>

<?php get_header() ?>

	<div id="container">
		<div id="content">
			<?php the_post() ?>
			<div id="post-<?php the_ID() ?>" class="post">
				<div class="entry-content">
				</div><!-- .entry-content ->
			</div><!-- .post-->
		</div><!-- #content -->
	</div><!-- #container -->

<?php get_sidebar() ?>
<?php get_footer() ?>

Step 2: Building the form

Now, we have to create a simple contact form. Simply paste the following code within the entry-content div.

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
	<ul>
		<li>
			<label for="contactName">Name:</label>
			<input type="text" name="contactName" id="contactName" value="" />
		</li>
		<li>
			<label for="email">Email</label>
			<input type="text" name="email" id="email" value="" />
		</li>
		<li>
			<label for="commentsText">Message:</label>
			<textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
		</li>
		<li>
			<button type="submit">Send email</button>
		</li>
	</ul>
	<input type="hidden" name="submitted" id="submitted" value="true" />
</form>

Nothing hard with this pretty self-explanatory html code for our form. Note the input type=”hidden” I added on line 19: It will be used later to check if the form has been submitted.

Step 3: data processing and error handling

Our form looks pretty good, but right it is very useless because it does not send any email. What we have to do is to verify if the form has been submitted then verify if fields have been filled correctly.

If fields are correctly filled, we’ll get the blog admin email and send them the email. Otherwise, no email will be sent and errors will be displayed to the user.

Paste the following code between the Page Template declaration and the get_header() function:

<?php
if(isset($_POST['submitted'])) {
	if(trim($_POST['contactName']) === '') {
		$nameError = 'Please enter your name.';
		$hasError = true;
	} else {
		$name = trim($_POST['contactName']);
	}

	if(trim($_POST['email']) === '')  {
		$emailError = 'Please enter your email address.';
		$hasError = true;
	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
		$emailError = 'You entered an invalid email address.';
		$hasError = true;
	} else {
		$email = trim($_POST['email']);
	}

	if(trim($_POST['comments']) === '') {
		$commentError = 'Please enter a message.';
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['comments']));
		} else {
			$comments = trim($_POST['comments']);
		}
	}

	if(!isset($hasError)) {
		$emailTo = get_option('tz_email');
		if (!isset($emailTo) || ($emailTo == '') ){
			$emailTo = get_option('admin_email');
		}
		$subject = '[PHP Snippets] From '.$name;
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}

} ?>

What I’ve done here was simply to make sure that the form has been submitted and filled correctly. If an error, such as an empty field or incorrect email address occurred, a message is returned and the form isn’t submitted.

Now we have to display error messages below the related field, for example “Please enter your name”. Below you’ll find the complete form page template that you can use “as it”.

<?php
/*
Template Name: Contact
*/
?>

<?php
if(isset($_POST['submitted'])) {
	if(trim($_POST['contactName']) === '') {
		$nameError = 'Please enter your name.';
		$hasError = true;
	} else {
		$name = trim($_POST['contactName']);
	}

	if(trim($_POST['email']) === '')  {
		$emailError = 'Please enter your email address.';
		$hasError = true;
	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
		$emailError = 'You entered an invalid email address.';
		$hasError = true;
	} else {
		$email = trim($_POST['email']);
	}

	if(trim($_POST['comments']) === '') {
		$commentError = 'Please enter a message.';
		$hasError = true;
	} else {
		if(function_exists('stripslashes')) {
			$comments = stripslashes(trim($_POST['comments']));
		} else {
			$comments = trim($_POST['comments']);
		}
	}

	if(!isset($hasError)) {
		$emailTo = get_option('tz_email');
		if (!isset($emailTo) || ($emailTo == '') ){
			$emailTo = get_option('admin_email');
		}
		$subject = '[PHP Snippets] From '.$name;
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);
		$emailSent = true;
	}

} ?>
<?php get_header(); ?>
	<div id="container">
		<div id="content">

			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h1 class="entry-title"><?php the_title(); ?></h1>
					<div class="entry-content">
						<?php if(isset($emailSent) && $emailSent == true) { ?>
							<div class="thanks">
								<p>Thanks, your email was sent successfully.</p>
							</div>
						<?php } else { ?>
							<?php the_content(); ?>
							<?php if(isset($hasError) || isset($captchaError)) { ?>
								<p class="error">Sorry, an error occured.<p>
							<?php } ?>

						<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
							<ul class="contactform">
							<li>
								<label for="contactName">Name:</label>
								<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
								<?php if($nameError != '') { ?>
									<span class="error"><?=$nameError;?></span>
								<?php } ?>
							</li>

							<li>
								<label for="email">Email</label>
								<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
								<?php if($emailError != '') { ?>
									<span class="error"><?=$emailError;?></span>
								<?php } ?>
							</li>

							<li><label for="commentsText">Message:</label>
								<textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
								<?php if($commentError != '') { ?>
									<span class="error"><?=$commentError;?></span>
								<?php } ?>
							</li>

							<li>
								<input type="submit">Send email</input>
							</li>
						</ul>
						<input type="hidden" name="submitted" id="submitted" value="true" />
					</form>
				<?php } ?>
				</div><!-- .entry-content -->
			</div><!-- .post -->

				<?php endwhile; endif; ?>
		</div><!-- #content -->
	</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Step 4: Adding jQuery verification

Our form is now working perfectly. But we can enhance it by adding a client side verification. To do so, I’m going to use jQuery and the validate jQuery plugin. This plugin is great because it allows you to verify that a form has been filled correctly, quickly and easily.

The first thing to do is to download the validate plugin and upload it into your theme file (under a /js directory). Once done, paste the following into a new file:

$(document).ready(function(){
	$("#contactForm").validate();
});

Save it as verif.js in your /js directory.

Now we have to link the javascript files to our theme. Open your header.php file and paste the following within the <head> and </head> tags:

<?php if( is_page('contact') ){ ?>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

Once done, your form will be validated on the client side by the jQuery validate plugin. How does it work? It simply picks form element which have the css class required and verifies if they’re filled correctly. If not, a message is displayed.
The plugin is powerful and you can do lots of things with it, however this isn’t the purpose of this article. Hope you enjoy your new WordPress form!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to create a built-in contact form for your WordPress theme

Go to Source

So, what are custom post types? That’s simple, custom post types are like a blog post or page, but of a custom defined type.
As an example, I decided to list some promo codes on my other blog CatsWhoBlog. I could have used a good old static page, but updating it and adding new promo codes would have been a pain.

So I created a custom post type, named coupon and a page template to list all coupons. It’s as simple as that, and now managing coupons & promo codes is extremely easy:

Creating the post type

Ok, let’s code. The first thing to do is to create a custom post type. To do so, pick up your theme functions.php file, and add the following:

function create_my_post_types() {
    register_post_type('coupons',
        array(
            'label' => __('Coupons'),
            'singular_label' => __('Coupon'),
            'public' => true,
            'supports' => array(
                'title',
                'excerpt',
                'comments',
                'custom-fields'
	    ),
	    'rewrite' => array(
	        'slug' => 'coupons',
	        'with_front' => false
	    ),
        )
    );
}
add_action( 'init', 'create_my_post_types' );

Once you saved functions.php, you should notice that a new tab appeared in your WordPress dashboard, as shown in the picture below:

So what does this code do?
First, I have created a function which registers a new post type, named coupons. I gave the following parameters to the register_post_type() function:

• label: Nicename of your post type.
• singular_label: Pretty self explanatory, the singular label of your post type.
• public: Allows post type to be seen publicly.
• supports: Array of data of what the post type supports (editor, excerpt, comments, custom fields, etc…)
• rewrite: Parameters for url rewriting and general post type display.

The complete parameter list can be found on WordPress Codex.

Then, I “hooked” this function to WordPress init() function using add_action().

Adding data

Now that the post type has been created, you can add data by clicking on the “Add Coupon” (Or whatever you named it) link in WordPress dashboard menu.

You should see the following:

Creating a page template to list custom post types

Now that we have created a custom post type and added some custom posts, we still have to display it. To do so, I have used a page template. You can easily reuse the following code, or adapt it to display in your blog sidebar, for example.
If you want to see a demo of the page template, just click here.

<?php
/*
Template Name: Promo codes Page
*/
?>
<?php get_header() ?>

	<div id="container">
		<div id="content" class="coupons">
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<?php the_content(); ?>

			<?php global $wp_query;
			$page_num = $paged;
			if($pagenum='') $pagenum=1;

			$wp_query = new WP_Query("showposts=20&post_type=coupons&post_status=publish&paged=".$page_num);

			while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

				<div class="post" id="post-<?php the_ID(); ?>">
					<h2><?php the_title(); ?></h2>
					<div class="exerpt"><?php the_excerpt(); ?></div>
				</div><!-- .post -->

			<?php endwhile; ?>

			<div class="navigation"><p><?php posts_nav_link(); ?></p></div>

		</div><!-- #content -->
	</div><!-- #container -->

<?php get_sidebar() ?>
<?php get_footer() ?>

As you can see, the code I’ve used is definitely easy and self-explanatory. In order to fetch a specific post type, you have to specify the parameter post_type=coupons.

That’s all for today, hope you enjoyed this tutorial!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to create a side blog with WordPress 3.0

Go to Source

On user-submitted forms, you may want to remove all unnecessary html tags. Doing so is easy using the strip_tags() function:

$text = strip_tags($input, "");

Source: http://phpbuilder.com/columns/Jason_Gilmore060210.php3?page=2

Get the text between $start and $end

This is the kind of function every web developer should have in their toolbox for future use: give it a string, a start, and an end, and it will return the text contained with $start and $end.

function GetBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
    return '';
}

Source: http://www.jonasjohn.de/snippets/php/get-between.htm

Transform URL to hyperlinks

If you leave a URL in the comment form of a WordPress blog, it will be automatically transformed into a hyperlink. If you want to implement the same functionality in your own website or web app, you can use the following code:

$url = "Jean-Baptiste Jung (http://www.webdevcat.com)";
$url = preg_replace("#http://([A-z0-9./-]+)#", '$0', $url);

Source: http://phpbuilder.com/columns/Jason_Gilmore060210.php3?page=2

Split text up into 140 char array for Twitter

As you probably know, Twitter only accepts messages of 140 characters or less. If you want to interact with the popular social messaging site, you’ll enjoy this function for sure, which will allow you to truncate your message to 140 characters.

function split_to_chunks($to,$text){
	$total_length = (140 - strlen($to));
	$text_arr = explode(" ",$text);
	$i=0;
	$message[0]="";
	foreach ($text_arr as $word){
		if ( strlen($message[$i] . $word . ' ') <= $total_length ){
			if ($text_arr[count($text_arr)-1] == $word){
				$message[$i] .= $word;
			} else {
				$message[$i] .= $word . ' ';
			}
		} else {
			$i++;
			if ($text_arr[count($text_arr)-1] == $word){
				$message[$i] = $word;
			} else {
				$message[$i] = $word . ' ';
			}
		}
	}
	return $message;
}

Source: http://snipplr.com/view.php?codeview&id=31648

Remove URLs from string

When I see the amount of URLs people try to leave in my blog comments to get traffic and/or backlinks, I think I should definitely give a go to this snippet!

$string = preg_replace('/\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$]/i', '', $string);

Source: http://snipplr.com/view.php?codeview&id=15236

Convert strings to slugs

Need to generate slugs (permalinks) that are SEO friendly? The following function takes a string as a parameter and will return a SEO friendly slug. Simple and efficient!

function slug($str){
	$str = strtolower(trim($str));
	$str = preg_replace('/[^a-z0-9-]/', '-', $str);
	$str = preg_replace('/-+/', "-", $str);
	return $str;
}

Source: http://snipplr.com/view.php?codeview&id=2809

Parse CSV files

CSV (Coma separated values) files are an easy way to store data, and parsing them using PHP is dead simple. Don’t believe me? Just use the following snippet and see for yourself.

$fh = fopen("contacts.csv", "r");
while($line = fgetcsv($fh, 1000, ",")) {
    echo "Contact: {$line[1]}";
}

Source: http://phpbuilder.com/columns/Jason_Gilmore060210.php3?page=1

Search for a string in another string

If a string is contained in another string and you need to search for it, this is a very clever way to do it:

function contains($str, $content, $ignorecase=true){
    if ($ignorecase){
        $str = strtolower($str);
        $content = strtolower($content);
    }
    return strpos($content,$str) ? true : false;
}

Source: http://www.jonasjohn.de/snippets/php/contains.htm

Check if a string starts with a specific pattern

Some languages such as Java have a startWith method/function which allows you to check if a string starts with a specific pattern. Unfortunately, PHP does not have a similar built-in function.
Whatever- we just have to build our own, which is very simple:

function String_Begins_With($needle, $haystack {
    return (substr($haystack, 0, strlen($needle))==$needle);
}

Source: http://snipplr.com/view.php?codeview&id=2143

Extract emails from a string

Ever wondered how spammers can get your email address? That’s simple, they get web pages (such as forums) and simply parse the html to extract emails. This code takes a string as a parameter, and will print all emails contained within. Please don’t use this code for spam

function extract_emails($str){
    // This regular expression extracts all emails from a string:
    $regexp = '/([a-z0-9_\.\-])+\@(([a-z0-9\-])+\.)+([a-z0-9]{2,4})+/i';
    preg_match_all($regexp, $str, $m);

    return isset($m[0]) ? $m[0] : array();
}

$test_string = 'This is a test string...

        test1@example.org

        Test different formats:
        test2@example.org;
        <a href="test3@example.org">foobar</a>
        <test4@example.org>

        strange formats:
        test5@example.org
        test6[at]example.org
        test7@example.net.org.com
        test8@ example.org
        test9@!foo!.org

        foobar
';

print_r(extract_emails($test_string));

Source: http://www.jonasjohn.de/snippets/php/extract-emails.htm

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

10 PHP code snippets for working with strings

Go to Source

If you have to remember only one of all the tips I’m going to give you in this post, it should be this one. In fact, an html email is not a website, so you shouldn’t try to embed a website into an email.

Some years ago, I used to work for a French TV channel and I often had to slice some PSD’s into html emails. The PSD’s contained gradients, funky fonts, and even animated gifs. As a result, the work (despite all efforts I’ve put in it) looked different from one email client to another, the fonts had to be replaced by Arial, and the whole email was extremely heavy and highly relied on images.

On the other hand, a simple html email will loaded smoothly, and will be more pleasant to read.

Don’t abuse images

An image is worth a thousand words, but it may also take forever to load. I have received many emails that consisted of a few lines of text and nothing else but big images. As a result, the recipient had to wait until the image was loaded (Which can sometimes takes up to 5 seconds!) in order to read the information embedded in the email.

This is, in my opinion, a waste of time for the recipient, as well as a waste of money for the sender: Most people won’t wait 5 seconds in order to have the big image you send them loaded. They’ll trash the email. It’s as simple as that.

An html email should be beautiful and pleasurable to view, but don’t over do it. Like I’ve just said, keep it simple, you won’t regret it.

Work with tables

As many email clients handle CSS worst than IE6 (Yes, I’m not joking), you shouldn’t even try to make advanced layouts using CSS. Instead, you should do a jump 10 years ago and say hello to tables, tr’s and td’s again.

If you’re like me, you’re a CSS fan, and this might sound very frustrating. In fact, having to code the dirty way is never pleasant, but you don’t have much of a choice. Do not hesitate to test by yourself: Chances are that you’ll soon be using tables again.

Always use images from your server

Among html email worst practices I ever saw, embedding images directly in the email definitely arrived at good place. This is wrong in many points: First, it will make the email heavier (I’ve seen 300ko messages!), and secondly, there’s a strong risk that the recipient email client block those images.

What you should do is to create a hierarchy of directories on your server, for example Newsletters and then May_2010, and upload images for your html email in it. Once done, simply call them using absolute url paths:

<img src="http://www.catswhocode.com/images/cat.jpg" alt="A cat" />

Write your CSS inline and use html attributes

In email clients, the lack of CSS support is definitely something to keep in mind. Don’t try linking to an external CSS file, and try to avoid as many CSS declarations as possible in the <head> section of your document.

It may be dirty, but the best way to make sure your CSS will be (quite) correctly interpreted by the recipient’s client is to code your CSS the inline way, as shown in the example below:

<p style="background:#069; color: white;">A new background and font color with inline CSS</p>

Another “dirty but effective” option to consider is the use of html attributes, such as background or bgcolor:

<body bgcolor="#069">

Don’t forget the text format

It may seems a bit obsolete in 2010, but many people, including myself, prefers the good old “plain text” format than html emails. When creating an email list subscription form, try to allow the visitor to choose between the html and plain text format.

Make sure your emails display in various clients

When creating a website, any serious developer will test its render on various browsers. This should be the same with html emails: people use a wide variety of clients and in order to be professional you should try to support most of them.

In my opinion, the following clients should be supported: Gmail, Yahoo mail, Mozilla Thunderbird, Apple Mail and Microsoft Outlook. below, you’ll find two great guides about CSS in html emails:

• Guide to CSS support in email clients: A very interesting guide describing which CSS properties can be used depending on the user’s email client. PDF and Excel versions are downloadable.
• CSS3 support in email clients : Enjoying CSS3? Here’s another great resource brought to you by Campaign Monitor, showing the few CSS3 properties you can already use in your html emails.

Use Google Analytics to track conversions

Sending a good html email is definitely a great thing, but your goal is to have people click on it and visit your site. There’s lots of way to track clicks on emails, but one of the easiest is to use Google Analytics, that you’re probably already using on your website.

I’ve never been a big email list sender so I never experimented with Google Analytics conversion tracking. Though, it looks like doing so is very easy: All you have to do is to add some GET parameters to your links, as shown in the example below:

<a href="http://www.mysite.com/page.php?utm_campaign=fall-sale&utm_medium=email&utm_source=female-list">Click here</a>

However, if you want to know more about click tracking using Google Analytics, you should have a look at this article.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Best practices for coding HTML emails

Go to Source

Add a favicon

A favicon is a small image displayed by modern web browsers. It is a must have for all websites, because it allows your visitors to quickly visualize your site among others when they have lots of browser tabs open at the same time.
This handy code will add your favicon to your theme. Make sure a favicon.png file is in your child theme images directory, and then paste the code in your functions.php file:

function childtheme_favicon() { ?>
	<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.png" />
<?php }
add_action('wp_head', 'childtheme_favicon');

Source:

Add an Internet Explorer specific stylesheet

Who doesn’t hate Internet Explorer? Unfortunately, most clients will require developers to make their site IE-compliant. And the best way to do so is to use some conditional comments and a dedicated stylesheet.
Create a file named ie.css in your child theme directory, and then insert the following code in your functions.php file:

function childtheme_ie_style() { ?>
	<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="http://www.webdevcat.com/wp-content/themes/webdevcat/ie.css" />
	<![endif]-->
<?php }
add_action('wp_head', 'childtheme_ie_style');

Modify Doctype

By default, Thematic outputs a XHTML 1.0 transitional doctype. If for some reason, you prefer using another kind of doctype, pasting the code below in your functions.php will do the trick.

function childtheme_create_doctype($content) {
 $content = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
 $content .= "\n";
 $content .= '<html xmlns="http://www.w3.org/1999/xhtml"';
 return $content;
}
add_filter('thematic_create_doctype', 'childtheme_create_doctype');

Use Feedburner RSS feeds

Feedburner is very popular among bloggers. If you want to replace default rss feeds by feedburner feeds in Thematic, this code is for you.

function childtheme_rssfeeds($content) {
	$content = "\t";
	$content .= "<link rel=\"alternate\" type=\"application/rss+xml\" href=\"";
	$content .= "http://feeds2.feedburner.com/Catswhocode";
	$content .= "\" title=\"";
	$content .= wp_specialchars(get_bloginfo('name'), 1);
	$content .= " " . __('RSS feed', 'thematic');
	$content .= "\" />";
	$content .= "\n";
	return $content;
}
add_filter('thematic_rss', 'childtheme_rssfeeds');

Add Google Analytics code to your Thematic child theme

Google Analytics is another free and very useful service. In order to allow GA to collect your visitor information and create your stats, you have to insert a small piece of Javascript on your footer.php file.
Insert this code in your functions.php file, save it, and you’re done. Of course, don’t forget to replace the Google Analytics code with your own!

function ga(){ ?>
	<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
	try {
	var pageTracker = _gat._getTracker("UA-XXXXX-10");
	pageTracker._trackPageview();
	} catch(err) {}</script>
<?php }
add_action('wp_footer', 'ga');

Modify Thematic footer credit

If you’re building a Thematic child theme for a client, you may want to insert your credit link in the footer text. The following code will do it. Don’t forget to give credit to Ian Stewart for his awesome work on the Thematic theme framework!

function my_footer($thm_footertext) {
	$thm_footertext = 'Copyright &copy; 2010 Jean-Baptiste Jung. <a href="http://www.webdevcat.com">WebDevCat.com</a> is obviously powered by <a href="http://www.wordpress.org">WordPress</a> &amp; the <a href="http://www.themeshaper.com/thematic">Thematic Theme framework</a>.';
	return $thm_footertext;
}
add_filter('thematic_footertext', 'my_footer');

Display Thematic menu above header

Want to have your navigation menu above your site header? That’s not a problem. This code will remove the menu from below the header and then put it above it.

function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
    add_action('thematic_aboveheader','search_access',9);
}
add_action('wp','remove_thematic_actions');

Change “more” link text

Thematic “Read More” link displays Read More » by default. The following code allow you to change the “Read More” text.

function childtheme_more_text($content) {
	$content = 'Click to read the rest!';
	return $content;
}
add_filter('more_text', 'childtheme_more_text');

Change gravatar size in Thematic comments

By default, Thematic displays 35px*35px gravatars. If you want to change this size, no problem: Just paste this code in, as usual, your beloved functions.php file.

function childtheme_avatarsize() {
    return '56';
}
add_action( 'avatar_size', 'childtheme_avatarsize' );

Source: http://themeshaper.com/forums/topic/on-using-avatars-in-thematic

Remove Thematic menu on specific page template

If you want to make a squeeze page on your site or blog using Thematic, that’s quite easy: You only have to create a page template and remove the menu. To do so, just paste the code below in your functions.php file.
Don’t forget to set your page template name on line 2.

function remove_access() {
    if (is_page_template('affiliate.php')) {
        remove_action('thematic_header','thematic_access',9);
    }

add_action('wp_head','remove_access');
}

Source: http://themeshaper.com/forums/topic/conditionally-removing-thematic_access

By the way, if you’re interested in Thematic Theme help, don’t hesitate to ask me. I just started freelancing and I’m ready to help you for a reasonable price.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Thematic WordPress Theme Toolbox: 10 extremely useful hooks

Go to Source

MySQL Format Date helps you to format your dates using the MySQL DATE_FORMAT function. Just select a common date format and then change it to your suit your needs. The MySQL DATE_FORMAT code will be generated at the bottom of the page which you can then copy into your query.
Visit site: http://www.mysqlformatdate.com

Script Src

Are you tired of hunting the Internet in order to find the script tag for the latest version of the Javascript library of your choice? ScriptSrc.net has compiled all the latest versions of jQuery, Mootools, Prototype and more in a single page which lets you copy it in your browser clipboard with a single click.

Visit site: http://scriptsrc.net

Em Chart

I never been a fan of ems in CSS files, but sometimes you have to deal with it. In that case, Em chart will translate ems to pixels so you’ll save time and hassle.

Visit site: http://aloestudios.com/tools/emchart

Twitter API Explorer

If you’re using the Twitter API in the site you build, you’ll for sure enjoy this very handy website which allow you to search through the Twitter API. Even better, the website can generate ready-to-use code snippets. A real time gain for you and your clients!

Visit site: http://twitapi.com/explore

Browser Sandbox

Cross browser compatibility is definitely one of the biggest problems a web developer has to face in his daily job. The browser sandbox lets you run any Windows browser from the web. The only bad thing is that you must run a Windows machine: The app does not work on Macs and GNU/Linux.

Visit site: http://spoon.net/browsers

PHP Forms

Web forms are one of the most important part of a website, but creating them is also very time-consuming. So, what about using a website that can speed up your form development for free?
PHP forms allows you to create advanced forms that can fit the needs of most websites.

Visit site: http://www.phpform.org

.htaccess editor

A .htaccess file is a must have for any website. Don’t know how to write one? No problem, just visit this site to create your .htaccess file using a wizard. It doesn’t allow very advanced stuff, but the results are great for 95% of the websites you’ll make.

Visit site: http://www.htaccesseditor.com/en.shtml

Smush it!

Images may be worth a thousand words, they’re also well known to use a lot of bandwidth. Images can be optimized for the web using programs like Photoshop; but if you don’t own a copy of this software or simply don’t have a clue how to do it, smush.it is what you need.
Brought to you by Yahoo developers network, Smush.it is an online tool that will reduce your image size without reducing their quality. For WordPress users, a very handy plugin for your favorite blogging engine is available here.

Visit site: http://developer.yahoo.com/yslow/smushit/

CSS Compressor

Especially on site with many different page layouts, CSS files can become huge and use a lot of server bandwidth. This tool, named CSS Compressor, can consequently reduce the size of any CSS file by removing comments, indentation and more.
Even better, compression level can be configured to fit your needs.

Visit site: http://www.csscompressor.com

Test everything

This site is a definitive must-have for your bookmarks: As the name says, Test everything allows you to test lot of things such as XHTML and CSS markup, PageRank, back-links, and a lot more.

Visit site: http://tester.jonasjohn.de

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

10 sites developers should have in their bookmarks

Go to Source

I always loved how A List Apart numbers its posts. The following hack will let you do the same with your own blog, using a custom field.

Implementing this hack is quite simple. First, paste the following function into your functions.php file:

function updateNumbers() {
  global $wpdb;
  $querystr = "SELECT $wpdb->posts.* FROM $wpdb->posts WHERE $wpdb->posts.post_status = 'publish' AND $wpdb->posts.post_type = 'post' ";
$pageposts = $wpdb->get_results($querystr, OBJECT);
  $counts = 0 ;
  if ($pageposts):
    foreach ($pageposts as $post):
      setup_postdata($post);
      $counts++;
      add_post_meta($post->ID, 'incr_number', $counts, true);
      update_post_meta($post->ID, 'incr_number', $counts);
    endforeach;
  endif;
}  

add_action ( 'publish_post', 'updateNumbers' );
add_action ( 'deleted_post', 'updateNumbers' );
add_action ( 'edit_post', 'updateNumbers' );

Once done, you can display the post number with the following code. Note that it have to be used within the loop.

<?php echo get_post_meta($post->ID,'incr_number',true); ?>

Source: http://www.wprecipes.com/how-to-display-an-incrementing-number-next-to-each-published-post

Allow your contributors to upload files

If you’re like me, you have guest contributing articles on your blog and you might be annoyed that the contributor role doesn’t allow file uploads. Most blog posts need images to stand out of the crowd so
this hack is extremely handy: Just paste it on your function.php file and your contributors will be allowed to upload files in the WordPress dashboard. How cool is that?

if ( current_user_can('contributor') && !current_user_can('upload_files') )
    add_action('admin_init', 'allow_contributor_uploads');

function allow_contributor_uploads() {
    $contributor = get_role('contributor');
    $contributor->add_cap('upload_files');
}

Source: http://www.wprecipes.com/wordpress-tip-allow-contributors-to-upload-files

Display “time ago” dates

Twitter has a very cool function which displays the elapsed time since a tweet has been published. What about doing the same with WordPress? Of course it’s possible!
This code just needs to be pasted in your functions.php file. Once you saved the file, posts that were published less than 24 hours ago will display “Published XX ago” instead of regular dates.

add_filter('the_time', 'timeago');

function timeago() {
    global $post;
    $date = $post->post_date;
    $time = get_post_time('G', true, $post);
    $time_diff = time() - $time;
    if ( $time_diff > 0 && $time_diff < 24*60*60 )
        $display = sprintf( __('%s ago'), human_time_diff( $time ) );
    else
        $display = date(get_option('date_format'), strtotime($date) );

    return $display;
}

By the way, if you’re on Twitter do not hesitate to follow me!
Source: http://aext.net/2010/04/display-timeago-for-wordpress-if-less-than-24-hours/

WordPress navigation outside the loop

WordPress provides some functions which allow you to link to the next and previous posts. However, those functions have to be used within the loop. Jeff Starr, who wrote the Digging into WordPress book, has the solution to this problem.
Simply paste the code below on your single.php file, where you’d like to link to the next and previous posts. Or even better, put the code in a php file and then include it in your theme file.

<?php if(is_single()) { // single-view navigation ?>
	<?php $posts = query_posts($query_string); if (have_posts()) : while (have_posts()) : the_post(); ?>
		<?php previous_post_link(); ?> | <?php next_post_link(); ?>
	<?php endwhile; endif; ?>
<?php } else { // archive view navigation ?>
		<?php posts_nav_link(); ?>
<?php } ?>

Source: http://digwp.com/2010/04/post-navigation-outside-loop/

Disallow theme switching

If you’re like me, you’ve created WordPress themes for your clients and already face a problem: The client “explored” the WordPress dashboard and “accidentally” switched the theme.
Using WordPress actions, we can easily remove the “themes” menu and consequently prevent the risk of having a client switching the theme. The code below just has to be pasted in your functions.php. The “themes” menu will be removed once the file is saved.

add_action('admin_init', 'remove_theme_menus');
function remove_theme_menus() {
	global $submenu;	

	unset($submenu['themes.php'][5]);
	unset($submenu['themes.php'][15]);
}

Source: http://soulsizzle.com/quick-tips/stopping-clients-from-switching-their-wordpress-theme/

Get rid of unused shortcodes in your posts

WordPress shortcodes are extremely useful, but they have a weak point: If you use a shortcode in your posts and then stop to use it for some reason, the shortcode code (Like [shortcode] for example) will stay in your posts.

To get rid of unused shortcodes, you just have to execute this line of SQL code. This can be done using PhpMyAdmin or the SQL command line interpreter. Don’t forget to replace [tweet] by the unused shortcode you’d like to delete from your posts.

UPDATE wp_post SET post_content = replace(post_content, '[tweet]', '' );

Source: http://www.wprecipes.com/wordpress-tip-get-rid-of-unused-shortcodes

Switch WordPress theme programmatically

Recently, I worked on an interesting project where I had to switch the blog theme automatically. As the current WordPress theme name is saved in the wp_options table of your WordPress database, we can easily change it.
The cleanest way to do it is definitely to use the update_option() function, as shown in the function below. Paste it in your functions.php file.

function updateTheme($theme){
    update_option('template', $theme);
    update_option('stylesheet', $theme);
    update_option('current_theme', $theme);
}

Once you’ve added the function to your functions.php file, you can call it wherever you need it:

<php updateTheme('default'); ?>

Modify WordPress dashboard footer text

Another good tip for those who create WordPress themes for clients is to modify the WordPress dashboard footer text, and add (for example) a link to your support forum. The only thing you have to do is to copy this code and paste it in functions.php:

function remove_footer_admin () {
    echo "Your own text";
} 

add_filter('admin_footer_text', 'remove_footer_admin');

Source: http://www.wprecipes.com/wordpress-tip-how-to-change-the-dashboard-footer-text

Programmatically Creating Posts in WordPress

If for some reason you need to programmatically insert posts in WordPress database, you’ll be amazed to see how easy is it. The wp_insert_post() takes an array of data as a parameter, and then return the post ID.

global $user_ID;
$new_post = array(
'post_title' => 'My New Post',
'post_content' => 'Lorem ipsum dolor sit amet...',
'post_status' => 'publish',
'post_date' => date('Y-m-d H:i:s'),
'post_author' => $user_ID,
'post_type' => 'post',
'post_category' => array(0)
);
$post_id = wp_insert_post($new_post);

Source: http://www.webmaster-source.com/2010/02/09/programmatically-creating-posts-in-wordpress

WordPress 3.0: Query custom post types

WordPress 3.0 should be released soon. And I don’t know about you, but personally, I can’t wait. Lots of exiting features are scheduled. One of them is particularly interesting in my opinion: the custom post types, which allow you to define a custom type for a post.
In order to be able to retrieve posts of a specific type from a WordPress database, you can use the following loop, which will get the albums post type:

<ul>
<?php global $wp_query;
$wp_query = new WP_Query("post_type=albums&post_status=publish");

while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>

</ul>

Source: http://www.catswhocode.com/blog/8-useful-code-snippets-to-get-started-with-wordpress-3-0

Please note that I’m currently accepting freelance work; so if you need any kind of WordPress help, I’ll be happy to help you. Simply send me an email and I’ll get back to you.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Top WordPress hacks of early 2010

Go to Source

A very clean way to change an element look and feel is to add a css class, instead of adding inline styles. Using jQuery, this is pretty easy to do:

$('#myelement').addClass('myclass');

Removing a CSS class from a specific element

It’s great to be able to add some CSS classes, but we also need to know how to remove unwanted classes. The following line of code will do that:

$('#myelement').removeClass('myclass');

Check if a specific element has a CSS class

If your application or site is frequently adding and removing classes to a particular element, it can be very useful to be able to check out if an element has a certain CSS class.

$(id).hasClass(class)

Switch CSS using jQuery

As we saw with the previous examples, adding or removing css styles to an element is very simple using jQuery. But what if you want to completely remove the document css file and attach a new stylesheet? Good news, it is extremely simple as well, as shown in the following example:

$('link[media='screen']').attr('href', 'Alternative.css');

Source: http://addyosmani.com/blog/50-jquery-snippets-for-developers/

Append HTML to an element

When you need to append some html to an element, the append() method is a life saver:

$('#lal').append('sometext');

Check if an element exists

When working with Javascript, we often need to check if an element exists or not. Using jQuery and the length property, it is very simple to do: If length == 0, no elements are used on the page. Otherwise, some are used.

if ($('img').length) {
    log('We found img elements on the page using "img"');
} else {
    log('No img elements found');
}

Source: http://jqueryfordesigners.com/element-exists/

Get the parent element of an element

When working with the DOM, you may need to know which element is the direct parent of another element. The closest() method will let you know:

var id = $("button").closest("div").attr("id");

Source: http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery

Get element siblings

The siblings() method is a very handy tool to get siblings of an element. As shown below, using this method is extremely simple:

$("div").siblings()

Remove an option from a select list

When working with select lists, you may want to update the content according to the user actions. To remove an option from a select list, the following code will do the trick:

$("#selectList option[value='2']").remove();

Source: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/

Get the selected option as text

Extremely useful when you need to quickly check out what a visitor selected from your select list.

$('#selectList :selected').text();

Apply a “zebra” effect on tables

When using tables, it is a good idea, for better readability, to give a different style to one line out of two. Using jQuery, this can be done easily, without any additional html markup.

$("tr:odd").addClass("odd");

Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Count children of an element

If you’d like to count how many div elements are children of #foo, the following line will let you know. Simple and efficient!

$("#foo > div").length

Source: http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Manipulating the DOM with jQuery: 10+ useful code snippets

Go to Source

Custom post type are an incredible step forward for WordPress, because it will allow developers to create post types according to their needs.
For now, we have posts, and pages. With WordPress 3.0, we’ll be able to create a new post type called products, where a client can sell his products only, while regular post for his blog.

Creating a custom post type is easy: All you have to do is to open your theme functions.php file and paste the following:

$args = array(
        'label' => __('Products'),
        'singular_label' => __('Product'),
        'public' => true,
        'show_ui' => true,
        'capability_type' => 'page',
        'hierarchical' => false,
        'rewrite' => true,
        'query_var' => 'products',
        'supports' => array('title', 'thumbnail')
);
register_post_type( 'album' , $args );

Once you saved the file, login to your WordPress dashboard and have a look at the navigation on the left: A new post type, named Products, has been added.
Source: http://codex.wordpress.org/Function_Reference/register_post_type

Custom post types with custom taxonomies

In the previous example, I’ve shown you how to create a custom post type, which is pretty useful to use WordPress as a real CMS and not a simple blog publishing platform.

Now, let’s see something a little bit more complex, but extremely interesting: Creating a custom post type associated with custom taxonomies. For those who don’t know, a taxonomy is a term (such as category, tag or anything else) related to posts. For more information about taxonomies, you should have a look at WordPress Codex.

In this example, we’ll create a custom post type named Albums, which belong to “Genres” (the custom categories) and have “Performer” as tags. This snippet has to be pasted in your functions.php file. With those 27 lines of codes, you can create a fully functional music albums archive. Ain’t that powerful?

function post_type_albums() {
	register_post_type(
                     'albums',
                     array('label' => __('Albums'),
                             'public' => true,
                             'show_ui' => true,
                             'supports' => array(
                                        'post-thumbnails',
                                        'excerpts',
                                        'trackbacks',
                                        'comments')
                                )
                      );
// Adding the Custom Taxonomy for Genres. Here we can create categories specific for this post type.
	register_taxonomy( 'genres', 'albums', array( 'hierarchical' => true, 'label' => __('Genres') ) );

// Adding the Custom Taxonomy for Performer. Here we can add tags specific for this post type.
        register_taxonomy( 'performer', 'albums',
		array(
                         'hierarchical' => false,
			 'label' => __('Performer'),
			 'query_var' => 'performer',
			 'rewrite' => array('slug' => 'performer' )
		)
	);
}
add_action('init', 'post_type_albums');

Source: http://wpspecial.net/2010/03/how-to-add-custom-post-types-in-wordpress/

Query custom post types

Now that you’ve learned how to create custom post types, the next step is to learn how to retrieve them from the WordPress database and display it on your blog.

Good news for developers, there’s nothing hard or new in the process. Custom post types can be retrieved easily, using the WP_Query object.
The following example will create a custom loop which will get only the albums custom post type.

<ul>

<?php global $wp_query;
$wp_query = new WP_Query("post_type=albums&post_status=publish");

while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>

Source:

Enable multisite feature

One of the most exiting new feature of WordPress 3.0 is definitely multisite management. In brief, with a single installation of WordPress you’ll be able to run a network of WordPress blog. How cool is that?

To take advantage of this feature, simply paste the following line of code in your wp-config.php file. This file is located at the root of your WordPress install.

define('WP_ALLOW_MULTISITE', true);

Source: http://wptheming.com/2010/03/wordpress-3-0-enable-network/

Custom author profiles

Most of the top blogs of the industry do not have a single author but a team of different contributors. WordPress allows you to create author pages, but WordPress 3.0 is introducing a new function which will allow you to use different templates for different authors, like we can currently do with categories.

All you have to do is to create an author page named author-XX.php where XX is either the author ID or nicename. For example, if your user nicename is “john”, you’ll have to call the file author-john.php.

Source: http://codex.wordpress.org/Function_Reference/get_author_template

Add custom backgrounds

WordPress 3.0 is introducing a new feature that will for sure be loved by non tech-friendly users: Custom background. The feature allows the user to upload a background in his WordPress dashboard, specify its position, and automatically have it added to his blog.

Of course, the theme used by the blogger has to support this feature, otherwise the uploaded background will not be visible. To do so, simply open your functions.php file and paste the following line:

add_custom_background();

Style WordPress editor using CSS

WordPress features a WYSIWYG editor, which allow you to see text in bold, italic, and so on. But some people want more, such as being able to visualize their blog post in the blog font and colors.

This new feature allows you to create a css file (named editor-style.css in the example below) and link it to the editor for a better WYSIWYG rendering. Simply paste this code snippet to your functions.php file.

add_filter('mce_css', 'my_editor_style');
function my_editor_style($url) {
  if ( !empty($url) )
    $url .= ',';
  // Change the path here if using sub-directory
  $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-style.css';

  return $url;
}

Source: http://azaozz.wordpress.com/2010/01/02/can-themes-style-the-visual-editor/

Make your theme compatible with WordPress 3.0 menus

WordPress 3.0 is going to feature a totally new menu system, which will allow users to add only the desired pages, add categories, and more. Good news for theme developers; adding WP 3.0 menu support to your themes is extremely easy.

To do so, open functions.php and add the following line:

add_theme_support( 'nav-menus' );

Once added, you can use the brand new wp_nav_menu() function in your theme files:

wp_nav_menu('sort_column=menu_order&container_class=navigation');

As you can see, it accepts the same kind of parameters than the good ol’ wp_list_categories() function.
Source: http://wpspecial.net/2010/04/menu-support-for-wordpress-3-0-themes/

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

8 useful code snippets to get started with WordPress 3.0

Go to Source

When coding a WordPress theme or plugin, you have to think about those that doesn’t speak English. Using the PHP language, two very useful functions are available for you to create a translatable theme or plugin:

The first is the function _e(), which prints on screen the desired text, translated into the user language:

_e("Text to translate", "textdomain");

The second is __() wich is basically the same than _e(), but returns the text:

function say_something() {
    return __("Text to translate", "textdomain");
}

By using those functions, you make your work translatable in any language, which is a very great thing for people that blog in another language than English.

Additional resources:

• I18n for WordPress Developers: A complete guide about using the Gettext libraries and tools to internationalize your themes and plugins.
• How to make a translatable WordPress theme: A complete tutorial about creating a translatable WordPress theme.
• WordPress Plugin: Codestyling Localization: A plugin to manage localization files.

Don’t reinvent the wheel: Use a framework

While many people thinks that a good developer is someone that can create quality code, they’re wrong: A good developer is a person who can write quality code, quickly. Being fast is a quality, because clients don’t want to wait, and time is money.

Being fast doesn’t mean writing crappy, untested code in order to get things done as soon as possible. Instead, being fast is all about not wasting time. In development, the most important waste of time someone can do is when you’re reinventing the wheel, i.e. recreating something instead of using the original.

Theme frameworks appeared in 2008. A theme framework is a WordPress theme which can be extended by a child theme. While there are many available frameworks, both free and premium, my favorite is definitely Thematic. You have to learn how Thematic works, which can take some time at first, but once done, you’ll be surprised by how fast you can create robust and optimized themes.

And for those who think that a framework doesn’t allow enough modifications to create any type of layout, you’re wrong: This site and CatsWhoBlog are both using Thematic.

Additional resources:

• WordPress Theme Frameworks explained: This post is interesting for those who don’t know what’s a theme framework and why they are time savers.
• Premium theme frameworks reviewed: A comparison between commercial (ie, non-free) theme frameworks for WordPress.
• How to easily create a Thematic child theme: An easy to follow tutorial for quickly being able to develop killer Thematic child themes.

Speed up development using community tools and templates

As a WordPress developer, most client requests I got were similar: They wanted a custom theme or plugin. The process of creating files and fill it with the required info (Such as plugin name, url, etc) is very simple but time consuming.

For this reason, you should definitely make use of what the community created for you: Themes and plugins templates, as well as a really interesting plugin called WP Dummy Content, which can automatically generate a bunch of pages, sub-pages, posts, etc for you to test the look and feel of the theme you’re building.

Resources

• The WordPress Starter Theme Project: A very useful set of files containing a blank style.css with theme name, author, URL, etc. tags at the top, a content-ready 404, archive, search, index, single post, and page files, a full, working comments.php file, a complete header.php set up with links to RSS, a stylesheet, and JS file and all you need to start developing a new WordPress theme.
• WP Dummy Content: a WordPress plugin that will generate a bunch of pages, sub-pages and posts which you specify. Titles and content are automatically generated for you as well, and you have a few choices as to the type and length of content.

Debug your code efficiently

As a developer, debugging code is something that you should be used to. Although debugging is rarely a bunch of fun, WordPress has some useful functions that will definitely make your life easier.

The WP_DEBUG constant has to be placed in your wp-config.php file. If defined and set to true, error messages will be displayed.

define('WP_DEBUG', true);

If you’d like to modify WordPress built-in Javascript, you can enable debugging by defining the SCRIPT_DEBUG constant.

define('SCRIPT_DEBUG', true);

Additional resources

• WordPress debug techniques: An interesting guide for those who don’t want to spend hours debugging their code.
• Debug Theme, by Joost: The “Debug Theme” is a very special WordPress theme: instead of making your blog looking good, its purpose is to display useful information such as WordPress constants, security key-phrases, etc. A very handy tool when it comes to debugging!
• Theme Tester plugin: If you need to modify or create a new theme on a production site, this is a must have: This plugin allows you to show the regular theme to your visitors while you’re working on a new one.

Make use of hooks, actions and filters

WordPress has very interesting an useful features called actions and filters. While those are intensively used by Theme frameworks and some plugins, most newcomer’s in WordPress development are ignoring them.

Actions and filters allow you to modify, overwrite or surcharge an existing WordPress function, without having to edit the core files. For that reason, you should always make sure that both the wp_head() and wp_footer() functions have been implemented in the theme you coded:

<?php wp_head(); ?&gt
    ....
<?php wp_footer(); ?&gt

Using hooks, you can for example add a favicon to your theme without editing the header.php file. The following example is what I use to add a favicon to a Thematic child theme.

function add_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.png"/>
<?php }
add_action('wp_head', 'add_favicon');

Additional resources

• Understanding action hooks in WordPress: A great tutorial to start with WordPress action hooks.
• Hooks, actions and filters: The WordPress Codex always has lots of useful information about WordPress development. A great way to get started with this very useful feature!
• 10 useful WordPress hook hacks: An article I wrote for Smashing Magazine, which features 10 ready to use hooks example.

Code markup like a pro

A very important aspect of the quality of a WordPress theme is definitely how it is coded. In fact, I know many developers which are very good in PHP and other back-end technologies, but suck at front-end coding.
WordPress is XHTML valid and standard-compliant, so always make sure that your theme or plugin is as well before selling it to your client.

The idea of “pro front-end coding” is quite subjective, because not everyone has the same quality standards. However, any WordPress theme or plugin should be:

• XHTML valid: Although their usefulness is often discussed, in clients eyes, respect of web standards makes the difference between a poorly skilled amateur and a professional web developer.
• Semantically coded: When html tags are used semantically, this is not only the proper way to create a html document, it will also allow your client to get better search engine optimization results.
• No inline styles or Javascript actions: In-line styles always seem extremely useful at first, but when you have to modify someone else’s work and it’s filled with in-line styles, it quickly become a nightmare. Same goes for javascript actions, such as onmouseover and so on. Always put them in a separate file.

To learn more about front-end coding best practices, you should definitely have a look to my recent “Top 10 best practices for front-end web developers” article.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

Best practices for WordPress coding

Go to Source

Is a particular url valid? The following regexp will let you know.

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \?=.-]*)*\/?$/

Source: http://snipplr.com/view/19502/validate-a-url/

Validate US phone number

This regexp will verify that a US phone number is valid.

/^(\+\d)*\s*(\(\d{3}\)\s*)*\d{3}(-{0,1}|\s{0,1})\d{2}(-{0,1}|\s{0,1})\d{2}$/

Source: http://snippets.dzone.com/posts/show/597

Test if a password is strong

Weak passwords are one of the quickest ways to get hacked. The following regexp will make sure that:

• Passwords will contain at least (1) upper case letter
• Passwords will contain at least (1) lower case letter
• Passwords will contain at least (1) number or special character
• Passwords will contain at least (8) characters in length
• Password maximum length should not be arbitrarily limited

(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$

Source: http://imar.spaanjaars.com/QuickDocId.aspx?quickdoc=297

Get code within <?php and ?>

If for some reason you need to grab all the code contained within the <?php and ?> tags, this regexp will do the job:

<\?[php]*([^\?>]*)\?>

Source: http://snipplr.com/view/12845/get-all-the-php-code-between/

Match tel: urls

In a recent post, I showed you how you can use iPhone special link prfixes to automatically call someone.
This regular expression will match those tel: urls.

^tel:((?:\+[\d().-]*\d[\d().-]*|[0-9A-F*#().-]*[0-9A-F*#][0-9A-F*#().-]*(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*;phone-context=(?:\+[\d().-]*\d[\d().-]*|(?:[a-z0-9]\.|[a-z0-9][a-z0-9-]*[a-z0-9]\.)*(?:[a-z]|[a-z][a-z0-9-]*[a-z0-9])))(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*(?:,(?:\+[\d().-]*\d[\d().-]*|[0-9A-F*#().-]*[0-9A-F*#][0-9A-F*#().-]*(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*;phone-context=\+[\d().-]*\d[\d().-]*)(?:;[a-z\d-]+(?:=(?:[a-z\d\[\]\/:&+$_!~*'().-]|%[\dA-F]{2})+)?)*)*)$

Source: http://tools.ietf.org/html/rfc3966#section-3

Validate US zip code

When building a registration form, it is common to ask the user’s zip code. As forms are often boring, there’s a strong chance that the user will try to register false data. This regular expression will make sure he entered a valid American zip code.

^[0-9]{5}(-[0-9]{4})?$

Source: http://reusablecode.blogspot.com/2008/08/isvalidzipcode.html

Validate Canadian postal code

This regexp is very similar to the previous one, but it will match Canadian postal codes instead.

^[ABCEGHJ-NPRSTVXY]{1}[0-9]{1}[ABCEGHJ-NPRSTV-Z]{1}[ ]?[0-9]{1}[ABCEGHJ-NPRSTV-Z]{1}[0-9]{1}$

Source: http://reusablecode.blogspot.com/2008/08/isvalidpostalcode.html

Grab unclosed img tags

As you probably know, the xhtml standard requires all tags to be properly closed. This regular expression will search for unclosed img tags. It could be easily modified to grab any other unclosed html tags.

<img([^>]+)(\s*[^\/])>

Source: http://snipplr.com/view/6632/grab-any-unclosed-xhtml-img-tags/

Find all CSS attributes

This regexp will find CSS attributes, such as background:red; or padding-left:25px;.

\s(?[a-zA-Z-]+)\s[:]{1}\s*(?[a-zA-Z0-9\s.#]+)[;]{1}

Source: http://snipplr.com/view/17903/find-css-attributes/

Validate an IBAN

I have recently worked on a banking application and this one was definitely a life-saver. It will verify that the given IBAN is valid.

[a-zA-Z]{2}[0-9]{2}[a-zA-Z0-9]{4}[0-9]{7}([a-zA-Z0-9]?){0,16}

Source: http://snipplr.com/view/15322/iban-regex-all-ibans/

Validate a BIC code

Another one very useful for any banking application or website: This regexp will validate a BIC code.

([a-zA-Z]{4}[a-zA-Z]{2}[a-zA-Z0-9]{2}([a-zA-Z0-9]{3})?)

Source: http://snipplr.com/view/15320/bic-bank-identifier-code-regex/

If you’re interested in regular expressions, make sure you have read our “15 PHP regular expression for developers” post.

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

10+ regular expressions for efficient web development

Go to Source

In a design, bubbles can be great to illustrate a quote. In this article, talented designer Nicolas Gallagher will show you what he built with CSS3: Text bubbles, with no Javascript or images.

Source: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

Super Awesome Buttons with CSS3 and RGBA

CSS has always been great to enhance buttons; but using CSS3, the RGBa property, and of course a lot of creativity, you can create modern and clean buttons. The folks at Zurb will show you how in this great tutorial. Note that I enjoyed that technique so much that I used it on my own comment form!

Source: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Classy photo frame using CSS3

As I recently said on my other blog Cats Who Blog, images are very important in blogging, and in the Internet media in general.
In order to enhance your images and give them a unique look and feel, the box-shadow CSS3 property is a must. Here is the code used in the example below:

Source: http://www.change.org/actions/view/tell_the_senate_protect_polar_bears_from_global_warming

Easily Turn Your Images Into Polaroids with CSS3

Although this technique can be considered as experimental only (It doesn’t work on IE, as you can expect…), I have to admit that I was surprised to see that this demo only uses CSS3 and no Javascript at all.
The tutorial will show you how to use CSS3 to transform a simple image into a Polaroid.

Source: http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi

Fancy web form with field hints using only CSS3

Web forms are very important because this is the main way for your visitor to get in touch with you. But styling web forms isn’t easy, and in most web sites, forms are boring and quite ugly.
The following post will show you how to use CSS3 to create a stylish web form with field hints. And no, it does not require any Javascript.

Source: http://www.skyrocketlabs.com/articles/css3-web-form-hints.php

CSS3 Drop down Menu

Ah, drop down menus. Those are extremely popular and every designer or developer had to work with at least one in his career. So what about using the power of CSS3 to enhance drop downs? In this article, talented web designer Nick La will show you how to proceed. And I must say that the result is absolutely fantastic.

Source: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

CSS 3 selectors explained

CSS3 has lots of exiting properties, such as box-shadow and border-radius. But CSS3 also introduces new selectors, which can definitely make your life easier.
Although there’s nothing hard with these new selectors, it is important to learn what new selectors are available and how they work, so you can use them in your websites. The following tutorial is simple to follow and extremely efficient; a must read for anyone who works with cascading style-sheets!

Source: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Recreate Mac OSX interface using CSS3

Wow! This one totally rocks. As you can see in the screenshot below, the folks from CSS3.info had fun recreating Mac OSX user interface using CSS3 and some jQuery. Unfortunately, the method they used is not detailed, but you can still view the source and learn by the example.

Source: http://www.css3.info/wp-content/uploads/2007/08/colormoduletest.html

Letterpress Text Effect Using Photoshop and CSS

Typography is definitely something that can either make a design great, or totally ruin it. CSS3 introduced some really interesting properties to enhance the texts and titles of your designs.
In this post, you’ll learn how to create a “Letterpress” effect using CSS3 and Photoshop.

Source: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/

Creating a Polaroid photo viewer with CSS3 and jQuery

Seems that Polaroid’s are popular again: After the Zurb example I shown you earlier, here is another really cool way to create a gallery, using CSS3 and jQuery. The tutorial is easy to follow and the result is quite nice.

Source: http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

Any other really cool example of the power of CSS3? Let me know in a comment!

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 examples of futuristic CSS3 techniques

Go to Source

Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code.

Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing, as shown in the example below:

<div id="header">
  <div id="sub" class="first left">
    ...
  </div><!-- #sub.first.left -->
</div><!-- #header -->

Use a CSS reset

Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all element have no particular style so you can define your own without the risk of many cross-browser rendering issues.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Don’t use @import

CSS files can be included using the @import directive. This can be useful when, for example, you want to include a stylesheet into another. Another common practice is to include CSS file in html documents using the following:

<style type="text/css>
  @import url('a.css');
  @import url('b.css');
</style>

While it works, the @import directive is much slower than the other way to include stylesheets into a html document:

<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

It will not make a difference on low traffic websites, but if you have the chance to own a popular website, don’t waste your visitor’s time using @import.
Source: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” your images

Being a developer, I always found that optimizing my images for the web wasn’t easy. I tried the good old “Save for web” Photoshop command, but most of the time, I ended up with images that were either too big or without a sufficient quality.
As a result, I had the bad habit of using unoptimized images on my websites. This isn’t a problem when you don’t have to care about your site’s bandwidth, but after my recent switch on my vps.net virtual private server, I had to be careful with image sizes.

At this time, I found a very cool tool named Smush It: You enter your unoptimized image url, and Smush It will create a perfectly optimized image for you. You can save up to 70% of the file size, while keeping the original quality. As an example, all the images from my list of online code editors have been “smushed”.

Don’t mix CSS with HTML

As a markup language, the right use of HTML is to organize documents by defining a header, a footer, lists, blockquotes, etc. Some time ago, front-end web developers often used now deprecated HTML attributes to style a particular element.
Nowadays, the style attribute allows developers to insert CSS directly into a html document. This is very useful for testing or when you’re in a hurry. But the style attribute is bad practice, that goes completely against the CSS philosophy.

The following example illustrates how dirty and hard to read a simple line of code can become, with the style attribute:

<a href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

Don’t mix Javascript with HTML

Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your html documents. The following bad practice illustrates an onclick event:

<a id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

The same result can be achieved using unobstructed Javascript. In this example, I’m using the popular jQuery framework:

$(document).ready(function() {
  $('#cwc').click(function() {
    alert('I love this website');
  });
});

This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keep your html document clean.

Use conditional comments

You know it, IE sucks, and some clients suck even more by requiring you to create webpages which are compatible with this obsolete browser. To target specific versions of IE, you can use the well known IE hacks, as shown below:

height: 200px; /* normal browsers */
_height: 300px; /* IE6 */
.height: 250px; /* IE7 */
*height: 350px; /* All IEs */

Those hacks are extremely useful sometimes, but they are not the best way to target a specific version of IE, and it will cause your CSS validation to fail.

Instead, you should use the conditional comment shown below to target IE6.

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Place Javascript file at the bottom

A popular practice of the late 90’s/early 2000’s was to place Javascript files within the <head> and </head> tags. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after.

By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed.

    ...
    <script type='text/javascript' src='jquery.js?ver=1.3.2'></script>
  </body>
</html>

Use HTML semantically

HTML is not a programming language. It is a markup language, used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, and more.
If you started to create websites in the good old 90’s or in the beginning of the century, you know how dirty the markup was at the time. But happilly, it has evolved.
Among other things, it is important to use html element semantically. As an example, a navigation menu should always be an unordered list:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Blog</a></li>
</ul>

Test WHILE you build to avoid cross-browser issues

One of the biggest mistake I ever made when developing html, CSS, and javascript, was not to test my pages on multiple browser while I was writing them. Instead, I used to write all my code and just view in Firefox to see how it was rendered.
In theory, this should be good. But as you know, cross-browser issues are a major problem for front-end developers, especially due to IE. If you test your documents on Firefox/IE/Chrome while your writing it, cross-browser rendering problems will be much easier to fix. I have lost hours not doing it, so I hope this final tip will help you saving your precious time. To test on multiple versions of IE, I use this very handy tool. Happy coding

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

Top 10 best practices for front-end web developers

Go to Source

This first tip may seems obvious, but the fact is that most database problems come from badly-designed table structure.
For example, I have seen people storing information such as client info and payment info in the same database column. For both the database system and developers who will have to work on it, this is not a good thing.
When creating a database, always put information on various tables, use clear naming standards and make use of primary keys.
Source: http://www.simple-talk.com/sql/database-administration/ten-common-database-design-mistakes/

Know what you should optimize

If you want to optimize a specific query, it is extremely useful to be able to get an in-depth look at the result of a query. Using the EXPLAIN statement, you will get lots of useful info on the result produced by a specific query, as shown in the example below:

EXPLAIN SELECT * FROM ref_table,other_table WHERE ref_table.key_column=other_table.column;

Source: http://dev.mysql.com/doc/refman/5.0/en/using-explain.html

The fastest query… Is the one you don’t send

Each time you’re sending a query to the database, you’re using a bit of your server resources. This is why, on high traffic sites, the best thing you can do in order to speed up your database is to cache queries.

There’s lots of solutions to implement a query cache on your server. Here are a few:

• AdoDB: AdoDB is a database abstraction library for PHP. It allows you to use the database system of your choice (MySQL, PostGreSQL, Interbase, and way much more) and it is designed for speed. AdoDB provides a simple, yet powerful caching system. And last but not least, AdoDB is licenced under the BSD, which means that you can use freely on your projects. A LGPL licence is also available for commercial projects.
• Memcached: Memcached is a distributed memory caching system which is often used to speed up dynamic database-driven websites by alleviating database load.
• CSQL Cache: CSQL Cache is an open-source data caching infrastructure. Never tested it personally, but it seems to be a great tool.

Don’t select what you don’t need

A very common way to get the desired data is to use the * symbol, which will get all fields from the desired table:

SELECT * FROM wp_posts;

Instead, you should definitely select only the desired fields as shown in the example below. On a very small site with, let’s say, one visitor per minute, that wouldn’t make a difference. But on a site such as Cats Who Code, it saves a lot of work for the database.

SELECT title, excerpt, author FROM wp_posts;

Use LIMIT

It’s very common that you need to get only a specific number of records from your database. For example, a blog which is showing ten entries per page. In that case, you should definitely use the LIMIT parameter, which only selects the desired number of records.
Without LIMIT, if your table has 100,000 different records, you’ll extract them all, which is unnecessary work for your server.

SELECT title, excerpt, author FROM wp_posts LIMIT 10;

Avoid queries in loops

When using SQL along with a programming language such as PHP, it can be tempting to use SQL queries inside a loop. But doing so is like hammering your database with queries.
This example illustrates the whole “queries in loops” problem:

foreach ($display_order as $id => $ordinal) {
    $sql = "UPDATE categories SET display_order = $ordinal WHERE id = $id";
    mysql_query($sql);
}

Here is what you should do instead:

UPDATE categories
    SET display_order = CASE id
        WHEN 1 THEN 3
        WHEN 2 THEN 4
        WHEN 3 THEN 5
    END
WHERE id IN (1,2,3)

Source: http://www.karlrixon.co.uk/articles/sql/update-multiple-rows-with-different-values-and-a-single-sql-query/

Use join instead of subqueries

As a programmer, subqueries are something that you can be tempted to use and abuse. Subqueries, as show below, can be very useful:

SELECT a.id,
    (SELECT MAX(created)
    FROM posts
    WHERE author_id = a.id)
AS latest_post FROM authors a

Although subqueries are useful, they often can be replaced by a join, which is definitely faster to execute.

SELECT a.id, MAX(p.created) AS latest_post
FROM authors a
INNER JOIN posts p
    ON (a.id = p.author_id)
GROUP BY a.id

Source: http://20bits.com/articles/10-tips-for-optimizing-mysql-queries-that-dont-suck/

Be careful when using wildcards

Wildcards are very useful because they can substitute for one or more characters when searching for data in a database. I’m not saying that you shouldn’t use them, but instead, you should use them with caution and not use the full wildcard when the prefix or postfix wildcard can do the same job.
In fact, doing a full wildcard search on a million records will certainly kill your database.

#Full wildcard
SELECT * FROM TABLE WHERE COLUMN LIKE '%hello%';
#Postfix wildcard
SELECT * FROM TABLE WHERE COLUMN LIKE  'hello%';
#Prefix wildcard
SELECT * FROM TABLE WHERE COLUMN LIKE  '%hello';

Source: http://hungred.com/useful-information/ways-optimize-sql-queries/

Use UNION instead of OR

The following example use the OR statement to get the result:

SELECT * FROM a, b WHERE a.p = b.q or a.x = b.y;

The UNION statement allows you to combine the result sets of 2 or more select queries. The following example will return the same result that the above query gets, but it will be faster:

SELECT * FROM a, b WHERE a.p = b.q
UNION
SELECT * FROM a, b WHERE a.x = b.y

Source: http://www.bcarter.com/optimsql.htm

Use indexes

Database indexes are similar to those you can find in libraries: They allow the database to find the requested information faster, just like a library index will allow a reader to find what they’re looking for without loosing time.
An Index can be created on a single column or a combination of columns in a database table. A table index is a database structure that arranges the values of one or more columns in a database table in specific order.

The following query will create an index on the Model column from the Product table. The index is called idxModel:

CREATE INDEX idxModel ON Product (Model);

Source: http://www.sql-tutorial.com/sql-indexes-sql-tutorial/

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 sql tips to speed up your database

Go to Source

Apache CouchDB is one of a new breed of database management systems. These new systems are known as NoSQL. NoSQL is a buzz word term first popularized in early 2009 to describe a database that is non-SQL… NoSQL is a term for a loosely defined class of non-relational data stores that break with a long history of relational databases and ACID guarantees. Data stores that fall under this term may not require fixed table schemas.

The first reason I am quickly growing to love CouchDB, and hence decided to write this post is due to the fact that it is a document-oriented DB, rather then storing content into set tables, it allows us to store information, in a manor that is as flexible as an array.

For example here’s a sample document:

FirstName="Bob", Address="5 Oak St.", Hobby="sailing".

However another document could have this data:

FirstName="Jonathan", Address="15 Wanamassa Point Road", Children=("Michael,10", "Jennifer,8", "Samantha,5", "Elena,2").

This is great because first of all, we are not wasting storage on empty, or null fields.

The second reason this is nice, is that we no longer worry about tables, and columns! we need to set info, then we set just what we need. This CAN cause issues if you do not plan correctly, but we will get into that a little later on.

Another big reason I like CouchDB, is that access is through a REST API, for those who know what that means, this is big! For those who don’t, it means access to get or set data can be granted directly from the browser via javascript, without the need to write extra PHP code on the server side!

Using CouchDB

Now that I have you all hyped about it, lets get to using it. The first thing you need to know is that PHP does not have any built in functions to access a CouchDB database.
To do this I recommend PHPillow, a class written by Kore Nordmann. It is definitely one of the best I have seen so far. The second thing you need to know is that setting, and querying a CouchDB is not the same as a MySQL query. As I stated, PHPillow is the best (in my opinion) way to access CouchDB, so that is what I will be using in this example…

Database connection
To connect to your CouchDB instance simply use the phpillowConnection class like shown here:

phpillowConnection->createInstance('localhost', 5984, 'user', 'password');

Once created this connection will be used in your document and view classes automatically.

Define a custom document
All documents extend the abstract base class phpillowDocument. A complete model defining a blog entry could look like:

class myBlogDocument extends phpillowDocument
{
    protected static $type = 'blog_entry';

    protected $requiredProperties = array(
        'title',
        'text',
    );

    public function __construct()
    {
        $this->properties = array(
            'title'     => new phpillowStringValidator(),
            'text'      => new phpillowTextValidator(),
            'comments'  => new phpillowDocumentArrayValidator(
                'myBlogComments'
            ),
        );

        parent::__construct();
    }

    protected function generateId()
    {
        return $this->stringToId( $this->storage->title );
    }

    protected function getType()
    {
        return self::$type;
    }
}

The static property $type defines the type of the stored document and should be unique for each document in your application. If you are implementing a module, prefix this type with the name of the module, like “blog” in this example. If you happen to use a PHP version prior 5.3 you have to return the document type in each of your document classes like shown above. 5.3 and above users can use a more generic approach with returning static::$type in a base document class.

The $requiredProperties array defined the properties, which are mandatory to be set. The properties itself are defined in the $properties property, which is initialized in the constructor of the document. We associate a validator with each property which validates the input set on the document. There are quite complex validators, like the phpillowDocumentArrayValidator shown here, which will be described later, which are all documented in the generated API documentation.

The last thing you need to define is the generation of the document ID. An ID in CouchDB needs to fulfill some requirements, which are ensured by using the protected method stringToId(). Normally you use one somehow unique property of the document. If this is not entirely unique the document handler will append something, so that it will get unique. Just return null if you want CouchDB to give you an unique id for the document.

Using a document
Now to save data using the document layout that the above code would create we can simply call:

$doc = new myBlogDocument();
$doc->title = 'New blog post';
$doc->text  = 'Hello world.';
$doc->save();

With the call to the save() method the document will be generated and stored in the database. After this a new magic property is available for the document:

$doc->_id;

Using documents directly this ID is the way to fetch the document back from the database, like:

$doc = new myBlogDocument();
$doc->fetchById('blog_entry-new_blog_post');

This call retrieved the above document back from the database. The magic CouchDB properties _id and _rev (for revision) are set for the document. Beside the defined properties another property has been created by the wrapper, called revisions, which contains all old (and the current) revisions of the document:

echo $doc->revisions[0]['title'];

If you now change a property on the object and store it again in the database the old revision will also be stored in the database, so that no information is lost on change. This behavior may be deactivated by setting the $versioned property to false.

Did you say revisions?
Why yes I did! Thanks for noticing! My Steve Jobs “One more thing!” moment, is that if you alter a document in a CouchDB database, it save the pervious version as a revision automagicly! No need for multiple database entries to make sure your application can roll back!

So thats about it for this tutorial. Next time we will get into how to run more advanced queries using PHPillow.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

Getting started with CouchDB: a beginner’s guide

Go to Source

When developing for the iPhone and the iPod Touch, the first thing we have to do is obviously detect it, so we can apply specific code or styles to it. The following code snippets will detect iPhones and iPods using Javascript, and redirect those users to an iPhone specific page.

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

Source: http://davidwalsh.name/detect-iphone

Detect iPhones and iPods using PHP

Although the previous snippet works great, Javascript can be disabled on the iPhone. For this reason, you may prefer to use PHP in order to detect iPhones and iPods touch.

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

Source: http://davidwalsh.name/detect-iphone

Set iPhone width as the viewport

How many times did you load a website in your iPhone and it just looked like a thumbnail? The reason of this is that the developer forgot to define the viewport (or didn’t know it existed). The width=device-width statement allows you to define the document width as being the same than the width of the iPhone screen. The two other statements are preventing the page from being scaled, which is useful if you’re developing an iPhone-only website. Otherwise, you can remove those statements.
Defining a viewport is easy: Just insert the following meta in the head section of your html document.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Insert an iPhone specific icon

When a user adds your page to the home screen, the iPhone will automatically use a screenshot of your website as an icon. But you can provide your own icon, which is definitely better.
Defining a custom iPhone icon is easy: Simply paste the following in the head section of your html document. The image should be 57px by 57px in .png format. You do not need to add the shine or corners, as the iPhone will do that for you automatically.

<rel="apple-touch-icon" href="images/template/engage.png"/>

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Prevent Safari from adjusting text size on rotate

When you rotate the iPhone, Safari adjust text size. If for some reason you’d like to prevent this effect, simply use the following CSS declaration. It has to be inserted in your CSS file.
The -webkit-text-size-adjust is a webkit-only CSS property that allow you to control text adjustment.

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Detect iPhone orientation

Due to the fact that the iPhone allow its users to view a page in both portrait and landscape modes, you may need to be able to detect in which mode the document is being read.
This handy javascript function will detect the current iPhone orientation and will apply a specific CSS class so you can style it your way. Note that in this example, the CSS class is added to the page_wrapper ID. Replace it by the desired ID name (See line 24).

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;

	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

Apply CSS styles to iPhones/iPods only

Browser sniffing can be useful, but for many reasons it isn’t the best practice to detect a browser. If you’re looking for a cleaner way to apply CSS styles to the iPhone only, you should use th following. It has to be pasted on your regular CSS file.

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

Source: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Automatically re-size images for iPhones

On recent websites, most images are above 480 pixels wide. Due to the iPhone small size, there’s a strong chance that images will break out of the wrapper area.
Using the following CSS code, you’ll be able to automatically re-size the website images to 100%. As the device max width is 480px, images will never be wider.

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Source: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

Hide toolbar by default

On a small screen such as the iPhone screen, a toolbar is useful but also wastes a lot of space. If you’d like to hide Safari toolbar by default when an iPhone visitor open your website, just implement the following javascript code.

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

Source: http://articles.sitepoint.com/article/iphone-development-12-tips/2

Make use of special links

Do you remember those “mailto” link that were very popular some years ago? This prefix automatically open the default email client used by the person who clicked on it. The iPhone has introduced two similar prefixes, tel and sms, which allows the person who clicked on it to phone or text automatically.
I’m definitely not a fan of those, but maybe that will be useful to you. The only thing you have to do to implement this, is to paste the following anywhere on your html page.

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

Source: http://articles.sitepoint.com/article/iphone-development-12-tips/3

Simulate :hover pseudo class

As no one is using a mouse on the iPhone, the :hover CSS pseudo class isn’t used. Though, using some Javascript you can simulate the :hover pseudo class when the user will have his finger on a link.

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

Once you added the code above to your document, you can start css styling:

a:hover, a.hover {
    /* whatever your hover effect is */
}

Source: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10+ useful code snippets to develop iPhone friendly websites

Go to Source

For those who don’t know yet, SQL queries have to be executed within the MySQL command line interpreter or a web interface such as the popular PhpMyAdmin. Since we’re going to work on WordPress, you should note that the SQL Executionner plugin provides an easy-to-use interface that allows you to run SQL queries directly on your WordPress blog dashboard.

Although all the queries from this article have been tested, don’t forget that you shouldn’t test any of those on a production blog. Also, make sure that you always have a working database backup.

Manually change your password

It may sound like the thing that only happens to others but forgetting a password can happen to any of us. In case you lost your blog admin password, the only solution is to create a new one directly in your MySQL database.
The following query will do it. Notice that we use the MD5() MySQL function to turn our password into an MD5 hash.

UPDATE 'wp_users' SET 'user_pass' = MD5('PASSWORD') WHERE 'user_login' ='admin' LIMIT 1;

Source : http://www.wprecipes.com/how-to-manually-reset-your-wordpress-password

Transfer posts from one user to another

Most WordPress newcomers tend to use the good old “admin” account instead of creating an account with their real name. If you made that mistake and created another account later, you can easily transfer your old “admin” posts to your new account with the SQL query below.
You’ll need the user id of both your old and new accounts.

UPDATE wp_posts SET post_author=NEW_AUTHOR_ID WHERE post_author=OLD_AUTHOR_ID;

Source : http://www.wprecipes.com/how-to-change-author-attribution-on-all-posts-at-once

Delete post revisions and meta associated to those revisions

Post revisions are very useful, especially in the case of a multi author blog. However, the problem of post revisions is definitely the number of database records it creates. For exemple, if your blog has 100 posts, which has 10 revisions each, you’ll end up with 1000 records in the wp_posts tables, while only 100 of them are necessary.
Executing this query will delete all post revisions as well as all meta info (custom fields, etc) associated to it. The whole process will result in a consequent gain of database space.

DELETE a,b,c FROM wp_posts a WHERE a.post_type = 'revision' LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id) LEFT JOIN wp_postmeta c ON (a.ID = c.post_id);

Source : http://www.onextrapixel.com/2010/01/30/13-useful-wordpress-sql-queries-you-wish-you-knew-earlier/

Batch delete spam comments

Imagine that you’re coming back from holidays, where you haven’t had any access to the Internet. If you haven’t installed Akismet and depending on your blog popularity, you may end up with 1000, 2000 or even 10,000 comments to moderate.
You can spend a whole day to moderate the lot, or you can use this life-saving query to delete all unapproved comments. And for your next holidays, don’t forget to install Akismet!

DELETE from wp_comments WHERE comment_approved = '0';

Source : http://www.wprecipes.com/mark-asked-how-to-batch-deleting-spam-comments-on-a-wordpress-blog

Find unused tags

Tags are recorded on the wp_terms table. If for some reason a tag has been created but is not used anymore, it stays in the table. This query will let you know which tags are on the wp_terms table without being used anywhere on your blog. You can delete those safely.

SELECT * From wp_terms wt INNER JOIN wp_term_taxonomy wtt ON wt.term_id=wtt.term_id WHERE wtt.taxonomy='post_tag' AND wtt.count=0;

Source : http://www.onextrapixel.com/2010/01/30/13-useful-wordpress-sql-queries-you-wish-you-knew-earlier/

Find and replace data

This tip isn’t specific to WordPress and is a must know for anyone who’s working with MySQL databases. The MySQL function replace() lets you specify a field name, a string to find, and a replacement string. Once the query is executed, all occurrences of the string to replace will be replaced by the replacement string.
In case of a WordPress blog, this can be useful to batch replace a typo (For example people who repeatedly call the software WordPress…) or an email address.

UPDATE table_name SET field_name = replace( field_name, 'string_to_find', 'string_to_replace' ) ;

Source : http://perishablepress.com/press/2007/07/25/mysql-magic-find-and-replace-data/

Get a list of your commentators emails

Have you ever received unsolicited emails from blogs you previously commented? I’m sure you did, just like me. The fact is that getting a list of emails from your commentators is extremely easy using the following query. The DISTINCT parameter will make sure that we’ll only get each email once, even if the user commented more than once.
Please note that this is only a proof of concept: Don’t send your users unwanted emails.

SELECT DISTINCT comment_author_email FROM wp_comments;

Source : http://www.onextrapixel.com/2010/01/30/13-useful-wordpress-sql-queries-you-wish-you-knew-earlier/

Disable all your plugins at once

When things go wrong, especially on a production site, you have to be quick. Considering the fact that plugins are often the source of problems, disabling all your plugins in a second can prevent lots of problems.
Just run the following query:

UPDATE wp_options SET option_value = '' WHERE option_name = 'active_plugins';

Source : http://www.wprecipes.com/how-to-disable-all-your-plugins-in-a-second

Delete all tags

In WordPress, tags are recorded in the wp_terms tables, along with categories and taxonomies. If you wish to remove all tags, you can’t simply empty or delete the wp_terms as you’ll destroy categories at the same time!
If you want to get rid of your tags, run this query. It will remove all tags and relationships between tags and posts, while leaving categories and taxonomies intact.

DELETE a,b,c
FROM
	database.prefix_terms AS a
	LEFT JOIN database.prefix_term_taxonomy AS c ON a.term_id = c.term_id
	LEFT JOIN database.prefix_term_relationships AS b ON b.term_taxonomy_id = c.term_taxonomy_id
WHERE (
	c.taxonomy = 'post_tag' AND
	c.count = 0
	);

Source : http://wordpress.org/support/topic/311665

List unused post meta

Post meta is created by plugins and custom fields. They are extremely useful, but they can quickly make your database grow in size. The following query will show you all the records in the postmeta table that doesn’t have corresponding records in the post table.

SELECT * FROM wp_postmeta pm LEFT JOIN wp_posts wp ON wp.ID = pm.post_id WHERE wp.ID IS NULL;

Source : http://wordpress.org/support/topic/337412

Disable comments on older posts

Everyone who has been in blogging for more than one year will know: Even after some months, your old posts still receive interest from the public and lots of comments, mostly because they are indexed by search engines. This is a good thing of course, but the problem is for people like me who own technical blogs and have to answer lots of questions related to their old (and sometimes obsolete) posts.
The solution to this problem is to automatically close comments on posts which are too old. This SQL query will close comments on all posts published before January 1, 2009.

UPDATE wp_posts SET comment_status = 'closed' WHERE post_date < '2009-01-01' AND post_status = 'publish';

Source : http://perishablepress.com/press/2008/02/20/wordpress-discussion-management-enable-or-disable-comments-and-pingbacks-via-sql/

Replace commentator url

Previously in this article, I talked about the very useful replace() MySQL function. Here is a good example of how useful it is : Let’s say you previously own a site and used its url in your comments to generate backlinks to this site.
If you sell the site, you can easily replace the old url by your new site url. Simply run this query and you’ll be done!

UPDATE wp_comments SET comment_author_url = REPLACE( comment_author_url, 'http://oldurl.com', 'http://newurl.com' );

Source : http://perishablepress.com/press/2008/07/14/wordpress-link-author-comments-home-page/

Replace commentator email adress

Another good example of the replace() function. This query will replace the email adress provided in the comments field, by a new one.

UPDATE wp_comments SET comment_author_email = REPLACE( comment_author_email, 'old-email@address.com', 'new-email@address.com' );

Source : http://perishablepress.com/press/2008/05/18/wordpress-tip-update-email-address-in-the-wordpress-database

Delete all comments with a specific url

Lately, I’ve noticied that some clever spammers left some quite relevant comments, but with a link pointing to a viagra site. Unfortunely, when I noticied it the commentator already left lots of comments. The following query will delete all comments with a specific url. The “%” signs means that any url containing the string within the % signs will be deleted.

DELETE from wp_comments WHERE comment_author_url LIKE "%wpbeginner%" ;

Source : http://perishablepress.com/press/2007/07/25/mysql-magic-find-and-replace-data/

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

WordPress : 10+ life saving SQL queries

Go to Source

Created in 2007 by Petr Krontorád, Amy Editor is an advanced editor with a look and feel of a Mac. Amy Editor features lots of useful options, such as line numbers, syntax highlighting, snippets for more than 20 languages, collaboration, and more.
Amy can edit, save and export files. It can also manage projects.

» http://www.amyeditor.com/

JSBin

As you can guess, JSBin is an online text editor primarily focused on Javascript. I really love the clean and simple interface. Each code can be tested using a powerful “Preview” feature, and then exported into a text file.
Another good thing to note is that JSBin can import popular Javascript frameworks such as jQuery or Mootools, so you can test your js plugins as well.

» http://jsbin.com/

Bespin

Using HTML5 quite intensively, Bespin is a new project from Mozilla Labs. This online editor is very powerful and has lots of cool options. In order to use Bespin, you have to create an account. Note that Bespin can be downloaded and then embedded in any kind of web project, only by adding two files in your header!

» https://bespin.mozilla.com/

Kodingen

Kodingen is another great online editor, probably one of the most powerful tool on this whole list. It can be used unregistered or you can create an account to use advanced functions as such as SVN repositories, collaborative work, etc.
This editor features templates for most programming languages, syntax highlighting, line numbering and more. A must!

» http://kodingen.com/

EditPad

Unlike the first few editors featured in this post, EditPad is simple and minimal. No syntax highlighting, no project management…Just a plain page to type your text without any distractions. I’m not a big fan, but this “online notepad” can be a life saver on a particularly slow machine.

» http://www.editpad.org/

TypeIt

TypeIt isn’t a code editor and I hesitated to feature it in this post. This handy tool helps you to access special characters such as French accents, like a visual keyboard does. Definitely a site to have in your bookmarks if you’re often working on multi-language sites.

» http://www.typeit.org/

PractiCode

PractiCode is a very basic code editor. It has very limited functions (Handles CSS, HTML and VbScript) but it is perfect to make quick and dirty code.

» http://www.landofcode.com/online-code-editor.php

9ne

9ne (Pronounced Nine) is a nice online text editor, based on the well known GNU Emacs. 9ne provides most of the basic Emacs functionalities and currently supports XML and Javascript syntax highlighting modes.

» http://robrohan.com/projects/9ne/

jsvi

Vi has always been one of my favorite text editors of all times. Why? Because it is powerful, fast, and you’ll find it everywhere: GNU/linux distros, Mac, web servers… Now, you’ll also find Vi online with this implementation called JSVI. Most Vi functions have been implemented into this web-based version.

» http://gpl.internetconnection.net/vi/

HTMLedit

As the name says, HTMLedit is a (very basic) HTML editor that can be used for quick and dirty coding. However, its interest is limited, particularly if compared to most other items from this list.

» http://htmledit.squarefree.com/

DarkCopy

Have you ever felt distracted when working on a buggy piece of code? If yes, there’s no doubt that you will enjoy DarkCopy. This simple online text editor has limited functions but it provides a dark, clutter-free environment so you can concentrate on the most important: getting things done.

» http://darkcopy.com/

SimpleText

SimpleText.ws may have a cool retro Apple look, but it is also a powerful tool that allows you to create, edit, and save plain text files in your web browser. Another good point of SimpleText is that you can host it yourself if you want, using Google Apps Engine. This guide will show you how to do.

» http://www.simpletext.ws/

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10+ useful online code editors

Go to Source

Maybe I’m stating the obvious, but the PHP script has to be on a different server than the one used for the website you’d like to monitor. If the script is hosted on the same server than your site, it becomes pretty useless: In fact, if your server is down the script will not be able to run and will not let you know.
The best solution is of course a dedicated server, but a home server can be ok as well. Shared web hosting like those provided by Hostgator or WpWebHost have a low price, but most don’t allow you to set up cron jobs, so be careful if you plan to buy.

The last part of this tutorial will show you how to get sms alerts using Gmail. Please note that depending on your location and cellular phone provider, this part of the tutorial may not work.

1. Creating the monitoring script

The first part of this tutorial is to create the monitor script. Pick up your favorite text editor and create a file named monitor.php. The script is very simple: we only need two functions, one to test if a specific site is available, and the other to alert you by sending an email.

Paste the following in your monitor.php file:

function check($host, $find) {
    $fp = fsockopen($host, 80, $errno, $errstr, 10);
    if (!$fp) {
        echo "$errstr ($errno)\n";
    } else {
       $header = "GET / HTTP/1.1\r\n";
       $header .= "Host: $host\r\n";
       $header .= "Connection: close\r\n\r\n";
       fputs($fp, $header);
       while (!feof($fp)) {
           $str .= fgets($fp, 1024);
       }
       fclose($fp);
       return (strpos($str, $find) !== false);
    }
}

function alert($host) {
    mail('youremail@gmail.com', 'Monitoring', $host.' down');
}

$host = 'www.catswhoblog.com';
$find = 'Cats Who Code';
if (!check($host, $find)) alert($host);

The first function we created here, check(), takes two parameters: The first is the server you’d like to check availability (for example, www.catswhocode.com) and the second parameter is to find some text on the webpage. This second parameter is an additional security: In fact, by checking if a specific word is contained on the site homepage, we ensure that the site content hasn’t been modified, for example, after a hacking.

If the server isn’t available or if the text to find hasn’t been found, the alert() function is executed, and will send an email to the account of your choice.

Save the monitor.php file and upload it to your monitoring server.

2. Defining a cron job

At this point of the tutorial, we have a working monitoring script, but we have to type http://mymonitoringserver.com/monitor.php in a web browser to check our website, which makes our script almost useless.
The solution to that problem is to create a cron task to make the server execute monitor.php every hour. Open a SSH console to your monitor server and type the following:

0 * * * * /usr/local/bin/php -q /htdocs/www/monitor.php

If your PHP scripts do not have executable permissions, 644 or -rw-r–r– for example, then as part of the command portion of the cron line, you must specify the php interpreter and pass it the filename of the PHP script (including full path to the script from your home directory) that you want executed.

3. Setting up SMS alerts

Right now, we have a working monitoring PHP script, as well as a cron job that will execute the script every hour. If a problem happens, you’ll receive an email.
Due to the popularity of iPhones, Blackberries and other SmartPhones, a lot of people are able to receive emails everywhere they are. Though, some are still using cell phones with no email capability. In this optional step of the tutorial, let’s see how we can easily receive alerts by sms.

Doing so is quite easy. First you have to use Gmail. As it is a free service, you can create a dedicated account for your monitoring alerts. Once finished, login to your account and click on the “Settings” link located on the top right side of the browser window.
Then, select “Forwarding and POP/IMAP”:

As shown in the previous screenshot, the only thing you have to do is to check “Forward a copy of incomming mail” and fill the field with your phone number @ your provider service.
For example, If your phone provider is AT&T, you’ll have to type 0000000000@mobile.att.net.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

How to easily monitor your web server using PHP

Go to Source

Do you remember the old days of web development, when IE6 was the king? (ok, it sounds soooo bad now but if you were already building sites in 2002 you know what I’m talking about!) It was extremely easy to force copy to clipboard.
But, for obvious security concerns, Firefox doesn’t allow clipboard access by default. This is a good thing, but for some sites, being able to copy into clipboard is a must.

Using powerful Javascript and a .swf file, ZeroClipboard allow you copy information into the user clipboard. For a live demo, just have a look to my Coupons For Bloggers site.
» Visit ZeroClipboard

yourls

As a blogger, I know how important Twitter is to stay tuned with my readers and share my favorite links with them. But as you know, Twitter allows only 140 characters in messages. In order to create shorter urls, you can use a service like bit.ly or Tinyurl.com, or you can get yourls, and create your own service.

Yourls is built in PHP and is very easy to configure. If you’re using WordPress, you’ll probably be happy to know that yourls has its own WordPress plugin.
» Visit Yourls

Minify

I know I already talked about Minify in a previous article, but I simply cannot resist to spread the word about this very cool piece of code.
Minify is extremely simple to install and will combine, minify, and cache JavaScript and CSS files on demand to speed up page loading.

Installing minify is extremely easy: you just have to upload a directory to your site document root and Minify will start to speed up your blog. Wonderful, isn’t it?
» Visit Minify

Thematic

Being a WordPress fan, I really love the concept of Theme frameworks. For those who doesn’t know what it is, Theme frameworks are WordPress themes which contain lots of functions and styles. You can extend both in looks and functionality by adding a child theme.
For example, my other blog Cats Who Blog is using the Thesis theme framework that I extended using my own styles and functions.

Many commercial frameworks are availables, but Thematic is 100% free. A definitive must download if you’re into WordPress!
» Visit Thematic

Flexlib

As you may guess, Flexlib is an open source Adobe Flex library. It provides lots of components that you can freely use in your Flex or Air projects.
The currently available components include: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, and Flex Scheduling Framework.
» Visit Flexlib

Zen Coding

As a web developer, I often find it frustrating having to type lots of tags and attributes to reach the desired result. HTML tags are necessary of course, but that doesn’t mean it should consume so much typing.
This may be the idea Sergey Chikuyonok before he started to develop Zen Coding. What is Zen Coding? It is a handy set of tools for high-speed HTML and CSS coding. It integrate in your favorite text editor and then provide functions and shortcuts to speed up your development.

As an example, if you type this:

div#content>h1+p

You’ll get the following output:

<div id="content">
<h1></h1>
<p></p>
</div>

If you want to know more about Zen Coding, Smashing Magazine has a nice article about it.
» Visit Zen Coding

Sexybuttons

On the internet, design matters. Some people are good for designing, some, like me, aren’t. Happilly, those who aren’t designers (or who are bad designers!!) should take advantage of projects like this one.
Sexybuttons is a small CSS framework that allow you to instantanely create gorgeous buttons for your blog, websites and web apps. If you like CSS buttons, don’t forget to have a look to my Top 10 CSS buttons tutorial list.
» Visit Sexybuttons

jQuery transmit

Who doesn’t like jQuery? This very handy Javascript framework allows developers to enhance both the design and usability of your website. Thanks to plugins, jQuery can be easily enhanced with the functionalities you need. There’s a bunch of very cool jQuery plugins available from Google code so it was very hard to choose one. However, file upload has always been a major problem in web development and this jQuery plugin will be extremely helpful.

Using jQuery transmit is incredibely easy :

$(document).ready(function() {
    var options = {
        allowedFileTypes: [{
            description: "Images",
            extensions: "*.jpg; *.gif; *.png"
        }]
    };

    $("#transmit").transmit("http://mysite.com/upload/", options);
})

» Visit jQuery Transmit

dompdf : Convert HTML to PDF using PHP

The PDF format is useful for many thing such as invoices, and is largely used in business. dompdf is an advanced HTML to PDF converted which can download and read external stylesheets, inline style tags, and the style attributes of individual HTML elements. It also supports most presentational HTML attributes.
» Visit dompdf

stop-spam

Spam is definitely a big problem for blogs and websites. Although it is still impossible to completely prevent spam, some tools can help you a lot to fight it.
Stop-spam is one of those tools. It is lightweight, compatible with all blogs and forums (WordPress, PhpBB, Movable Type, etc) and easy to install. It automatically blacklists well known domains and IPs used by spammers. Of course, you can edit lists to blacklist/whitelist to add more domains and IPs.
» Visit stop-spam

Any other you’d like to mention? Don’t hesitate to let me know in a comment!

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 interesting projects from Google Code

Go to Source