The following is a list of common HTML mark up mistakes made by front end developers. Whether you are a newbie web designer, or a programmer who wants to try his hands in UI designing, try to avoid these mistakes. 1. Don't place Block elements within Inline elements An HTML element is displayed as Block or as Inline by default. Block elements, such as divs and paragraphs, make up the structure of the document. Inline elements reside in these blocks, such as anchor and span tags. So you should never put blocks inside inline elements. Wrong: <a href="#"><h2>Block inside Inline</h2></a> Right: <h2><a href="#">Inline inside Block</a></h2> 2. Always have the alt attribute for image tags The ALT attribute is a required one for IMG tags, it describes the context of the image. It helps your user on a screen reader or with a slow connection to decide whether or not the image is important. It also makes the web crawler index your contents better. If the images is just for show, use an empty ALT attribute like alt="" Wrong: <img src="profilepic.jpeg"/> Right: <img src="profilepic.jpeg" alt="Profile pic of the user"/> 3. Don't use line breaks to show a list If you wan't to show a list of things in bulleted or numbered ...

You have started a blog to share your opinion with the World Wide Web. Someone stumbles upon one of your articles. He likes it, and posts it on Digg. Now it gets everyone's attention. Visitors come pouring into your site. Your revenue starts to go up. Definitely good news! But now there is a catch. You are now the target of the 'bad crowd' of the Internet, spammers, hackers and leechers. It's time to toughen up your innocent little Wordpress site. The .htaccess file is the easiest and the cheapest (actually it's free!) solution to secure a Wordpress blog. What is a .htaccess File? The .htaccess file is a configuration file for use on web servers running the Apache Web Server software. When a .htaccess file is placed in a directory which is in turn "loaded via the Apache Web Server", then the .htaccess file is detected and executed by the Apache Web Server software. It is often used to specify the security restrictions for the particular directory. In this article I'm going to show you how to strengthen your site's security by adding/changing a few lines in this file. Before you make any changes, it might be a good idea to take a backup ...

I have been pretty busy with the WordPress plugin development lately, so didn't get a chance to write any posts for a few weeks. I think it's about time I share a simple but effective website performance improvement trick with the readers of this site that I have been using on all my sites. If you haven't read the WordPress site optimization tips and tricks already then you should read that first. This trick involves changing some of the dynamic wordpress queries to static ones which in turn reduces the number of database queries and improves site performance. This does require a little bit of PHP knowledge but it's really basic stuff. In your WordPress theme's header and footer you will see many statements similar to the following: bloginfo('home') This queries WordPress for the home URL of your blog (eg. http://www.your-site.com). Now, how often do you think your home URL is going to change? Most likely never! So why not replace it with the static information which is "http://www.your-site.com" and make one less database query? Saving one database query may not sound very convincing but you probably have many statements like the following that can also be replaced: bloginfo('html_type') bloginfo('charset') bloginfo('name') bloginfo('version') bloginfo('stylesheet_url') bloginfo('rss2_url') bloginfo('template_directory') bloginfo('home') Now multiply that by every page load per ...

Few weeks ago I wrote on how to optimize your WordPress site for better performance which has some tips and tricks on how to speed up a WordPress Site. I received a few requests to elaborate on some of the points as not all of them are obvious changes. In this article I have explained how you can add far future expiry header to your image, css and javascript files to speed up your site. Adding expires headers do not affect the site load time for a first time visitor but you will be surprised how much the page load time decreases (faster page load) for subsequent page views/return visits from that visitor. Expires header specifies a time far enough in the future so that browsers won't try to re-fetch images, CSS, javascript etc files that haven't changed (this reduces the number of HTTP requests) and hence the performance improvement on subsequent page views. If your server is Apache (most web servers), you can use the 'ExpiresDefault' directive to set an expiration date relative to the current date. ExpiresDefault "access plus 2 months" This sets the expiry date of the file 2 months into the future from the current time. The following values can ...

It is a known fact that having an affiliate program is the most powerful way to market your products or services online (Read more on the benefits of affiliate program). If you own a WordPress blog/site and your answer to the following questions are 'yes' then the 'WordPress Affiliate Platform' might just be what you need: Do you sell products or services online from your WordPress blog/site? Do you want to increase your sales and explode your profits by using an affiliate program? Do you want to have your own affiliate program so you can cut the middle man? Plugin Summary The 'WordPress Affiliate Platform' is an easy to use WordPress plugin for affiliate recruitment, management and tracking that can be used on any WordPress blog/site. This plugin lets you run your own affiliate campaign/program and allows you to reward(pay commission) your affiliates for referred sales. The admin can upload/configure banners/links which the affiliates can use on their blog/site to drive traffic to your site. All the clicks, leads, sales etc are tracked by this plugin. How It Works How the WordPress Affiliate Platform Works Plugin Features Some key features of the WordPress Affiliate Platform include: Easy Installation Easy installation like any other WordPress plugin and very easy to use. Real Time ...

I recently changed my web hosting again in an attempt to speed up the page load time of my website. I had to do it as the former hosting's page response time was horrible. It was taking 9 seconds for my home page to load with the former hosting. Now my home page loads under 4 seconds! It's amazing the difference it makes... now I don't get angry when browsing my own site (I wonder what my visitors were thinking while waiting for the page to load!). Anyway, The transfer was smooth but I had a slight issue that I noticed after the transfer. There were special characters similar to the following scattered throughout my blog posts: I was pretty sure that this was a character encoding mismatch problem. I got a little scared thinking it would take a long time to fix but then I found a really easy way to solve it. Fixing the Character Encoding Mismatch Problem in WordPress Open the 'wp-config.php' file in a text editor such as notepad (the wp-config.php file can be found on the directory where you installed WordPress). Find the following two lines and comment them out: define('DB_CHARSET', 'utf8'); define('DB_COLLATE', ''); They should look like the following after ...

I wanted to use widgets in the footer of my WordPress theme but my wordpress theme didn't come with a footer-sidebar by default. I didn't really wanted to change the theme just because of that. So I hacked the wordpress theme to introduce footer-sidebars. If you are looking for a tutorial that explains how you can add sidebars/widgets to the footer of your WordPress theme then keep reading. There are really three main parts to introducing a footer-sidebar 1. Registering the Sidebars in the WordPress Theme 2. Inserting the Sidebars In the WordPress Theme 3. Putting some style into the sidebars 1. Register the Sidebars in the WordPress Theme Go to the WordPress theme editor and open the Theme Functions (functions.php) file. Now Search for the following line in your Theme Functions (functions.php) if ( function_exists('register_sidebar') ) Once you find the above line then take a look at the the next line which should look similar to one of the followings depending on how many sidebars you have: register_sidebar(array( or register_sidebars(2,array( Say for example you have one sidebar in your theme and you want to add three rows of sidebars in the footer area so you can put widgets then overwrite the code with the following: register_sidebars(4,array( The above will register 4 sidebars (one ...

I have been revisiting the various security settings of my WordPress blog after the sudden database table corruption of this blog for unknown reason last week. In this post I have highlighted some of the security tips that can help protect your blog from possible outside attacks. Use Strong Passwords for all Entry Points I was surprised to find out how many of my friends use the WordPress admin password generated by WordPress during install time and thinks that their blog is protected from attacks as they are using a strong password! The WordPress admin password generated during install time is normally pretty strong (consists lowercase and uppercase letters with numbers and symbols) so there is nothing wrong with that. I was mainly shocked to find out that their ftp/cPanel password for that domain is not that strong. It gets even better... one of them were using his partners name as the password (Did I mention that his partner's name was mentioned on his blog's 'About' page?)! The ftp/cPanel password for your domain is equally important. If someone can access your cPanel then that person can delete your WordPress database from the cPanel->Databases->MySQL Databases. Anyway, the bottom line is to use ...

I hope this doesn't happen to anyone else but this morning  my blog Tips and Tricks HQ somehow disappeared from the face of this earth! The day started as usual... I woke up in the morning went to my office and started checking my emails and found out that I received an email from SiteUptime (SiteUptime is a website monitoring service that checks your website at regular intervals and notifies you via email or SMS if it becomes unavailable) telling me that my site is down. So naturally I wanted to check if the site is up now. When I entered the site address in the address bar I got the following screen! [caption id="attachment_959" align="alignnone" width="444" caption="WordPress Blog Setup Screen"][/caption] You can probably imagine that at this point I was pretty scared! I always backup my database and WordPress files regularly so I wasn't completely in the water but what about all the articles that I have posted after the last backup? Not to mention the traffic that I am loosing now! Anyway, in my case the damage wasn't that severe. One of my WordPress database tables 'wp_options' was marked as crashed and I was getting the following error that I recovered from ...

According to Wikipedia "A trackback is one of three types of linkbacks, methods for Web authors to request notification when somebody links to one of their documents. This enables authors to keep track of who is linking, and so referring, to their articles". Most bloggers don't show pingbacks and tracbacks on their blog but if you want to show them then I recommend separating pingbacks and trackbacks from the comments. The main reason I like to separate them is because comments are sometimes an ongoing conversation and trackbacks in the middle kinda breaks the flow of the conversation. Here is how you can separate the pingbacks and trackbacks from the comments. search for the following line in your comments.php template file [lang='php'] [/lang] Put the following two lines just after the above line. [lang='php'] [/lang] Now look for the end of the 'for' loop so you can close the if statement that you just introduced. To do that search for the following line [lang='php'] endforeach; [/lang] Just above that line insert the following code to end the if statement [lang='php'] [/lang] This will filter out the trackbacks and only show comments in this section. If you don't want to show the pingbacks and trackbacks then you are done. If you do want to show the trackbacks ...