Usability, we hear it everywhere, read it everywhere and usually we tend to forget its real importance when it comes to planning a good usable web site design.

Usability is all about making web sites that way to not make the end user think too much while navigating in and out a web page. It’s all about ease of use and clear using techniques. So it is of a high importance to take into good consideration all the details for a web site you are creating, let that be your own or your client’s.

Before you move along, please click the buttons on the left, share it on Facebook, even a Tweet is very much appreciated. Spread the word, let others know about it and thanks.

If you would read the WikiPedia article about usability, this is what is says:

In design, usability is the study of the ease with which people can employ a particular tool or other human-made object in order to achieve a particular goal.

The main intention of this blog is regarding web development, but I will overrule that principle from time to time, in order to offer you the coolest tips on everything that would improve your critical thinking ability when you are planing a web design and development project. So far, I’ve came to realize that once one familiarizes oneself with the principles, it will come to the understanding that things will turn into a habit, of course, while you deal with the ideal stuff on a daily basis.

WikiPedia again, describes very efficiently the key points of the usability notion.

The primary notion of usability is that an object designed with a generalized users’ psychology and physiology in mind is, for example:

• More efficient to use — it takes less time to accomplish a particular task
• Easier to learn — operation can be learned by observing the object
• More satisfying to use

You may now already have an idea of what I am talking about, so in that contest I found something quite useful in the interwebs today and I am sharing it with you, which is supposed to take your understanding on usability to the next level.

Couple of slides (actually it’s not just a couple, 91 slides to be more precise) from Bart De Waele which are thought to cover the principles and considerations when it comes to designing a beautiful usable web site. Enjoy as you read along.

10 tips for a usable website

Let me know in the comments if you found anything that you enjoyed learning from it.
Image courtesy of http://blog.avangate.com

Hello there Web Ninja, it’s been… let me see, 9 days since my last post was published and I’ve missed to take care of this area here as it deserves to. Now, life is good, and things are going just great, I keep my fingers crossed for a similar flow in the upcoming days.

As the title of this post indicates, I am working on a brand new unique design for my www.xhezairi.com home page, as it in its current state doesn’t really offer any thorough information. During this process I’ve realized couple of important things, but the most important one I understood is my uncomfortable decision making feeling when it comes to creating something for myself. I am struggling so much that I still can’t decide for the final look. Made two different designs already, which vary in colors and concept, however I don’t feel yet satisfied to the level where I could decide to slice it and turn it into a living web page.

Good news is, there are couple of very interesting articles coming up, and I know I’ve never asked you before but I will ask you now to subscribe to my feed in order to stay tuned with the freshness that will conquer this place.

More good news. What is that you should be expecting from this new design I am speaking of, is couple of interesting things. I will definitely be making it in complete HTML5 and CSS3, I ought to. Then, I am looking to make it completely unique, I like current web trends but a change is always welcomed. I already have my third concept in mind, but it seems quite challenging and I should take a closer look and familiarize more with jQuery chaining functionality.

Regardless of my situation, I have to make an announcement. On behalf of my redesign act I have decided to give away three free things.

1. I will give away a one-page web template, good for personal portfolios or small web design agencies. Take a look of it below, or visit the live demo at www.PoentaStudios.com
2. I have created my first WordPress plugin and I will make it available to the public when the new design is intact. I know there are dozen like it, but I don’t care I’m just putting mine out there, regardless. It is almost finished, just have to implement my after DOM is load technique.
3. I have decided to also give away my current blog theme that you are actually seeing here. It is not some sort of jaw-dropper, however some of you might want to check it out simply out of curiosity. I am doing this since the new blog look should be conform the new design’s criteria.

Even more good news, finally I am to the point where I’m thinking of moving http://wp.xhezairi.com/ to a new directory and that would be http://www.xhezairi.com/blog but I would like to hear your thoughts on this one though. I may be cleaning my blogs content a little bit, get rid of old posts and leave behind only those that add real value to the site in its main purpose.

Last and not least, I am very seriously considering to move from WordPress to another platform, not that I don’t like WordPress anymore, but I’m getting a little suspicious about it, since in the last month I’ve experienced two WP infections. Don’t know whether it’s my host (mt) or WordPress itself. At this stage can’t blame either one, by any means.

Let me know of your thoughts by expressing yoruself in the comments, I am quite willing to read your opinions on everything I cited above. Till then, have a good one and God bless.

There is this comments-popup.php file inside my personal theme’s folder which I didn’t really pay any attention for, not until last night at least. To the best of my memory, almost every WordPress theme out there comes with a similar file so I guess it has been inherited over from the good old WordPress Classic Theme or let that be the previous default famous Kubrick.

