Category Archives: CSS

3 Simple Hacks to Recover Lost WordPress Password

Let’s be honest, every once in a while we forget passwords. It’s a common but widespread issue we all go through. Gmail, Hotmail, Facebook, Skype, Bank passwords and WordPress, our tiny brains have a lot to remember. Imagine you’re a business owner or blogger and have a WordPress site, and you forget its password. It’s not just you, but the nerds and even techies can’t remember their passwords at times.

Well, it may give you panic attacks, but it’s not a big deal. WordPress has simplified it to reset or recover your lost password. There are many ways to do that. However, the simplest of all is to get a new password via email through the login screen. But what if it doesn’t work? You would need to count on some other options to reset your password. Again, there are many ways but you need to implement only one though.

Here, we are going to talk about three hacks that will help you recover your WordPress password. Let’s check out what exactly they are.

Hack #1—Password Recovery or Reset via Email

Well, we discussed it right at the start. But we didn’t discuss “how”. It’s the easiest way to recover your lost WordPress password. However, this method is useful only when you know your username or the email ID used in your WordPress profile.

Go to webpage first. Start by clicking “Lost password?” option given just at the bottom of the login section as shown in the picture below.


This page will need you to provide your user ID or email address. The moment you enter the right email or username, you will receive the password to your registered email ID.

Open your email address and click on the link to reset your lost password. Now, you can access your WP site!

But sometimes, people forget their username or couldn’t recall the email linked to it. If any of these cases bothers you, don’t worry! Let’s move to the next step!

Hack #2— Password Reset or Recovery in PhpMyAdmin using cPanel

This step is for users who can access PhpMyAdmin. The URL for this step should be http://localhost/phpmyadmin. But it may vary to some extent as per one’s configuration settings. Here are the steps to follow:

a. Login to your cPanel of your WordPress hosting profile. Under the database section, choose phpMyAdmin option.


This will take you to the phpMyAdmin dashboard. Now, open your site’s WordPress database for which you have to change the password.


Go into the database table column and search wp_users. Click the “Browse” option given next to it.

Click on the user_login and find the username for which you have to change the password. When you click edit option, the user_id appears. Click edit again.

database row

Under the “user_pass” option, you’ll see a list of letters and numbers jumbled together. Select this string and delete it.

Now enter your new password. Pay attention to it as the passwords are usually case-sensitive.

Once finished, choose the MD5 option listed in the drop-down box as shown in the picture below.

DB tables

Check it twice to make sure you have entered the correct password and selected MD5.

Click the “Update”, “Save”, or “Go” option located at the footer section.

WHOA! You have successfully reset your WordPress password via phpMyAdmin. Now, you can log in with your new password! Of course, you need to enter your username first.

Wait a minute! What if you cannot access your WordPress site via cPanel? Well, there is yet another way to rest it! Here it comes.

Hack #3— WordPress Password Reset using FTP

Do you know every WordPress theme includes a PHP file called functions.php? What all you need to do is to download the same file from your hosting server (for WordPress) to your local computer via FTP.

Open the WordPress functions.php file using a text or page editor such as Notepad or Dreamweaver. Now, add a code line wp_set_password (‘abcdef, 1’) just after the

Editing wp_set_password code will allow you to reset, recover or change your WordPress password.

Here ‘abcdef’ is a sample password. It’s entirely up to you to choose any password you like. Here 1 is associated with the ID number of WordPress users.

Once you’re done with editing, save the changes you made in the functions.php. Upload the saved file to your site using FTP once again.

And, your password reset is done! Now, you can log in back to your site via your wp_admin page.

After you’ve successfully changed the password, it’s time to undo those changes. Yes, you need to undo the changes you made to WordPress theme file. Download the functions.php file again via FTP and delete the code “wp_set_password.”

Now, upload the edited file back to your site using FTP. This step will mark the end of the password recover hack.

Food for the thought

Although you are familiar with your webpage design, are you familiar with the theme? If you use cPanel or FTP to reset your password, you need to know the active WordPress theme on the website. If you edit an inactive one, you won’t be able to recover or reset the password. Look at the footer section, page source or the dashboard to know the theme of your WordPress website.

So what are you waiting for? Go and give your new password a shot!

How to use CSS3 media queries for responsive website ?

Responsive website is a todays demand and every developer should learn about how the responsive website will create and how to use css3 media queries. Before start we have to understand about how the media query works. Media query is a css3 module that allow website to rendered properly in screen resolutions. If your are applying condition in media query then the css will work when the condition is true. Lets talk about some method which we can use for creating responsive website. Media query helps to use different styles for different resolutions. There are two very easy way to use media queries for responsive website. You can use media query within stylesheet or you can create external files for different resolutions. Lets start with the first method where we can use media queries within stylesheet.

In this method you can create and manage your css within one stylesheet. Create css file by using your code editor and add some media queries for screen resolutions like mobile portrait and landscape or tab. you can use media query add some condition like this @media only screen (max-width:479px). Please see the below media queries for standard resolutions.

 /* ----------- Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
    /* Your css goes here... */

/* ----------- Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) 
    /* Your css goes here... */

/* ----------- Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
    /* Your css goes here... */

/* ----------- iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
    /* Your css goes here... */

/* ----------- iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
    /* Your css goes here... */

/* ----------- iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
    /* Your css goes here... */

/* ----------- Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
    /* Your css goes here... */

/* ----------- Large screens ----------- */
@media only screen and (min-width : 1824px)
    /* Your css goes here... */

/* ----------- iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
    /* Your css goes here... */

You can use this queries within one stylesheet but there is lots of developers gets confuse to manage all the css of media queries form one stylesheet for this i have another method to use this queries by using separate stylesheets for separate resolutions. Firstly you have to create css files then link that files within the head tag in Html file and for applying condition you have to use media attribute in link tag. Here you can see how the media queries apply in external css files.

<link rel="stylesheet" type="text/css" href="computer.css" media="screen and (min-width:1000px)" /></div>

Above is the example of only one resolution but you can create many. By using this resolutions you can create a nice responsive website which is compatible for all devices. When you will create responsive website do not put any css in style.css which might be changable in any some resolution you can put it on separate file. In the style.css you can only add that css which will be same in any resolutions because browser renders the style.css file as default.

So if you use this queries and methods on proper way you will easily create an nice looking responsive sites. Hope this article will helpful to you and in if you have any question or suggestion about this article you can please comment below or Contact Us anytime.

Good Luck!