This is better than appending post IDs in  the querystring, but is still far from perfect, as it includes the ‘index.php’ string in the URL.

I googled around for possible solutions and workarounds and found this useful article. This worked pretty good, but unfortunately didn’t cater to existing permalinks. In other words, using permalinks like the one above resulted in 404 errors.

I modified the PHP code slightly to add support for existing permalinks (with ‘index.php’ in them), so the blog can use pretty permalinks, but old posts linked elsewhere with ugly permalinks work too.

Source code:

<?php
// This is the default file for the site. Usually index.php
$default = 'index.php';

// The name of this file.
// Set this value for the URL in Custom Error Properties of your website in IIS.
// Goto: IIS Manager > Websites > [Site Name] > Properties > Custom Errors >
// 404 & 404;2 & 404;3 > URL (Requires a '/' prefix in IIS).
$thisfile = '404-handler.php';

$_SERVER['ORIG_PATH_TRANSLATED'] = str_replace($thisfile, $default, $_SERVER['ORIG_PATH_TRANSLATED']);
$_SERVER['SCRIPT_FILENAME'] = str_replace($thisfile, $default, $_SERVER['SCRIPT_FILENAME']);
$_SERVER['ORIG_PATH_INFO'] = str_replace($thisfile, $default, $_SERVER['ORIG_PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace($thisfile, $default, $_SERVER['SCRIPT_NAME']);
$_SERVER['PHP_SELF'] = str_replace($thisfile, $default, $_SERVER['PHP_SELF']);
$_SERVER['PATH_INFO'] = false;

$qs =& $_SERVER['QUERY_STRING'];
$ru =& $_SERVER['REQUEST_URI'];

// Fix for existing permalinks  (eg. http://www.my-domain.com/index.php/2009/09/21/my-pretty-permalink/)
if(strpos($ru,'/'.$default.'/',0)) $ru = str_replace('/'.$default.'/','',$_SERVER['REQUEST_URI']);

$pos = strrpos($qs, '://');
$pos = strpos($qs, '/', $pos + 4);
$_SERVER['URL'] = $ru = substr($qs, $pos);
$qs = trim(stristr($ru, '?'), '?');

// Required for Wordpress 2.8+
$_SERVER['HTTP_X_ORIGINAL_URL'] = $ru;

// Fix GET vars
foreach ( $_GET as $var => $val ) {
 if ( substr($var, 0, 3) == '404') {
 if ( strstr($var, "?") ) {
 $newvar = substr($var, strpos($var, '?') + 1);
 $_GET[$newvar] = $val;
 }
 unset($_GET[$var]);
 }
 break;
}
include($default);
?>

While I know this is just a workaround, this seems to have solved my problem and works pretty good so far.
If anyone knows of better solutions, comments are welcome!

1. Install WP Super Cache plugin

You can download the plugin here – it’s pretty easy to setup.
The plugin itself does 80% of the work and helps a lot speeding up load times.

2. Add some .htaccess rules to force caching of static elements, such as css, javascripts and images.
I had the chance to attend to Fullo’s speech about WP optimization at last year’s WordCamp Italy, when he shared some really useful tips that I finally put into practice. He has posted the slides to his blog, with code snippets.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=216000, public"
</FilesMatch>
</IfModule>

3. Add some .htaccess rules to enable compression of Html pages

This trick was suggested by my friend Luca, who also sent me the following code:

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<Files *.css>
SetOutputFilter DEFLATE
</Files>
<Files *.js>
SetOutputFilter DEFLATE
</Files>

4. Finally, add a robots.txt file to prevent unnecessary bot traffic

This was also suggested by Fullo’s priceless slides:

User-agent: *
Disallow: /cgi-bin
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content

User-agent: Mediapartners-Google
Allow: /

User-agent: Adsbot-Google
Allow: /

User-agent: Googlebot-Image
Allow: /

User-agent: Googlebot-Mobile
Allow: /

User-agent: ia_archiver-web.archive.org
Disallow: /

Before leaving you, here are some other useful articles I’ve found while googling around:

• WordPress Codex › WordPress Optimization
• WordPress Optimization Bible
• Optimizing WordPress Servers

While this used to work as a charm, you also might have heard FeedBurner has been aquired by Google and it’s moving feed to Google’s server. Unfortunately the above plugin stops working for feeds hosted by Google.

My friend Stefanos (aka Titanas) recently sent me this piece of code, that easily solves this issue.
It will display the number of your subscribers, like this.

<?php
function get_subscriptors($feedburneruri) {
         $url="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feedburneruri;
         $ch = curl_init();
         curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
         curl_setopt($ch, CURLOPT_URL, $url);
         $data = curl_exec($ch); curl_close($ch);
         $xml = new SimpleXMLElement($data);
         return $xml->feed->entry['circulation'];
}
?>
Jek2k.com has <?php echo get_subscriptors('jek2kdotcom'); ?> subscribers.

After contacting my hosting provider and checking my WordPress files, it turned out that my site had been hacked, exploiting a WordPress breach.
My index.php file had been modified, adding the following malicious PHP code:

function security_update($buffer)
{
  $update = '18446744073709551615';
     if (stristr($buffer, '</html') !== FALSE)
     {
          return eregi_replace('</html', $update.'<html', $buffer);
     }
          else
     {
          return $buffer.$update;
     }
}

This code simply output the string “18446744073709551615″ in the site’s footer – I didn’t even notice it.
Removing this code from index.php fixed the problem. Fortunately this didn’t cause no harm to the site’s visitors or to the site itself.

I’ve googled around for some more info and found this forum post, reporting the same issue. The odd thing is this issue is reported to affect WordPress < 2.6.5, while I ‘m using WordPress 2.7 on my site, which is supposed to fix this security vulnerability.

If you have experienced a similar issue and need help, or if you can share more detailed information, please leave a comment to this post.

I recently installed the brand new 3.0 version of the known WP Tiger Administration plugin.
This useful plugin by Ordered List converts the defaut WordPress administration panel style into a Tiger-like style, by changing only the CSS stylesheet, with no changes to the WordPress core.

In the past I tried the 2.0 version of this plugin, but I wasn’t really impressed.
This new version is much better and has a cleaner look.
I also found it very easy to switch from the WordPress default tabbed view to this new 3 columns Tiger-style view. I even find this more intuitive and more ordered.

I suggest giving this plugin a try.

Some days ago, I decided to go for the famous Askimet, as manually moderating and deleting spam comments was starting to take me too much time.

Since I installed it, in a short time, Askimet identified 51 comments as spam and queued them for deletion. It just missed to catch one spam comment. Nice job!

By the way, I noticed comment spam is starting to affect also some of my clients’ websites, not only those WordPress- or CMS-based, but even old websites and CGI-based forms and guestbooks. This will cause (and is already causing) me lots of extra work to implement ways of blocking spam, since there is not always an easy and effecient way as Askimet. And personally I don’t like to use CAPTCHAs, as I think they lower the usability, accessibility and friendlyness level of a website. Moreover CAPTCHAs just look too ugly.

This is really a bad problem to solve.
Everyday I read of new solutions as well as of new methods to crack the newly invented solutions, leaving me a bit confused on this point.

Ta-da! The redesign of PhotoMatt goes live. Yes, that PhotoMatt.
I had the honor to design the new graphic theme of Matt Mullenweg’s personal website. I still have problems believing it… it is kind of a dream.

However, the website is still under constrution, as Matt and I we’re still working on designing (me) and coding (Matt) secondary pages and making small changes here and there.

Here are a couple of articles and reviews:
- New Blog Design on PhotoMatt
- Matt Mullenweg gets new clothes on Lorelle on Wordpress
- Un riminese per Photomatt su Disordine.com
- a quick review on If…Else
- PhotoMatt on Css Remix, on Css Mania and Css Bloom .

Whoa!

Also the new skin of MintPages went live in the last few days. MintPages is a private community for designers and developers I’m a proud member of.
I designed the new skin for the forums and this is another great honor for me.

Here is an article that appeared on DevLounge to celebrate the launch of the new MintPages.

As you can see I also added the small icons at the bottom, in the Portfolio section.

The Loop is the process that occurs when WordPress reads the database and outputs your posts or pages to the destination Html page.
A more detailed explanation can be found here.

Inside the Loop you can use Template Tags (see this page) to modify the output information and choose what elements of the post should be displayed (see Post Tags).

This is the very basic concept behind WordPress templates.

With WordPress you have also the ability to make custom queries to the database to extract your specific content.
In this case, you will need the following sintax:

<?php query_posts('category_name=news&showposts=5'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

     <div class="news">          
          <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
          <?php the_excerpt(); ?>          
     </div>
            
<?php endwhile; ?>
<?php endif; ?>

The code above works perfectly when you are inside the Loop, but what if you are outside of it?
Or if you want to include contents from two different loops, for example for making an Asides section?
Then the query_posts() function will not be of any help.

You will have to make a totally new custom query, using a different sintax.
This is needed in order to not overwrite the data retrieved by the main Loop query.

It will look like this:

<?php $my_query = new WP_Query('pagename=another-static-page'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $do_not_duplicate = $post->ID; ?>
          
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
            
<?php endwhile; ?>

The first line:

<?php $my_query = new WP_Query('pagename=another-static-page'); ?>

This line:

<?php $do_not_duplicate = $post->ID; ?>

As you can see, then we can output the information with the same good old sintax:

      <?php the_content(); ?>

This way of retrieving and displaying custom information from your WordPress database comes very handy when creating advanced themes or when using WP as a CMS platform and you want to have full control on what is displayed.

As always, the best place to find exhaustive information about Wordpress tweaks is the Codex website.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

For those of you out there who still don’t know Lightbox, this is a powerful and very functional Javascript utility to display your images. Clean, light-weight, but yet very effective.
The only fault of Lightbox is that its Css stylesheet doesn’t validate, because of some proprietary rules for Explorer and Mozilla. However, if you’re not obsessed about standards or addicted to validation, I believe you will find Lightbox very useful and be using it in many of your projects.
You can get the 2.0 release on huddletogether.com.

Hemingway is a quite a popular WordPress theme. This site is also based on the Hemingway theme, obviously spiced up and changed to meet my needs.
You can download Hemingway from warpspire.com/hemingway.

So, now let’s see hot to make them work together.
Please note that this tutorial assumes that you have WordPress installed in the /wordpress/ folder on your server. If you installed it in another directory, keep in mind that you have to change folder and file paths to match your specific configuration.

First, you need to install the Hemingway theme.
All you need to do is following the instructions included in the package.

Quick recap:
1. unzip the package,
2. upload the hemingway folder to your server with an FTP client,
3. put it in the /wordpress/wp-content/themes/ folder,
4. go to your WP admin panel,
5. in the Presentation section, select and activate the Hemingwat theme,
6. go back to your blog, take a look around and congrat yourself: you made it!

If these few instrucions don’t solve your problem, please don’t email: I’ m a WP and Hemingway user just like you. You can get quality support at discuss.warpspire.com.

Next step is getting Lighbox to work with Hemingway.
And this is a little more complicated.

Let’s go step by step:
1. unzip the package,
2. upload the js folder to you server with an FTP client,
3. put it inside your /wordpress/wp-content/themes/hemingway/ folder,

4. in the Lightbox package you have an images folder.
Upload the content of this folder to the already existing /wordpress/wp-content/themes/hemingway/images/ folder.
This will add the required Lightbox images to the Hemingway standard installation.

5. Same thing with the css folder.
Pick the lightbox.css file inside it and upload it to your /wordpress/wp-content/themes/hemingway/styles/ folder.
Using this folder structure, you don’t need to change anything in the Lightbox stylesheet.

Unfortunately, you will still need to change a couple of lines in the main lightbox.js file.
6. open the lightbox.js file with a text editor or with Dreamweaver,
7. at lines 62 and 63 you need to change

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

to this

var fileLoadingImage = "/wordpress/wp-content/themes/hemingway/images/loading.gif";
var fileBottomNavCloseImage = "/wordpress/wp-content/themes/hemingway/images/closelabel.gif";

This will adapt Lightbox to the Hemingway folder structure.

Now we need to integrate Lightbox,
8. in the /wordpress/wp-content/themes/hemingway/ locate the header.php file ,
9. open it in a text editor or in Dreamweaver,
10. in the head of the document, add these lines:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/scriptaculous.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/lightbox.js"></script>

11. always in the head of the header.php file add this line:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/lightbox.css" type="text/css" media="screen" /> 

Now, let’s try it!
12. open your WP admin panel and write a new post,
13. insert a link to an uploaded image, using this sintax:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Obviously you need to change this line of code to match your image path.

14. Go to the newly posted artcicle and test the link. Is it working?
If yes, then you made it!
If it’s not working, either you messed up something or my tutorial is wrong.
Remember to run the test with a modern browser, don’t even try to do it with IE or older browsers!

Please refer to this site to get Lightbox-specific help.
For Hemingway and Lightbox integration issues, you can comment this post, email me or simply analyze and copy the source code of my WordPress pages!

Hope you will find this helpful. Bye.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.