WooCommerce Email Verification WordPress Code

Ok, i though this will be available since Woocommerce is pretty popular but HOW COME NO ONE ACTUALLY MAKE THIS CODE AND OPEN SOURCE IT?! Holy cow! I search it everywhere and couldn't find WooCommerce verifying user email before allowing the user to access WordPress without verifying whether their email is authentic. In the end i wrote it myself and i'm gonna throw it out for people to use.

Basically the code has to be placed within function.php in your theme, you can also make this into a WordPress plugin and fine tune it if you like. However, please share the code out cause mine isn't the most perfect out there. I am just gonna throw it out and see what other improvement can others suggest or create. Cheers!

// this is just to prevent the user log in automatically after register
function wc_registration_redirect( $redirect_to ) {
        wp_logout();
        wp_redirect( '/sign-in/?q=');
        exit;
}
// when user login, we will check whether this guy email is verify
function wp_authenticate_user( $userdata ) {
        $isActivated = get_user_meta($userdata->ID, 'is_activated', true);
        if ( !$isActivated ) {
                $userdata = new WP_Error(
                                'inkfool_confirmation_error',
                                __( '<strong>ERROR:</strong> Your account has to be activated before you can login. You can resend by clicking <a href="/sign-in/?u='.$userdata->ID.'">here</a>', 'inkfool' )
                                );
        }
        return $userdata;
}
// when a user register we need to send them an email to verify their account
function my_user_register($user_id) {
        // get user data
        $user_info = get_userdata($user_id);
        // create md5 code to verify later
        $code = md5(time());
        // make it into a code to send it to user via email
        $string = array('id'=>$user_id, 'code'=>$code);
        // create the activation code and activation status
        update_user_meta($user_id, 'is_activated', 0);
        update_user_meta($user_id, 'activationcode', $code);
        // create the url
        $url = get_site_url(). '/sign-in/?p=' .base64_encode( serialize($string));
        // basically we will edit here to make this nicer
        $html = 'Please click the following links <br/><br/> <a href="'.$url.'">'.$url.'</a>';
        // send an email out to user
        wc_mail($user_info->user_email, __('Please activate your account'), $html);
}
// we need this to handle all the getty hacks i made
function my_init(){
        // check whether we get the activation message
        if(isset($_GET['p'])){
                $data = unserialize(base64_decode($_GET['p']));
                $code = get_user_meta($data['id'], 'activationcode', true);
                // check whether the code given is the same as ours
                if($code == $data['code']){
                        // update the db on the activation process
                        update_user_meta($data['id'], 'is_activated', 1);
                        wc_add_notice( __( '<strong>Success:</strong> Your account has been activated! ', 'inkfool' )  );
                }else{
                        wc_add_notice( __( '<strong>Error:</strong> Activation fails, please contact our administrator. ', 'inkfool' )  );
                }
        }
        if(isset($_GET['q'])){
                wc_add_notice( __( '<strong>Error:</strong> Your account has to be activated before you can login. Please check your email.', 'inkfool' ) );
        }
        if(isset($_GET['u'])){
                my_user_register($_GET['u']);
                wc_add_notice( __( '<strong>Succes:</strong> Your activation email has been resend. Please check your email.', 'inkfool' ) );
        }
}
// hooks handler
add_action( 'init', 'my_init' );
add_filter('woocommerce_registration_redirect', 'wc_registration_redirect');
add_filter('wp_authenticate_user', 'wp_authenticate_user',10,2);
add_action('user_register', 'my_user_register',10,2);

Ok, i have tested this code with the latest Woocommerce and WordPress 4.2.2. Now, just modify this to suit your needs. It's not perfect yet but i'll leave the perfect version for you guys. Enjoy!

Facebook – permission is reserved for apps that replicate the Facebook client on platforms without a native client

If you are getting an error from Facebook when applying for extended permission such as "user_groups" and u get the following error

The user_groups permission is reserved for apps that replicate the Facebook client on platforms without a native client. You can find more information here.

chances are you are pretty f**k up by Facebook. What does this means and what the hell is this? Google it around and i couldn't find a solution to this issue but at the end i manage to ask people in the Facebook Developers group and this is what i got.

@Credit to its respective @Andreas Teufel and @Christoph Broeckmann

Christoph Broeckmann If there is a device like say a mobile phone that does not have a native Facebook client, and you want to write one that brings FB functionality to that device, then your app can get that permission. Otherwise, it can’t.
Or to put it short: “Normal” apps will not get that permission granted.

