Archive for February, 2013

As responsive design rapidly increases in popularity, we felt we would take a look at some of the varied solutions and techniques that are being adopted for managing the navigation/menu on smaller screened devices.

Planning and building your menu for mobiles will perhaps be the trickiest aspect of your responsive layout, not just with the coding but also having to decide what will stay and what will have to go to fit everything into the smaller screen. It is a juggling act between both readability and the desire to show as much on the screen as possible.

Hopefully the solutions we have for you below will help get you on your way.

Menu I used:-


Progressive And Responsive Navigation (Tutorial)

Progressive And Responsive Navigation

This tutorial, from Smashing Magazine, takes you through the steps for coding your navigation using a little forethought and considering the principles of progressive enhancement from the beginning and applying some responsive practices at the end, allowing your navigation to easily accommodate less-capable browsers and modern browsers in both desktop and mobile environments.

Progressive And Responsive Navigation →Demo →

Responsive Navigation Menu (Tutorial)

Responsive Navigation Menu

With this tutorial you will learn how to code a simple and effective responsive navigation menu, with a grid layout, that you will be able to easily modify and reuse in your own projects.

Responsive Navigation Menu →Demo →

TinyNav.js (jQuery Plugin)


TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screens. It also automatically selects the current page and adds selected="selected" for that item.

TinyNav.js →Demo →

Responsive Drop Down Navigation Menu (Tutorial)

Responsive Drop Down Navigation Menu

The code for this menu is based on the famous Suckerfish Dropdown menu, restyled to make it responsive. It will work great in all modern desktop browsers without Javascript.

Responsive Drop Down Navigation Menu →Demo →

HorizontalNav (jQuery Plugin)


HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. It comes with an option to make it responsive, allowing the navigation to auto-adjust when the window is resized.

HorizontalNav →

Responsive, Mobile-First Navigation Menu (Tutorial)

Responsive, Mobile-First Navigation Menu

This tutorial demonstrates how to develop a complex responsive navigation menu using the “Mobile-First Approach”. The aim is to present mobile users with a pseudo-native, touch-conducive and interactive interface that enables them to navigate the website with ease.

Responsive, Mobile-First Navigation Menu →Demo →

SelectNav.js (Javascript Plugin)


SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a <select> drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

SelectNav.js →Demo →

Convert a Menu to a Dropdown for Small Screens (Tutorial)

Convert a Menu to a Dropdown for Small Screens

Convert a Menu to a Dropdown for Small Screens →Demo →

Simple Responsive Menu

Simple Responsive Menu

This tutorial takes a typical desktop menu and shows you how to, using Modernizr, jQuery and media queries, convert it to a small menu button for smaller screens that only appears when pressed, and pressing it again will retract it.

Simple Responsive Menu →

Mobile Menu (jQuery Plugin)

Mobile Menu

Mobile Menu is a jQuery plugin that turns your site’s navigation into a dropdown (<select>) when your browser is at mobile widths. It comes with a handful of options, including the really useful “combine”, that allows you to convert multiple navigation lists into a single dropdown.

Mobile Menu →



CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.


The color of this box will change on different os/browsers:

  • Internet Explorer – yellow
  • Internet Explorer 7 – orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) – red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) – pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) – gray
  • Opera – green
  • Konqueror – blue
  • Safari – black
  • Chrome – cyan