Before going any further I will execute a conditional statement here, the result will be based on your choice.
<?php if (you are the WordPress Ninja) : ?> who hasn’t yet found out the usage or importance of comments-popup.php then read along and enlighten yourself. I myself am enlightened now thanks to a guy named Hafiz Rahman for this clearly written article.
<?php else : ?> you have never heard or seen comments-popup.php before and you like to carry on living that way, then you can either ignore this post and read something else, or publicly declare that you will stab yourself on the back with a closing curly bracket. <?php endif; ?>

Frankly, I must admit there are very few pages in the WordPress Documentation dubbed Codex that I didn’t scan through or read thoroughly. I’ve also gone long ago through all WordPress Theme Development articles, and even Template Hierarchy file list, nowhere has my eye spotted a single line speaking about comments-popup.php. You won’t be able either, so don’t hammer yourself because still nothing has changed there.

OK, so what does it do and how to use it?

comments-popup.php does exactly what the name implies, it creates a pop-up windows with the comment form and comments regarding one particular article, the thing is you have to enable it somewhere, in order to pop the comments window up. Like almost everything else, it is also theme dependent. What this means is that first you should have a file named comments-popup.php inside your theme folder with some code structure in it of course, and second in your index.php should be a line similar to this one (usually you can look for it around posts-meta calls):

<?php comments_popup_link('No comments', '1 Comment', '% Comments'); ?>

If you answer true on both and you still want to try this feature out, open header.php with your favorite code editor, or use WordPress build-in theme editor (Administration Panel -> Appearance -> Editor) and exactly before <?php wp_head(); ?> paste this new line:

<?php comments_popup_script(); ?>

With this action you’ve enabled comments pop-up window. You may refresh your blog’s index now and see where you have the comments number per article displayed, hover on it and look down at your browser’s status bar you should see the hyper-link is different from what it used to be. Try clicking it and the pop-up window will splash right in front of your face.

Above you read the part where tell how I found out comments-popup.php purpose, and how I test its usage, because I’m not using it here, no way. In the following paragraph I show you, to the best of my usability skills, what would the most appropriate scenarios be of using this nasty pop-up window.

When should you use it?

I go by the principle of calling pop-up windows disgusting. Not everybody shares the same opinion here of course, but the main reason why I dislike them is their surprising ability. Pop-up windows are not only usually blocked by most modern browsers, but they tend to cause distraction, meaning they take away your (my) focus from the main page content, and I also personally disfavor them for surprising me unpleasingly (chrome shows this word as misspelled, huh?). Nevertheless, in terms of usability I strongly believe that a site visitor should be able to have control over his/her personal surfing experience. So don’t use popups.

There are certain situations, however, where using a pop-up window may spare you from loading a new page for the sake of usage, requires a little research and brain to find that descent spot and situation. Comments-popup.php’s intention would be one of those situations. Below I will list two different occasions where enabling this function to your readers would be cool enough (or not cool at all – make sure you do a poll afterwards and ask for their feedback).

1. If on your blog home you show a full article content instead of the excerpt, then clicking the article just to open it on it’s own because of the comment form would be a little stupid. I grant you authority to enable comments pop-up window in this situation.
2. On your blog you post links to other sites, a photo-blog, video-blog without 500 words of text, again I grant you authority to enable it.

It wasn’t that hard you see, just find the right moment, have your reasons, and just do it. Although, I strongly recommend you take into consideration certain aspects of usability in your site, and put yourself into the position of being your own sites visitor sometimes. Remember if it might look reasonable to you, not necessarily would look the same to your loyal reader, and you created your site/blog not for yourself.

Eventually, for those of you who don’t have a comments-popup.php file inside you themes, grab a copy of WordPress Classic Theme comments-popup.php file and then go fishing. CSS styling that is.

So tell me, have you heard about this before? Did you know what it was meant for? Did you know how to enable it?
Are you using it now after you’ve learned how to? Use the comment form below to express yourself, I am keen to read your story.

To carry on with my quest on world domination called WordPress and Web Development Tips for Ninjas, I am putting together a collection of 10 functions that have proven to be very useful to me while developing my WordPress Themes, themes that currently lie in my local server and unluckily never made it to public. Well, one made it at least and you can take a sneak peak of it by visiting www.shkurteshqip.com (it’s my other blog which was thought to be in Albanian, can’t seem to have the time for both, not right now at least).

Some functions you’ll find here were put together by me, when otherwise the source is stated and a link to its origin is provided. All WordPress PHP code is GPL after all. So here you have them, whether you already have had your shot on theme development, or a novice who just started into this business and giving it a first try, scan through the list and take now, what may come to good use the next day.

Note: All functions below are expected to be put in your theme’s functions.php file, there are additional instructions, however, when a certain functions needs to be called from within any other theme file.

