Retrieving WordPress Excerpt of a Post

I was writing a shortcode to retrieve different data for a specific post to display on a page when I come across different ways of retrieving the post excerpt, thought I would share the code snippets here.

If you want to get the default WordPress excerpt, use this:
global $post;
$your_post = get_post( 123 ); //replace 123 with your post ID
setup_postdata ( $your_post );
$scts_excerpt = get_the_excerpt();

However, if you want to use the manual excerpt that you have crafted in the Edit Post page, use this:
$your_post = get_post( 123 ); //replace 123 with your post ID
$scts_excerpt = $your_post->post_excerpt;

Retouching Photos of Products

Today I was thinking “Why do the photos of the products on other people’s website look so professional?” Since I have some basic Photoshop skills, I went googling and found this tutorial Applying the steps selectively, I got the effect I want for my product photo! Here is a glimpse of the before and after of one of the photos.

Photo Retouch

Contact Form 7 and jQuery

For my new website, I am using child theme of Customizr theme and one of the plugin I used is Contact Form 7.

What I am trying to accomplish now is show/hide various input fields based on a checkbox selection and this tutorial here gave a pretty good start: Plus I love how the author styled his/her form!

The only part I change is Step 5 on adding the jQuery scripts to the header. I used the method shown here instead inside my child theme’s functions.php. This is the final code of how I enqueue the main jQuery script and the script to show/hide Contact Form 7 fields:

/* Enqueue main jQuery script */
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://", false, null);

/* Enqueue show/hide Contact Form 7 fields script */
if ( !is_admin() ) {
get_bloginfo('stylesheet_directory') . '/js/hidefieldsScript.js',
'1.0' );


In the few posts before this, I was building a simple eCommerce website for my friends The website sells women clothing targeting the working class ladies in Singapore.

I started my own business, I wanted to shout “hurray!” but the time is not right yet. Currently, I am developing my own website using

I went to Fiverr recently wanting to find some people to do some work for me but to my horror, I realized that my account has been blocked! I went to message Fiverr support and they gave a very vague and standard reply. I wished they can be more specific as to the reason for blocking the account.

To end this off, today is exactly one year after I left my 8 to 6 office job to explore this world as a freelancer and learning about starting a business. Not much to brag but I really learnt a lot.

Debugging PHP

Debugging PHP can be a headache if you are not using any third party software/platform.

The solution I use is calling a Javascript alert box as follows:
echo 'alert("Message to display!")';

Or if you want to display a variable, do the following:
echo 'alert("'.$var1.'")';

For array, I would use this to view the array in the developer’s console:
var var_dump = <?php echo json_encode($var1); ?>;

If you know of any other way, let me know!

Edit: For those who use Firebug in Firefox browser, the answers in Stackoverflow here looks good:

Placing side by side

CSS: Placing side by side

Recently my friends (a.k.a my customers) and I decided to change the theme as the vintage theme (Ferado) wasn’t really that suitable for the image they are going with their products. Hence we switched to the free WooCommerce theme Storefront.

The problem I was working on today is trying to place the div containing “© HiFridays 2015” and the logos of the payment methods we accept on the same row like this:

Initially each of them are of full browser width and stacked on top of each other and the use of width: 50% does not help. Googling for help brought me to this guy Lalit Kumar’s webpage on this topic and it works like wonder. I never thought it would be as simple as adding the float property to their CSS which, as Lalit Kumar said, force the div to not have full 100% width.

So now my CSS for these two look like this below and viola! It works. 😉

.site-info {
float: left;
.payment-info {
float: right;

Making WooCommerce Catalog Images Clickable

I spent much time doing research on making product images in my catalog clickable and there wasn’t a clear solution on how to do this so I did some trial and testing on my own and I succeeded!

Theme: Ferado
First I copied the file from parent theme (wordpress>wp-content>themes>ferado>woocommerce>content-product.php) to my child theme (wordpress>wp-content>themes>ferado-child>woocommerce>content-product.php). Locate the following code which render the product thumbnail.

  * woocommerce_before_shop_loop_item_title hook
  * @hooked woocommerce_show_product_loop_sale_flash - 10
  * @hooked woocommerce_template_loop_product_thumbnail - 10
  do_action( 'woocommerce_before_shop_loop_item_title' );

and add the <a></a> codes highlighted in red before and after the above PHP codes.

<a href="<?php the_permalink(); ?>">
  * woocommerce_before_shop_loop_item_title hook
  * @hooked woocommerce_show_product_loop_sale_flash - 10
  * @hooked woocommerce_template_loop_product_thumbnail - 10
  do_action( 'woocommerce_before_shop_loop_item_title' );

This applies to my theme and I hope it works for yours too!