If the box is white, and you are using one of browsers above, something is wrong :-/
Help us in this case!

Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
.ie7 .example {
  background-color: orange
.gecko .example {
  background-color: gray
.win.gecko .example {
  background-color: red
.linux.gecko .example {
  background-color: pink
.opera .example {
  background-color: green
.konqueror .example {
  background-color: blue
.webkit .example {
  background-color: black
.example {
  width: 100px;
  height: 100px;
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

Screenshots on Browsercam

Chris Preece contributed with some images


I need to update this script every time a browser is released with new UserAgent string.

This is a little effort, but certainly with your donation I will do it happier 🙂

Click here to lend your support to: css_browser_selector and make a donation at !


git clone git://


1. Copy and paste the line below, inside <head> and </head> tag

<script src=”css_browser_selector.js” type=”text/javascript”></script>

2. Set CSS attributes with the code of each browser/os you want to hack


  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win – Microsoft Windows (all versions)
  • vista – Microsoft Windows Vista new
  • linux – Linux (x11 and linux)
  • mac – Mac OS
  • freebsd – FreeBSD
  • ipod – iPod Touch
  • iphone – iPhone
  • ipad – iPad new
  • webtv – WebTV
  • j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • blackberry – BlackBerry new
  • android – Google Android new
  • mobile – All mobile devices new

Available Browser Codes [browser]:

  • ie – Internet Explorer (All versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (all versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • ff3_5 – Firefox 3.5
  • ff3_6 – Firefox 3.6 new
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • opera10 – Opera 10.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 – Safari 3.x
  • chrome – Google Chrome
  • iron – SRWare Iron

Extra Codes:

  • js – Will be available when js is enable, so you can show/hide some stuffs


Original idea by 37signals.

10 Useful wordpress security tweaks

Posted: February 4, 2013 in Wordpress

Security has always been a hot topic. Offline, people buy wired homes, car alarms and gadgets to bring their security to the max. Online, security is important, too, especially for people who make a living from websites and blogs. In this article, we’ll show you some useful tweaks to protect your WordPress-powered blog.

1. Prevent Unnecessary Info From Being Displayed

The problem
When you fail to log into a WordPress blog, the CMS displays some info telling you what went wrong. This is good if you’ve forgotten your password, but it might also be good for people who want to hack your blog. So, why not prevent WordPress from displaying error messages on failed log-ins?

The solution
To remove log-in error messages, simply open your theme’s functions.php file, and paste the following code:

1 add_filter('login_errors',create_function('$a', "return null;"));

Save the file, and see for yourself: no more messages are displayed if you fail to log in.

Please note that there are several functions.php files. Be sure to change the one in your wp-content directory.

Code explanation
With this code, we’ve added a simple hook to overwrite the login_errors() function. Because the custom function that we created returns only null, the message displayed will be a blank string.


2. Force SSL Usage

The problem
If you worry about your data being intercepted, then you could definitely use SSL. In case you don’t know what it is, SSL is a cryptographic protocol that secures communications over networks such as the Internet.

Did you know that forcing WordPress to use SSL is possible? Not all hosting services allow you to use SSL, but if you’re hosted on Wp WebHost or HostGator, then SSL is enabled.

The solution
Once you’ve checked that your Web server can handle SSL, simply open your wp-config.php file (located at the root of your WordPress installation), and paste the following:

1 define('FORCE_SSL_ADMIN', true);

Save the file, and you’re done!

Code explanation
Nothing hard here. WordPress uses a lot of constants to configure the software. In this case, we have simply defined the FORCE_SSL_ADMIN constant and set its value to true. This results in WordPress using SSL.


3. Use .htaccess To Protect The wp-config File

The problem
As a WordPress user, you probably know how important the wp-config.php file is. This file contains all of the information required to access your precious database: username, password, server name and so on. Protecting the wp-config.php file is critical, so how about exploiting the power of Apache to this end?

The solution
The .htaccess file is located at the root your WordPress installation. After creating a back-up of it (it’s such a critical file that we should always have a safe copy), open it up, and paste the following code:

1 <files wp-config.php>
2 order allow,deny
3 deny from all
4 </files>

Code explanation
.htaccess files are powerful and one of the best tools to prevent unwanted access to your files. In this code, we have simply created a rule that prevents any access to the wp-admin.php file, thus ensuring that no evil bots can access it.


4. Blacklist Undesired Users And Bots


The problem
This is as true online as it is in real life: someone who pesters you today will probably pester you again tomorrow. Have you noticed how many spam bots return to your blog 10 times a day to post their annoying comments? The solution to this problem is quite simple: forbid them access to your blog.

The solution
Paste the following code in your .htaccess file, located at the root of your WordPress installation. As I said, always back up the .htaccess file before editing it. Also, don’t forget to change 123.456.789 to the IP address you want to ban.

1 <Limit GET POST PUT>
2 order allow,deny
3 allow from all
4 deny from 123.456.789
5 </LIMIT>

Code explanation
Apache is powerful and can easily be used to ban undesirable people and bots from your website. With this code, we’re telling Apache that everyone is allowed to visit our blog except the person with the IP address 123.456.789.

To ban more people, simply repeat line 4 of this code on a new line, using another IP address, as shown below:

1 <Limit GET POST PUT>
2 order allow,deny
3 allow from all
4 deny from 123.456.789
5 deny from 93.121.788
6 deny from 223.956.789
7 deny from 128.456.780
8 </LIMIT>


5. Protect Your WordPress Blog From Script Injections

The problem
Protecting dynamic websites is especially important. Most developers always protect their GET and POST requests, but sometimes this is not enough. We should also protect our blog against script injections and any attempt to modify the PHP GLOBALS and _REQUEST variables.

The solution
The following code blocks script injections and any attempts to modify the PHP GLOBALS and _REQUEST variables. Paste it in your .htaccess file (located in the root of your WordPress installation). Make sure to always back up the .htaccess file before modifying it.

1 Options +FollowSymLinks
2 RewriteEngine On
3 RewriteCond %{QUERY_STRING} (\<|%3C).*script.*(\>|%3E) [NC,OR]
4 RewriteCond %{QUERY_STRING} GLOBALS(=|\[|\%[0-9A-Z]{0,2}) [OR]
5 RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2})
6 RewriteRule ^(.*)$ index.php [F,L]

Code explanation
Using the power of the .htaccess file, we can check requests. What we’ve done here is check whether the request contains a <script> and whether it has tried to modify the value of the PHP GLOBALS or _REQUEST variables. If any of these conditions are met, the request is blocked and a 403 error is returned to the client’s browser.


6. Fight Back Against Content Scrapers

The problem
If your blog is the least bit known, people will no doubt try to use your content on their own websites without your consent. One of the biggest problems is hot-linking to your images, which saps your server’s bandwidth.

The solution
To protect your website against hot-linking and content scrapers, simply paste the following code in your .htaccess file. As always, don’t forget to back up when modifying the .htaccess file.

1 RewriteEngine On
2 #Replace ?mysite\.com/ with your blog url
3 RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]
4 RewriteCond %{HTTP_REFERER} !^$
5 #Replace /images/nohotlink.jpg with your "don't hotlink" image url
6 RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

Once you’ve saved the file, only your website will be able to link to your images, or, to be more correct, no one would link to your images, because it would be way too complicated and time-consuming. Other websites will automatically display the nohotlink.jpg image. Note that you can also specify a non-existent image, so websites that try to hot-link to you would display a blank space.

Code explanation
With this code, the first thing we’ve done is check the referrer to see that it matches our blog’s URL and it is not empty. If it doesn’t, and the file has a JPG, GIF, BMP or PNG extension, then the nohotlink image is displayed instead.


7. Create A Plug-In To Protect Your Blog From Malicious URL Requests


The problem
Hackers and evil-doers often use malicious queries to find and attack a blog’s weak spots. WordPress has good default protection, but enhancing it is possible.

The solution
Paste the following code in a text file, and save it as blockbadqueries.php. Once you’ve done that, upload it to your wp-content/plugins directory and activate it as you would any other plug-in. Now your blog is protected against malicious queries.

01 <?php
02 /*
03 Plugin Name: Block Bad Queries
05 Description: Protect WordPress Against Malicious URL Requests
07 Author: Perishable Press
08 Version: 1.0
09 */
11 global $user_ID;
13 if($user_ID) {
14   if(!current_user_can('level_10')) {
15     if (strlen($_SERVER['REQUEST_URI']) > 255 ||
16       strpos($_SERVER['REQUEST_URI'], "eval(") ||
17       strpos($_SERVER['REQUEST_URI'], "CONCAT") ||
18       strpos($_SERVER['REQUEST_URI'], "UNION+SELECT") ||
19       strpos($_SERVER['REQUEST_URI'], "base64")) {
20         @header("HTTP/1.1 414 Request-URI Too Long");
21     @header("Status: 414 Request-URI Too Long");
22     @header("Connection: Close");
23     @exit;
24     }
25   }
26 }
27 ?>

Code explanation
What this code does is pretty simple. It checks for excessively long request strings (more than 255 characters) and for the presence of either the eval or base64 PHP functions in the URI. If one of these conditions is met, then the plug-in sends a 414 error to the client’s browser.


8. Remove Your WordPress Version Number… Seriously!

The problem
As you may know, WordPress automatically displays the version you are using in the head of your blog files. This is pretty harmless if your blog is always up to date with the latest version (which is certainly what you should be doing anyway). But if for some reason your blog isn’t up to date, WordPress still displays it, and hackers will learn this vital piece of information.

The solution
Paste the following line of code in the functions.php file of your theme. Save it, refresh your blog, and voila: no more WordPress version number in the header.

1 remove_action('wp_head', 'wp_generator');

Code explanation
To execute certain actions, WordPress uses a mechanism called “hooks,” which allow you to hook one function to another. The wp_generator function, which displays the WordPress version, is hooked. We can remove this hook and prevent it from executing by using the remove_action() function.


9. Change The Default “Admin” Username


The problem
Brute force is one of the easiest ways to break a password. The method is simple: try as many different passwords as possible until the right one is found. Users of the brute force method use dictionaries, which give them a lot of password combinations.

But knowing your username certainly makes it easier for them to guess the right combination. This is why you should always change the default “admin” username to something harder to guess.

Note that WordPress 3.0 let you choose your desired username by default. Therefore, this tip is still usefull if you still use the old “admin” account from older WordPress versions.

The solution
If you haven’t changed the “admin” username yet, simply run the following SQL query to your database to change it for good. Don’t forget to specify your desired username.

1 UPDATE wp_users SET user_login = 'Your New Username' WHERE user_login = 'Admin';

Code explanation
Usernames are stored in the database. To change one, a simple UPDATE query is enough. Note that this query will not transfer posts written by “admin” to your new username; the source post below shows you how to easily do that.


10. Prevent Directory Browsing

The problem
By default, most hosts allow directory listing. So, if you type in the browser’s address bar, you’ll see all of the files in that directory. This is definitely a security risk, because a hacker could see the last time that files were modified and access them.

The solution (Updated)
Just add the following to the Apache configuration or your .htaccess file:

1 Options -Indexes

Code explanation
Please note that it’s not enough to update the blog’s robots.txt file with Disallow: /wp*. This would prevent the wp-directory from being indexed, but will not prevent users from seeing it.


18 WordPress Security Plug-ins and Tips to Secure Your Blog