and

Andreas Teufel ...or a TV, for example.

Putting it in short, if you are getting the error "permission is reserved for apps that replicate the Facebook client on platforms without a native client", the chances of you getting your permission approve because you need it for an app or website are pretty close to never.

This pretty much means that Facebook is trying very hard to protect its data and its platform by restricting your access to their data as much as possible. In that case, i really don't see how and why people will want to create a facebook app when they are kinda restricted in everything. And did you know if you read up their platform policy you'll find pretty interesting stuff to make you stop developing your facebook app almost immediately! Here's a little snippets,

Screen Shot 2014-07-15 at 5.33.34 PM

well, as you can see, its pretty disappointing looking at how much time you spend building an app with Facebook and get slap on your face when they decides to change their policy to protect their data! Guess, it's time to move on to other platform! ha!

Iphone/Ipad number format css style change in safari

Here's something interesting yet simple to share for a long time. If you are wondering and debugging countless hours for a very simple thing such as color change on a number format in ipad or iphone, you might just arrived to the correct blog post. We all know that debugging CSS and HTML in ipad or iphone isn't an easy task although we can emulate the environment, there are certain things we cannot emulate such as the behavior of the ipad or iphone OS itself. Interestingly, a client of mine faced such issue with their website where his 'contact' number listed on his website was changed to blue instead of white as declared on the css file when view on ipad or iphone.

Now, the odd thing is that even the emulator is showing the colors correctly. Debugged for a few hours without any luck but notice that  whenever i added alphabet into the numbers, it changes back to the correct colors. I though it was some javascript but it wasn't. In the end, i disabled the whole CSS and notice something different on the emulator and the ipad. Weirdly, ipad and iphone treat numbers as a link because it can be a contact on safari. Therefore, it automatically  wrapped around a group of numbers with an anchor link on a web page.  Therefore, your CSS declaration have to write something like

.style{
color: blue
}

and added something like

.style, .style a{
color: blue
}

if you wish to cater to ipad or iphone on your website. Even if you do not have a mobile stylesheet, ipad or iphone will still behave this way. Therefore, for any group of numbers on your website, just take note of such behavior on mobile devices such as iphone or ipad.

25 Google Chrome Extension For Web Developer and Designer

Firefox is really good web development tool for both web developer and designer for many years. However, it is getting slower and utilize a lot of resources which can be as much as 2GB on my laptop which really doesn't seems to justify. The best alternative i am looking at? Chrome. (DEFINITELY NOT IE ! RAGE!) Here are 25 Google Chrome extension that every web developer and designer will definitely be interested to have.

WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

Even web developers and designers will shout "YEAH!" with this extension.

Pretty Beautiful Javascript


Automatically makes Javascript files you come across on the net look great! Combines both Beautifier (http://jsbeautifier.org/) and Prettify (http://code.google.com/p/google-code-prettify/) to unpack/unobfuscate, format, and add syntax highlighting. No need for copy/pasting or anything else it all happens on the fly for your convenience.

PHP Ninja Manual

With PHP Ninja Manual you can search easily and very quickly in PHP 5.3 documentation in 7 languages. Speed is everything we want in web development.

CoNetServ (Complex Network Services)

Extension that integrates network tools into the browser. I find it pretty useful for both network and web developer to know their server well.

jQuery API Browser

Simple extension for jQuery developers that allows quickly search through API documentation. Web developers and designers who uses jQuery surely find this valuable.

Speed Tracer


Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

Chrome Sniffer

 

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Version detecting is being implemented. One of the most interesting thing a web developer will want to know.

Edit This Cookie


Edit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

IE Tab (Windows)


It exactly emulates IE by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9). Any web developers and web designers will definitely want a Chrome plugin that can assist you will cross browser issues.

Awesome Screenshot: Capture & Annotate

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click. One of the easiest and most powerful screen capture apps on Chrome. For both web developer and designe will definitely want this on your Chrome so that you can explain to your client more clearly on what are you referring on the site. Picture speaks a thousand words.

Firebug Lite for Google Chrome


Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.

However, for web developer who is using this you might face problems as not all features are available on a lite version. Here are some of it which you might want to take note of.

  • Cannot read external resources
  • Won't work well on pages with frames
  • JavaScript debugger isn't available
  • Net Panel isn't available

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person and best of all, we will be enjoying it on Chrome!