1. Add Theme Native Thumbnail Support

The add_theme_support function, initially has been introduced in WP 2.9 and couple of new features has been added to it in the last 3.0 version.
By calling it in functions.php file, we tell WordPress what a particular theme is capable of.
To use WordPress native functionality for thumbnails we simply put this single line in.

add_theme_support('post-thumbnails');

Now you’ll be able to use all new functionality regarding thumbnails. You can echo a posts thumbnail by putting this next line in your index.php, or single.php, or even page.php file.

 if (has_post_thumbnail()) { the_post_thumbnail(); } 

Other features that can be enabled by this function are:

• ‘custom-header’
• ‘custom-background’
• ‘menus’
• ‘automatic-feed-links’
• ‘editor-style’

A note on adding support for menus though. There is no need to use add_theme_support(‘menus’) if you plan to register custom menus for your theme. For more details see list number 3 below in this post.

Related read: Post Thumbnail Images by Mark Jaquith

2. Remove WordPress Meta Generator Tag

This may sound a little arrogant and sort of not playing fair to WordPress, but it is recommended you disable this particular meta tag as a security measure. Most of us as WordPress users show in the footers how proud we are for using WordPress, so removing this meta tag wouldn’t really do any harm to anyone. Go ahead and put yourself in peace, copy and paste this one-line below to your functions.php bottom.

remove_action('wp_head', 'wp_generator');

3. Enable Custom Menus

Custom Menus is a new feature introduced in WordPress 3.0. It allows us as the name indicates to create custom menus for use in different scenarios and places in our theme. Its plain benefit to us is the possibility of customization. You can include what you want, order the new menus as you want and include it wherever you see it fit. For instance you can create a menu which lists only specific tags of your desire, create a combination of categories, tags, pages and custom links, etc.

function register_wpninja_menus() {
	register_nav_menus(
	array(
		'tag-menu' => __( 'Tags Menu' ),
		'cat-menu' => __( 'Categories menu' )
		)
	);
}
add_action( 'init', 'register_wpninja_menus' );

The function above will tell WordPress to register native support for custom menus with your theme, then you go on configuring them from the administration panel, it is located under Appearance menu called Menus to be more precise.

We then display the menu we just registered by placing wp_nav_menu in our header, or wherever we like to display our new created menu.

<?php wp_nav_menu(); ?>

Related read: Goodbye, headaches. Hello, menus! by Jastin Tadlock

4. Load jQuery and Custom Script

Every WordPress comes bundled with a variety of JavaScript Frameworks. To avoid possible conflicts that may arise later, and remove two or three lines of <script> tags from our header.php, we can create this dead simple function and our desired JS framework will be loaded in our theme, including any custom .js files we need.

//Load jQuery and My Custom Script
function wpninja_jquery() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_enqueue_script('jquery');
		wp_enqueue_script('init_script', get_bloginfo('template_url') . '/scripts/script.js', array('jquery'), '1.0', true);
	}
}
add_action('init', 'wpninja_jquery');

5. Theme Localization

The popularity of WordPress and the vast availability of themes, gives WP users an ocean of possibilities to choose from and satisfy their desire. Making a theme translatable is a key feature for every theme developer who decides to release his/her theme to the public.

Enabling localization is easy, but localizing a theme is a little bit of boring. See this 5 lines of code below and check the related read link for a more in-depth walk-through on how to translate WordPress themes.

load_theme_textdomain( 'wpninja', TEMPLATEPATH.'/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH."/languages/$locale.php";
if ( is_readable($locale_file) )
	require_once($locale_file);

Related read: How to Make a Translatable WordPress Theme by Jean-Baptiste Jung

6. Change Post Excerpt Length and More Link Output

This might not be very crucial one, however, there are scenarios where you need to have a certain number of characters for each post excerpt depending on your theme’s layout. You can alter the excerpt length and excerpt Read More link output with ease.

// Changing excerpt character length
function ninja_excerpt_length($length) {
  return 100;
}
add_filter('excerpt_length', 'ninja_excerpt_length');

// Changing excerpt more
function ninja_excerpt_more($more) {
return '%u2026';
}
add_filter('excerpt_more', 'ninja_excerpt_more');

7. Block Spam Comments

Undeniably, Akismet is an excellent plugin. If it wasn’t for Akismet, we would be spending more time on our blogs getting rid of spam comments rather then being concerned with more valuable things. This neat little function will serve just as an add-on to your comment spam protection filter. Simply paste it in your functions file and forget it.

//Block Spam Comments
function check_referrer() {
    if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == "") {
        wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') );
    }
}
add_action('check_comment_flood', 'check_referrer');

8. Subscribe Reminder

