Find out who is using my Wordpress theme

Share |

Recently I needed to find out how other websites were also using my Wordpress theme of choice. I did not seem to find many tools out there to accomplish this. So i developed one here. This is still in prototype.

Add check out time validation in WooCommerce - for delivery or otherwise

Share |

Adding a shipping delivery time check to WooCommerce Plugin - Server side validation

Suppose an online store wants to restrict delivery timings of its online goods. not just in terms of the days that delivery is available, but down to the timings. For example, if catering company ABC only delivers from 8am to 5pm on weekdays, and 4pm to 10pm on weekends.

The extension I happily bought seemed to have many good features. till I realized that it did not have a time slot option. It was disappointing at first, but I thought what the heck, I will hack it myself. So my journey begins.

The date picker extension uses a typical date time picker from jQuery in the front end. So I thought, since its a hack, lets modify this.

jQuery date picker, with Mondays disabled.

Looking in the javascript files, I found just the code that validates this date picker. I realized I would need to add logic to validate the time chosen according to the day of the week, followed by updates to the UI. After spending quite some time (longer than I expected) toying with the script, I managed to do something like this in pseudo code:

if (its a weekday & user selected delivery time between 8am-5pm)
    accept input, otherwise throw validation error and disable the Done button.
else if (its a weekend & user selected delivery time between 4pm to 10pm)
    accept input, otherwise also throw validation error and disable the Done button.

Then I updated the UI to display the validation as a red error text, and disabled the "Done" button.

I then thought all was good, but well the UI came back to haunt me with issues. For example, the date picker does not work in certain browsers that don't support it for whatever reason, and the user can still enter the wrong time manually into the text field.

In the end, its back to server side validation that saves the day.

jQuery date picker, with validation message and disabled "Done" button

To do server side validation:

 

Create a WooCommerce child theme before editing. I would not elaborate here on how as its implementation is easily available online.

1.  Add a new method to the functions.php file in your WooCommerce template folder. This will validate the delivery time text field, and display the error messages nicely at the top when the user clicks Pay.

//add action hook
   add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

//new method
   function my_custom_checkout_field_process() {
       global $woocommerce;
        
      $delvTime = $_POST['delivery_time'];   //store user input to variable
  
      $day = date('w', strtotime($delvTime));  //split and store into more variables
      $hour = date('H', strtotime($delvTime));
      $min = date('i', strtotime($delvTime));
     
      //logic for allowed delivery time starts here  
      //if weekday
      if($day>=1 && $day <=5) {
        if(timing is correct)
            return;      
        else
            $woocommerce->add_error( __("Sorry, our weekday delivery hours are between 8am to 5pm only.") );     
      }

      //if weekend    
      if($day==6 || $day==0) {
         if(timing is correct)
            return;
         else
            $woocommerce->add_error( __("Sorry, our weekend delivery hours are between 4pm to 10pm only. ") );
      }
   
}

2. Now we want to make the user experience even better by providing users with also a nice display image of a clock with highlighted delivery timings for easy reference (this i created in photoshop), in addition to the traditional plain text instructions. The image below is just an example.

Find the extension's template file to add the image to the code (delivery-time.php if you use my chosen extension).

Tip: you can try looking for the method that displays the timing text field.

Wall clock display with highlighted delivery timings

3. Now this would not be complete if the chosen delivery timings did not appear in the emails sent would it?

Therefore we edit the email template that is sent to the store admin, and also the one sent to the buyer, for everyone's easy reference. Look in the WooCommerce templates->email folder.

Edit admin-new-order.php and customer-processing-order.php to add our new delivery times. We have php tags here because there is a mixture of html.

//if there is user input, save it
<?php if ( $delivery_time = get_post_meta( $order->id, '_delivery_time', true ) ) : ?>
    <?php
    $option = get_option( 'wdt' );
    $label = isset( $option['label'] ) ? $option['label'] : __( 'Delivery Time', 'woocommerce' );
    ?>
//display the time chosen
    <p><strong><?php echo "Delivery Time"; ?></strong> <?php echo gmdate("F j, Y, g:i a", $delivery_time);?></p>
<?php endif; ?>

You can add the same code to both files, in the line according to where you would like the time to appear in the email.

4. If everything works without compilation errors, presto we are done in just a few steps. Of course, test it out to make sure.

What was used in this post:

• WooCommerce Plugin
• WooCommerce Delivery Time Picker for Shipping
• Adobe Photoshop

Display text blurry or fuzzy in Windows 7

Share |

Windows 7 display is not sharp, especially when reading text

One particular day when I upgraded to a new laptop installed with windows 7 and a new external monitor, I was surprised to find that the screen seemed blurry or basically not sharp,  unlike my trusted windows xp in the past (almost like a soft filter from photoshop was permanently applied). It was giving me an eye-strain at the end of every work day, pretty painful to me compared to my previous laptop.

I picked out 3 possibilities as the cause. Either the screen was at fault, the OS was at fault, or the graphics card was the cause.

Things I tried... Used a hdmi cable instead of vga. Nope.
Tried calibrating my external monitors and even trying another. Nope.
This left the OS and graphics card in question.

Switching the graphics card was a troublesome affair compared to the former, so I digged into the OS settings. In windows 7 Control panel-> Display properties, what I found was a little new feature that was previously unknown to me.

This new animal called "ClearType" claimed to make text sharper and clearer.
Using the tuner however did not really satisfy me.
In the end, I resorted to switching this "new" feature off totally.

Now my text is "sharp" like in windows xp, just the way I like it.
Maybe it is not as smooth, but I rather it stay comfortable for my eyes rather than keeping it pretty.

The harmless looking ClearType feature

Change font size of iframe content with Javascript dynamically (No jquery)

Share |

