Category: Wordpress

Before editing your .htaccess file, always make a backup so you can restore it if needed.

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

Getting started

• 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+

Respect HTML and CSS standards

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!

Simply paste the following code snippet anywhere on your theme. It will display how many posts are returned by the custom query.

$feat_loop = new WP_Query( 'showposts=12&category_name=featured' );
echo "Query returned ".$feat_loop->post_count." posts.";

Thanks to WP Lover for the cool tip!

Looking for WordPress hosting? Try WP Web Host. Prices starts at $5/month and you can try it for free!

Get how many posts are returned by a custom loop