A simple Subscribe Reminder by which we can ask our readers politely to subscribe to our blog. This small message will be displayed at the very bottom of every post.

function subscribe_remind($content) {
	if ( !is_feed() && !is_page() && is_single() )
	$content .= '<div class="subscribes">
        <p>If you enjoyed this post, please consider <a href="http://feeds2.feedburner.com/axwp">subscribing to my RSS feed.</a><br /> <strong>Thank You!</strong></div>';
	return $content;
}
add_filter('the_content', 'subscribe_remind', 999);

9. Add a Custom Field Automatically on Post/Page Publish

I am a big fan of WP-Views plugin by LesterChan. But when I first stumbled on this snippet, I felt love at first sight.
So basically, automatically adding a views custom field every time a post/page is published would be the descent scenario to explain the good use of it. What else does this mean? Well, it means one plugin less in your blog, and I seriously acknowledge that.

add_action('publish_page', 'add_custom_field_automatically');
add_action('publish_post', 'add_custom_field_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);
	}
}

Source: wpCanyon

10. WordPress Breadcrumbs

I can’t honestly remember where I took this function from, but I like it for doing just what is says. Plain and simple, use breadcrumbs on your theme without activating yet another plugin, just put this in your functions.php file.

//Function Breadcrumbs >>
function the_breadcrumb($post_ancestors) {
    if (is_home()) {
        echo '<a href="';
        echo get_option('home');
        echo '">Home</a> &raquo; ';
        if (is_category() || is_single()) {
            the_category('title_li=');
            if (is_single()) {
                echo " &gt; ";
                the_title();
            }
         } elseif (is_page()) {
            foreach($post_ancestors AS $value) {
                echo "<a href='".get_permalink($value)."'>".get_the_title($value)."</a> &gt; ";
            }
            echo the_title();
        }
    }
}

To display your breadcrumbs in your header, or anywhere you like call the new breadcrumbs function with the post ancestor parameter.

<?php the_breadcrumb(get_post_ancestors($post_ID)); ?>

Theme Development know to be really challenging sometimes, the above was from what I found to be useful in certain occasions. Hope you find any of this useful and might come to good use to you anyhow.
Do you have any other simple function you use quite often? Have you ever tweaked any of the above for better performance?
Express it in the comments, I am thrilled to read you views on this.

I have always been a big fan of extended functionality, but never a big fan of means to extend by using plugins. Not that plugins are bad, but usually they have the tendency of slowing things down, and that is something not to commend. In the other hand, for the ‘unfortunate’ luck of WordPress being so popular, there are so many plugins in the repository, I suspect there is a developer in the world who hasn’t created his own. I’m thinking whether my grand-mother has developed one yet. Not everything that shines is gold.

After reading this write up by Gines, I suggested not to always rely on plugins, instead try to avoid them where possible. Although he makes a good point when says:

But for our friends who’s not in to coding, queries, development, plugins will have to do.

Anyway, as I challenged myself towards it, I jumped on and started to write my own Top Commentators function so I could list them on the sidebar. Surprisingly Matt listed as second top commenter, and it is a bit odd you know.

Now if you (as I) want to list your blogs Top Commentators lets go on and do some coding. Fire up your favorite code editor and open your themes function.php file in it.

Initially we need to create our function, I called it top_commentators() as its intention clearly indicates.