You want to allow your site visitors to change the font size of your site. You know there are examples aplenty online so it would be done in a jiffy. But alas, there are iframes on your site, and this stubborn content refuses to change no matter how hard you try.

"Give me something that just works!" screams in your mind.

Allow users to change font size

If you just want to know how you can access iframe content through javascript, see below. Many solutions employ the jquery library, but not for our case.

function changeIframeFontSize(size) {

var x=document.getElementsByName("iframeName"); //point 1
var y=(x.contentWindow || x.contentDocument);            //point 2
 
var styleElements=['table','p']; //point 3
var j; var i;                                                                    // the loop index
               
   for (j=0; styleElements[j]; j++) {
if (y.document)                                                                    //point 4
x=y.document.getElementsByTagName(styleElements[j]);       
for(i=0; x[i]; i++)
x[i].style.fontSize=size;                                                  //point 5
}
}

Point 1: getElementsByName gets you the reference to your iframe with attribute name of "iframeName".
Eg. <iframe src="/default.asp" name="iframeName"> </iframe>

Point 2: does the magic of actually allowing you to access the DOM elements of your iframe contents.

Point 3: we create this array here, because we want only selected elements in our iframe content affected. So we populate it with the relevant tags that we want.

Point 4: the for loop basically loops through the all the html tags found with getElementsByTagName (variable x is reused solely for convenience sake), and finally...

Point 5: sets the font size dynamically for each and every element.

You can use the above example to build on the work done here, setting them in the resize and reset methods: http://www.dyn-web.com/code/fontsizer/documentation.php#examples

I will post my implementation if there are requests.

Note: This only works if the iframe content belongs on the same domain, eg not from another external site.

Display Facebook events feed on website

Share |

Display Facebook events feed on website - From events created from profile, not the Fan Page

Many wordpress plugins at this point in writing did not seem to offer a solution to me. What I am trying to do here is to simply pull out a Facebook event feed and display them on my wordpress page. Meaning event feeds from Facebook with URL format http://facebook.com/events/123456789123456/ for example.

Many implementations out there work for events created from page events instead, those of URL format https://www.facebook.com/pages/Page-Name/123456789123456?sk=events
(A another version on my issue here: http://www.codeproject.com/Questions/348664/Trouble-with-embedding-facebook-events-on-wordpres)

I tried wordpress plugins like facebook-feed-grabber.0.6.zip and jsl3-facebook-wall-feed.1.3.1.zip but they did not do what I needed simply, which is NOT get feeds from Fan Page events.

My PHP implementation here:
1. Have a Facebook app ready for this (https://developers.facebook.com/apps)
2. Get a copy of the Facebook php sdk and put it in your desired folder (https://github.com/facebook/facebook-php-sdk)
3. Create a php file with these few lines below which will allow you to get the feed from your Facebook public event:

<?php 
require 'fb-sdk/src/facebook.php';
$facebook = new Facebook(array(
    'appId'  => 'REPLACE-WITH-FACEBOOK-APP-ID',
    'secret' => 'REPLACE-WITH-FACEBOOK-APP-SECRET',
));
$pageFeed = $facebook->api('REPLACE-WITH-FACEBOOK-EVENT-ID' . '/feed');
?>


(FACEBOOK-EVENT-ID will be 123 if your event url is http://facebook.com/events/123/ )

4. The $pageFeed is an array containing all your event feed details. You can then for example get your first event name with $pageFeed[data][0][name].

5. You can then manipulate this array as you wish and decorate it with some nice CSS styling

6. Finally, if you are using wordpress, you can use the iframe html tag to include this new php file into your wordpress page.

Captured details from Facebook public event

Images not showing in WP-carousel

Share |

Images Are NOT displaying in WP-carousel with Customized Content


I was looking for a simple but elegant image slider in wordpress, and WP-carousel seemed just the right fit for my needs. Simple, elegant, but customizable. I installed and activated this plugin with good hope, but alas I just could not get any image to display in my slider with the Customized Content Item. Whats happening here? Desperately searching in the settings yielded no result.

Adding Customized Content feature - SHOW IMAGES!

Its frustrating when you can't get what seems to be a great plugin to work, and just as frustrating when you finally find out the 'great' solution. As in the image above, when adding images, make the Video URL field BLANK (Can't over-emphasize it).

Leaving the default "http://" is a big no-no. Then will the images show up in the slider... oops...

Small issue, but quite an irritation to the first time user I should say. I definitely vote for this to be changed in their next release. WP-carousel do you hear me?

Found on: WP-carousel 1.1

Repair Mac OS X without installation DVD

Share |

Disk Utility - Repair Mac OS X without CD Drive / DVD

Because I frequently dual boot between Windows XP and my Mac OS, there comes a time when my Mac OS gets corrupted as well (there's no hard proof that dual boot causes this, but I would like to believe so since I have cross OS read/write operations on both).

Very well, start Disk Utility and uh oh, "repair" disk option is not available. I restart, and worse, the Mac OS startup screen just gets stuck at the circle animated wheel forever. Ok, I don't panic, went to do some searching on another pc, and tried starting Mac OS X with the "shift" keyboard button pressed down (this is said to run the "repair" disk option). Still no luck.

I CAN'T find my Mac OS installer DVDs.... I cannot run Disk Utility off it no matter how much it wants me so.

Mac OS had it all along. We just need to get into some command line stuff, and you thought Mac OS did not have this unglamorous side.

1. Restart your Mac and get into Single user mode by holding down Apple key+S all the way through the boot-up till you see the ugly black screen with text
2. After everything finishes loading, type in fsck -yf    (fsck stands for file system check). Remember to press enter after typing that of course.
3. Allow it to run and hopefully, you finally get to see the "Disk X appears to be OK." message.
4. Lastly, type "Reboot" to restart back into Mac OS X