lucaBiagini.com

There are a lot of tutorials that show how to change an address like:

• www.mysite.com/products.php?product_id=1234

into others like:

• www.mysite.com/products/1234
• www.mysite.com/products/1234.html

In this article I’d like to go one step forward and to create something like:

• www.mysite.com/easy-to-remember-product-name
• www.mysite.com/easy-to-remember-product-name.html

How-To and Contraindications

Switching from an address like the first one to the secon ones is search engine necessary, because SE spiders often don’t crawl correctly our dynamic urls. Switching to the third ones is much better, because it’s a search engine friendlier, and it’s human friendly too.

Now, I think we all agree that we should change our dynamic urls into the last ones, but the goal is to make it without modifying, or at least without modifying too heavily our web application. If our php script works with a query for product_id, and product_id is the unique, autoincremental key of our mysql database, we have to rewrite our urls without losing the possibility for our script to work in its original way.

That is the way Wordpress works: a function that allows the user to choose the preferred format for the urls. In this tutorial, we replicate - in a very simplier way - that tool.

How the system works

My solution - with downloadable example - uses php and mysql to manage the content and create the urls, and Apache’s server mod_rewrite module to rewrite the addresses. We assume to be on a linux server and that our app is php and mysql based.

We have 2 tables in our mysql db:

News table contains the articles, with the columns id, title, article and slug, where slug contains the sanityzed title, that is a title like: “That’s an easy mod_rewrite tutorial” becomes “thats-an-easy-mod-rewrite-tutorial”.
The script, normally, queries the db for the id, but we, through php, will find the related slug. Then we rewrite the url through mod_rewrite.

Options table contains id, name and value of the options, that is, in this example, permalinks yes/no. If permalinks are off, php will query the db for the id, and the url format will be: index.php?id=x. If permalinks are on, php will query mysql for the slug, and mod_rewrite will rewrite the url in format: rewritten-url-with-php-and-mod-rewrite.

Example

A working example is available at:
gruppomodulo.it/lavori/esempi/mod-rewrite-php-htaccess-tutorial/

Also downloadable in .zip format at:
gruppomodulo.it/lavori/esempi/mod-rewrite-php-htaccess-tutorial/ex.zip

Example includes following files:

• .htaccess
  Very simple .htaccess for mod_rewrite, that transforms the url from ?slug=rewritten-url to /rewritten-url.
  If permalinks are off, url format will be ?id=x, and there will be no rewrite.

• options.php
  The file with the basic tool to switch on/off the permalinks

• single.php and index.php
  Show site contents.

• functions.php
  Contains the function that generates the urls (rewritten or not, depending on permalinks selected status) and the function that gets the articles from mysql database.

• Zip file also includes the .sql file to recreate the example datatabase.

That’s another article I’ve written for Gruppo Modulo after customizing the comments layout on their wordpress powered site. It’s a simple thing to do, but it still attracts enough visitors to gain a place on my personal blog.

Here’s how to have comments number displayed like comment background and to alternate the color of the comments background; it’s pretty simple and works on IE (6,7,8), Firefox (1.5,2,3), Safari (1,2,3), Opera (PC & Mac), and even in IE5 mac.

You have to change only 2 files, so backup them before you start. The file you need to edit are:

• wp-content/themes/default/comments.php
• wp-content/themes/default/style.css

First open comments.php and remove the open “ol” tag:

<ol class="commentlist">

Obviously, we remove the close “ol” too.
Now we have to remove the open “li” tag in foreach loop:

<li class="<?php echo $oddcomment; ?>"
id="comment-<?php comment_ID() ?>">

And then remove the “/li” after:

<?php comment_text() ?>

This has been necessary because we must create new numbers for the background; the ones generated from the ol list won’t work for the background, so we removed them to avoid duplications. Now we create the big numbers; edit this line:

<?php foreach ( $comments as $comment ) ?>

to be like this:

<?php $bigNumber = 1; foreach ( $comments as $comment ) ?>

Now, we create the div with the bigNumber before the comment:

<div class="bigNumber"> <?php echo $bigNumber; $bigNumber++ ?></div>

Then we create a div to contain the rest of the comment (date, author, text, ecc.). We open it right after the new bigNumber div:

<div class="theComment">

And we close it where there was the /li, after:

<?php comment_text() ?>

Now we need to create the alternance of divs name, so that we can alternate the background color of the comments. We need to create a div that encloses both bigNumber and theComment. So after foreach we open this new div like this:

<div class="<?=$i%2?"pari":"dispari";$i++;?>">

Then we close this div right before endforeach, after the /div for theComment.
Now we just have to add few lines to our css as follows:

.dispari { background: #ccc; }
.pari { background: #999; }
.bigNumber {
          font-size: 6em;
          color: #fff;
          width: 450px;
          text-align: right;
          position: absolute;
          margin-top: 20px;
          z-index: 10;
}
.theComment { position: relative; z-index: 20; }

That’s all!