speedtest.net

Sometimes things doesn't go well and you will start wondering whether its your internet connection issue. Test it on your Chrome straight away!

Resolution Test


Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size. Something web developers and designers won't want to miss.

Pendule


Pendule extended web developer tools for Chrome. It gives you more features for both web developer and designers could ever think of. Something similar to web developer tool above but built within Chrome developer tool.

Lorem Ipsum Generator


Both web developer and designer will appreciate this Chrome extension whenever they want to test a particular form or just throw some text into a design.

Click&Clean (Windows)


For windows user, you are in luck. Click & Clean is something you want to have on your list, especially web developers. Just think of all the clearing of cache makes me headache but that's not all this Chrome extension do.

  • Scan your PC for Malware
  • Delete your browsing history,
  • Remove download history,
  • Erase temporary files,
  • Clear cookies and Empty cache,
  • Delete client-side Web SQL Databases
  • Remove Flash Cookies (LSOs)
  • Protect your privacy by cleaning up all traces of your internet activity,
  • Clean up your hard drives and Free up more disk space, icluding secure file deletion using external applications, like CCleaner or Wise Disk Cleaner.
  • Watch flash videos offline, without being connected to the Internet!

Web Edit


Just press F12 on any http:// webpage, and edit text and delete things like photos, and embed elements. You can even delete a YouTube video off a page! Once you've had your fun, just press F2 to turn off edit mode, for a convincing looking defaced webpage. Web designers will definitely find this useful infront of your client.

Eye Dropper


Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page. bla bla bla.. i bet most web developers know more than i do.

IP Address and Domain Information


Web developers and designers often have to assist their client with domain stuff. Whois.is is probably somewhere we always visit. Before even going to google, this might just tells us more about our client before approaching them.

Session Buddy


Web developers will find this pretty handle. Session Buddy is a flexible session management extension that allows you to easily save, edit, and restore your browser sessions.

SEO SERP


A simple tool to quickly check the position of a list of sites given a keyword.
For example, on the sample image you can see Wikipedia ranking #1 and Amazon ranking #18 for the keyword "lcd".

SEO SERP Workbench


A tool to quickly check the position of multiple sites (yours and your competitors) given a keyword. Many countries are supported. Web developers like me will definitely welcome such extension on my Chrome.

HTML5 Pointers!


A HTML5 Collection resources for those of you who wish to know more about html5 and wanted to try out the power of html5.

PHP Fastest way to get image width and height

Well, i am currently updating my WordPress plugin. I faced a problem in the past to retrieve image width to determine whether a particular image is require to resize. The problem here is that checking a particular image height and width is expensive job. In order to not impact the loading time of the site using my plugin, i forfeited the capability of resizing and resize the image regardless of the size. The plugin works fine since the resizing is doing it on the fly. However, problems arise when a smaller image is being resize and this is not a desirable result. Therefore, i would like to see whether there is a solution exist that can easily solve my problem.

Getting Image size using getImageSize()

Obviously, the task here is talking about PHP, we will look at the getImageSize() functionality exist within the naive php function. I personally was using this on the plugin to determine the size of the image. However, i immediately removed this after i notice the impact this functionality has caused on my site.

The reason? Remote image will need to be downloaded into your server and then it will be read locally by php. The pitfall here is the time used to download remotely to your server. If all your image is in your server and not somewhere else like in a CDN, this might not be a problem.

Better solutions

Well, the better solutions to get image quickly is to create your own script to retrieve the first few bytes of the file since the size of the image is located there. Credit goes to James @ zifiniti.com for the script below,

<?php
   function getimagesize($image_url){
    $handle = fopen ($image_url, "rb");
    $contents = ""; 
    if ($handle) {
    do {
        $count += 1;
        $data = fread($handle, 8192);
        if (strlen($data) == 0) {
            break;
       }   
    $contents .= $data;
    } while(true);
    } else { return false; }
    fclose ($handle);

    $im = ImageCreateFromString($contents);
    if (!$im) { return false; }
    $gis[0] = ImageSX($im);
    $gis[1] = ImageSY($im);
    // array member 3 is used below to keep with current getimagesize standards
    $gis[3] = "width={$gis[0]} height={$gis[1]}";
    ImageDestroy($im);
    return $gis;                                                                                                                                                       
   }   
}
?>

Assuming you have a large image file, this can really come in handle and reduce the time needed to load a site. But, its still slow! xD