function top_commentators($show = 5){

Next step we globalize $wpdb class for our use, and execute our query to retrieve the required information from the database.

	//Globalize $wpdb class
	global $wpdb;
        //check for function results cache
        if (false === ( $comments = get_transient('comments') ) ) {
	//Execute Query and Store Results
	$comments = $wpdb->get_results('
		SELECT COUNT(comment_author_email) AS comments_count,
		comment_author_email, comment_author, comment_author_url
		FROM '.$wpdb->comments.'
		WHERE
			user_id != 1 AND comment_approved = 1
			AND comment_type = "" AND comment_author_email != ""
		GROUP BY comment_author_email
		ORDER BY comments_count DESC, comment_author ASC
		LIMIT '.$show );
    //Store cache in Database with 24 hours expiration time
    set_transient('comments', $comments, 60*60*24);
}

Some explanation might be necessary here. Note where the WHERE clause starts and the following code. I apply some restrictions here, first I use user_id != 1 to filter myself off the list, then I check comment_approved = 1 whether the comment is approved, then again I tell to look for comments comment_type = “” that are actual comments, not trackbacks or pingbacks and = “” looks for comments by default, no need to write the word within the quotes. And finally I ask comment_author_email != “” not to be blank. You can remove some or apply more if you wish.
The code from the above block, will execute the SQL statement and store it in the $comments variable as an array.

Finally, we need to organize our information structure, how we want to list them.
I chose div > p over ul > li combination just because I can.

	//Prepare HTML Output Structure
	$output = '<div id="topcommentators"><h3>Top Commentators</h3>';

	//Loop through found records
	foreach($comments as $comment){

	//Check if Commenter has provided a Website URL
	//if YES, link his/her info his/her site URL
    if($comment->comment_author_url){
		$output .= '<p><a href="'.$comment->comment_author_url.'" title="'.$comment->comment_author.'">'.get_avatar($comment->comment_author_email, $size='24', $default='', $comment->comment_author).' '.$comment->comment_author.' ('.$comment->comments_count.')</a></p>'.PHP_EOL;
    }
    else { //If Commenter hasn't provided an URL to his site then display the rest of the information
		$output .= '<p>'.get_avatar($comment->comment_author_email, $size='24', $default='', $comment->comment_author).' '.$comment->comment_author.' ('.$comment->comments_count.')</p>'.PHP_EOL;
      }
    }
	//End HTML Output
	$output .= '</div>';
	//Print results in the browser
	echo $output;
}

Basically, this is the easy part. After we retrieve the information we store the information into the $output variable and finally we echo everything to its own place. I was forced to do an if {} else check, because $comment->comment_author_url would return home blogs URL in case the comment author didn’t put his own. That was weird though. And we show the commentators’ Gravatar if there is one, or the default is returned.

Now, of course this doesn’t do anything on it’s own, so we need to call it anywhere we want to show our valued TOP Commentators who make our blogs look so neat and useful, and trustworthy, and worth spending our time, and much more.

Go ahead now, put this <?php top_commentators(); ?> wherever you want to list your TOP FIVE. I decided sidebar, yours can be footer or anywhere else on your blog. You can, however, alter the returned number of top comment authors to your satisfaction, say 10 for instance, simply by adding a desired value to the function:
<?php top_commentators(10); ?>

And last but doubtlessly not least, comes the CSS part where we “fancyfy” the output. Here’s what I used, change it to fit you best.

div#topcommentors p {
	margin: 0 0 5px;
	padding: 0;
	border-bottom: 1px dashed #ccc;
}
div#topcommentors p:hover { background: #f1f1f1; }

That was all it took to get what we wanted, in our own without activating YAMP (Yet Another More Plugin).
Let me know if it worked for you, if any troubles arise while trying to realize this on your own, just send me a nudge in the Comment form below. I’d try to assist you as best as I can.

And this would be the complete top_commentators() function code, just in case.

//Top Comment Authors
function top_commentators($show = 5){

	//Globalize $wpdb class
	global $wpdb;

        //check for function results cache
        if (false === ( $comments = get_transient('comments') ) ) {	

	//Execute Query and Store Results
	$comments = $wpdb->get_results('
		SELECT COUNT(comment_author_email) AS comments_count,
		comment_author_email, comment_author, comment_author_url
		FROM '.$wpdb->comments.'
		WHERE
			user_id != 1 AND comment_approved = 1
			AND comment_type = "" AND comment_author_email != ""
		GROUP BY comment_author_email
		ORDER BY comments_count DESC, comment_author ASC
		LIMIT '.$show );

    //Store cache in Database with 24 hours expiration time
    set_transient('comments', $comments, 60*60*24);
}
	//Prepare HTML Output Structure
	$output = '<div id="topcommentors"><h3>Top Commentors</h3>';

	//Loop through found records
	foreach($comments as $comment){

	//Check if Commenter has provided a Website URL
	//if TRUE, show URL and the rest of the information
    if($comment->comment_author_url){
		$output .= '<p><a href="'.$comment->comment_author_url.'" title="'.$comment->comment_author.'">'.get_avatar($comment->comment_author_email, $size='24', $default='', $comment->comment_author).' '.$comment->comment_author.' ('.$comment->comments_count.')</a></p>'.PHP_EOL;
    }
    else { //If Commenter hasn't provided an URL to his site then display the rest of the information
		$output .= '<p>'.get_avatar($comment->comment_author_email, $size='24', $default='', $comment->comment_author).' '.$comment->comment_author.' ('.$comment->comments_count.')</p>'.PHP_EOL;
      }
    }
	//End HTML Output
	$output .= '</div>';
	//Print results in the browser
	echo $output;
} //End Function

Download this function in a file: Function Top Commentators

Update: Thanks to our friend Pepe for asking in the comments, I’ve added two more lines in the second and final code blocks. Now it checks for cache if exists in Database, if not it’ll set a cache and an expiration time. This means the query will be executed once in 24 hours. You should see two new rows in wp_options table _transient_timeout_comments and _transient_comments.

Last week, MediaTemple servers got exploited. It was pointed out that target where sites with one or more WordPress installations. Whether you were hosted on a (mt) (gs) or (dv) server, no exception were made whatsoever. Certainly, I had the ‘joyful opportunity’ and was lucky enough to get the injection, which was hidden behind a <script> tag, at the end of every single post and/or page in the database. Injecting the malware script in the posts was very impressive (I pat the hacker in the back), as nothing happened whenever an infected site’s home page loaded, so it was impossible to sniff anything strange around. Nevertheless, once a reader clicked a post/page title, he/she would have been redirected to the infection injecting site, in about the next one or two seconds. It wasn’t quite pleasing tho, but sometimes this things give you a fun experience, like for instance spending half of the day trying to put order back again in the sweet Grid-Server (I headbutt the hacker, badly).

Fortunately, it all came well to the end, but I was so hasty that I clean installed all my WordPresses. After realizing that all did was completely unnecessary, I decided to move iTechnologize.net to this other domain of mine for good. I am not writing this article to express my condolences to neither MediaTemple or show how touched I felt. Instead, I want to tell you the procedures I went through, to moving WP from one domain to another. Keep in mind that this is not going to be an exhaustive list, so I’ll just walk you through the process quickly and easily I hope, and in the end I’ll show you what I did to redirect the domain and all my posts to cope with the new permalink structure I am using now. I am fully aware that you might have read a zillion articles regarding this, however this is the way I did it, and would do it over and over again. It’s a little risky hence it’s not recommended you try it at home, just on clients, because I want them to work with me now.

P.S. the steps are very concise but not detailed, so I expect you have a little or some experience with maintaining a server, using phpMyAdmin and FTP. But you can ask questions if more explanation is necessary. I’ll be glad to mess your head even more.

1. Backup

So you’ve got your new domain (location) up and running. Now first things first, I’ve seen many people tell to back-up all the files. I honestly don’t find it necessarily important to do that especially when you do a move. There are, however, some files that need to be temporarily saved for the next installation. Here’s a short and simple list of my considerations for back-up.

• wp-config.php is the important one, but only when I plan to use the existing database.
• everything that lies within wp-content folder. Thus, plugins, themes and uploads folder.
  But of course it all depends on your folder structure (i.e. where is uploads folder, any other files you use outside your theme’s folder, etc.).
• What you must exclusively backup is the database of course, but indeed that is a no-brainer.

That would basically suffice for the next move.
But when I speak of backing up the database, here you might want to consider two alternatives. Both rely on different scenarios.

1. Use phpMyAdmin to export your current database, if you plan to use the same in your new location,
2. Use Tools > Export if you want to preserve the existing content only; posts, pages, tags, categories etc. This means, however, you will lose all other settings, so you will have to reconfigure everything.

One more thing here and we’re done! In order to save you some minutes of frustration later, a good thing to do at this point would be changing some site configuration values. Log in to your old site’s WordPress Admin, click on Settings > General and change your WordPress address (URL) and Blog address (URL) to point to your new domain name. Doing this will spare you a WTF?! surprise, at the point when everything is ready on your new site, you try to login to you WP admin panel, and all of a sudden you get redirected back to the old site. If by any chance you forget to accomplish this move at this stage, don’t shit your pans because the same can be done later through phpMyAdmin with a simple SQL statement.

//update WordPress options with the new blog location:

UPDATE wp_options SET option_value = replace(option_value, 'http://www.itechnologize.net', 'http://wp.xhezairi.com') WHERE option_name = 'home' OR option_name = 'siteurl';

And that’s it, export your database now, selecting either of two alternatives above.

2. Prepare Your New Site

Now if you didn’t setup your new site before, now is a good time to make it ready.
The usual steps would consist of:

1. New-Domain.com NS change so it directs to your host,
2. Create the database
3. WordPress Installation – download, extract and upload files, or use the famous 1-Click installer if your hosts provides one,
4. Upload/Overwrite all your backed up files from the old-domain.com
5. Tools > Import your content, or phpMyAdmin > Import SQL file,
6. Setup any vital changes if necessary.

Now, before moving further, I have to tell you that up until now you’re almost ready to start freshened with the new location. Make sure your new site is configured an running smoothly, simply by loading the new-domain page on your browser. If everything seems right, you’ve got your posts and pages there, what you must do now is update old site links with the new ones. This can be achieved very easily, again simply by using phpMyAdmin.

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.itechnologize.net', 'http://wp.xhezairi.com');

Navigate around on your new site a little, just to confirm whether links are okay and site is loading the content properly. If you consider it to be fine, then you’re ready to go on the final step, and that is the most attractive one.
To me at least.

3. Finalizing – 301 Permanent Redirect

And you’re ready to move along, except for one last thing. We don’t want the old domain to generate any more traffic. That is the intention of the move of course, else why would we want to deal with all this boring steps, it would be all in vain. So at this stage, we do a 301 Permanent Redirect on the old site, and this is the case where we preserve all the traffic value and tell the search engine that we’ve moved for good.
The 301 Redirect can be achieved by putting this lines in a index.php file

<?php
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.new-site.com" );
?>

but I prefer using .htaccess over PHP in this situations, for one good reason only. RegEx
Open Notepad or any other plain text editor of choice, and copy / paste the lines below in it.

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://wp.xhezairi.net/$1 [R=301,L]

If you’re on Windows, save the file with a name of your choice, because you won’t be able to name it .htacccess, Windows doesn’t allow naming a file only by it’s extension. Upload it to your public folder and rename it to the required name (.htaccess), but you know that already. Don’t forget to replace my domain with yours, or you can even leave it just like it is, and I may thank you for that one day.

I first put this file in the root folder of itechnologize.net (which is my old domain), and in my case is html (or public_html depending on your host). This would redirect all the old domain traffic and all sub-directories to same directory structure on wp.xhezairi.com (my new domain). And I can see you go crazy about it now, because it seems so easy with just three lines of code, and you’re so happy about it.

But what if during the move, you’ve decided (like I did) to change the permalink structure of your posts, and make a better change in your new blog. “I want to make my permalinks more SEO this time” you say, and you don’t want to lose the traffic, an old post link should redirect to the original post regardless of its new permalink structure.
I hear you.

In my situation, my permalink structure used to be like the following:
http://www.itechnologize.net/20090301/mediatemple-cluster-2-incident-itechnologize-offline-for-6-hours/
I changed it to http://wp.xhezairi.com/mediatemple-cluster-2-incident-itechnologize-offline-for-6-hours.html

You see, I got rid of the date part and the trailing slash at the end of the URL, plus I added the .html suffix to it. So I wanted to redirect new visitors here, those who find my old saved posts by searching in Google.
This is the .htaccess file I had to write in order to redirect all the permalink transformation and preserve the traffic for my new site.

Options +FollowSymLinks
RewriteEngine on
RewriteRule ^([0-9]+)/(.*)/$ http://wp.xhezairi.com/$2.html [R=301,L]

The Regular Expression above is simple and easy. What it basically tells the browser is this:

• ^ – Start of line anchor (the .htaccess file lies within the old domain so it knows its location,
• ([0-9]+) – Combination of numbers, 1 or N (my published post date remember?)
• (.*) – Any single character combination, * indicates 0 or N
• $ – End of line anchor
• Last, but not least, the domain where to redirect

Mark the $2 characters in the link. It retrieves the value from the second grouping of characters only.
That’s the part where I got rid of the date numbers.

Finally I patted myself on the back, sat back and drowned in the smoke of a cigar, while staring at the new blog home immensely.

That is it more or less. I encourage you to ask any question you regarding this by using the comment form below, and I am gladly willing to help you, but first let me tell you one more thing.

This article consist of more than 1700 words, that is more than writing a freaky essay. So if you don’t go ahead to use the Social Buttons and Digg it, Tweet about it or take it to the Buzz, it will break my heart thoroughly, and make me feel like the examiner didn’t even bother scan through my essay. Then I will be forced to shave your head, and blame Matt for making such a big deal out of the Thesis theme. Or I would blame Chris for having such a haughty attitude and being such a great developer. Or eventually I will thank you for the time you took reading it, and for spreading the word and letting the others know about it.

Yesterday I was Googling for better ways of inserting TweetMeme’s Retweet button in a WordPress powered site, because I wasn’t quite happy with the slow load that the <iframe> caused on my blog, accidentally I stumbled upon this article. Admittedly, there are two things I like about the author of the article in word, ONE this SEOmofo guy is very articulated, he explains everything quite reasonably and detailedly, and TWO he is the first person in the world I’ve happened to hear about, who has an attitude very common to mine. And that is, making a public statement, declaring the self-proclamation of being the smartest man alive. I like that.

Now, the method explained by SEOmofo is very adequate when the scenario implies using pure JavaScript. I, however wanted to do the same with the Facebook Like <iframe> button, and as is jQuery (as always) in my case controlling my JavaScript functionality, I had to be flexible and adapt a little.

Before you continue reading below, I recommend you take a look at SEOmofo’s article first, and then you can see what you would like the most. For me, I disliked the window.onload = functionName; since it doesn’t accept two functions at once, instead one should define an array of function in order to load both of them when the DOM is ready, and I wanted to add Facebook Like button, plus I was already using jQuery, so, well I had to change. That’s why jQuery is way more sexy than pure JavaScript.

//Insert TweetMeme Retweet & Facebook Like button,
//without slow page load lag caused from the <iframe> tag.
if ($('#fb_btn').length && $('#tw_btn').length) {
  var fb_code = "";
  var tw_code = "";

  tw_code += "<iframe src=\"http://api.tweetmeme.com/button.js?url=" + escape(document.URL) + "&amp;style=compact&amp;source=axjezzy&amp;service=bit.ly\" scrolling=\"no\" frameborder=\"0\" width=\"60\" height=\"16\" >";

  fb_code += "<iframe src=\"http://www.facebook.com/plugins/like.php?href=" + escape(document.URL) +"&amp;layout=button_count&amp;show_faces=false&amp;width=70&amp;action=like&amp;colorscheme=light&amp;height=20\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:70px; height:20px;\" allowTransparency=\"true\" >";

  $('#fb_btn').html(fb_code);
  $('#tw_btn').html(tw_code);
}

Copy and Paste the code above within your jQuery(document).ready() (or $(function() short-tag if you use that)

jQuery(document).ready(function($){
//code goes here
}

Now what I did is pretty basic. I’ve just created two <span> tag elements and added them into my theme’s (not the theme I’m using here) single.php file (I’ve put them in the .postmeta div to be precise), one with id=”tw_btn” and the other with id=”fb_btn”. Then I’ve put together the jQuery code you saw above, and all it does is search for those elements by their id and if found it will insert the values assigned to the tw_code and fb_code variables.
In the end, when jQuery realizes that DOM is ready to be manipulated, meaning your page is loaded completely, it will insert those values and you won’t bear with no slow page load at all.

Why is better this way?
Because, iframe won’t piss your nerves when Facebook or TweetMeme servers behave bitchy or even are down at all. Eventually, you will either have the buttons, or you won’t, but the load lag won’t occur by any means.

P.S. I turned 24 today!

It’s me speaking again. I am not going to ramble about stuff right now at this very “first” post after a century, and bore you with personal things. Just passing by and greeting everyone here. My blogging habits have gone through some serious ups and downs, all was related with primary activities in life. I considered everything and concluded for now that I may be ready to start blogging again, not fully engaged though.

The only thing I would like to let you guys know is the launch of our studio’s single-page site. Poenta. We’ll preparing a blog there too.

Finally, to formalize this I am putting this Play for Nature song and invite you to feel it together with me, wishing for a better world.

From the award-winning documentary, "Playing For Change: Peace Through Music", comes the first of many "songs around the world" being released independently. Featured is a cover of the Ben E. King classic by musicians around the world adding their part to the song as it travelled the globe.

Need not say more?!

Eleven months ago I had an idea about a WordPress feature which gives a user the opportunity to put blog into maintenance mode, or turning it On/Off in special occasions to be more exact. I didn’t hesitate to suggest it to the public WP community. For eleven months, except good willing WP users, nobody from WordPress team has ever commented or said anything about possibly implementing that in any of the upcoming versions. Indeed, that can be achieved by developing a custom plug-in, but most bloggers (me for sure) tend to avoid activating too many plug-ins because it plods blog performance.

What about self-pinging?

Right! I’m sure you should already be aware of what does the term ping stand for in blogging. According to this WikiPedia article ping is:

In blogging, ping is an XML-RPC-based push mechanism by which a weblog notifies a server that its content has been updated.^[1] An XML-RPC signal is sent to one or more “ping servers,” which can then generate a list of blogs that have new material. Many blog authoring tools automatically ping one or more servers each time the blogger creates a new post or updates an old one.

Now there’s this very requested feature (No-Self-Ping) that has been discussed a lot around the interwebs lately, but at the time of writing it is only available as a plug-in. Honestly, pinging your own blog posts is sometimes very annoying, however, some bloggers don’t mind that but some others really do. Hence, thankfully to No-Self-Ping by Michael Adams, the annoyance is long gone and forgotten. I just had to play around with WP Core files and have modified some of them to add this option in WP-Admin –> Settings –> Discussion Settings for the only reason of not being a fan of too-many-activated-plugins at once.

Wouldn’t you really appraise a neat feature like that, an optional setting that can be turned on and off based of each of us personal taste.

Now as for No-Self-Ping, it isn’t really a big deal though because it is the smallest plug-in I have ever come across until today, so it wouldn’t really decrease your blog’s performance much. Only seven lines of code for a very useful option.

<?php
function no_self_ping( &$links ) {
$home = get_option( 'home' );
foreach ( $links as $l => $link )
if ( 0 === strpos( $link, $home ) )
unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );
?>

Seriously I would like to see this feature in the upcoming version WordPress 2.8, it will save our time and it’s nice to just have it there.

Where do you stand in this? Do you like pinging your own blog posts, or rather have that thing turned off?