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();
wp_reset_postdata();

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 http://blog.advancedphotoshop.co.uk/tutorials/learn-how-to-retouch-your-product-shots-in-photoshop/. 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: https://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery. 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_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}

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

Updates!

In the few posts before this, I was building a simple eCommerce website for my friends http://www.hifridays.com. 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 WordPress.org.

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:
<script>
var var_dump = <?php echo json_encode($var1); ?>;
console.log(var_dump);
</script>

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: http://stackoverflow.com/questions/14995307/sending-var-dump-to-firebug-console

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.

<?php
  /**
  * 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(); ?>">
<?php
  /**
  * 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' );
?>
</a>

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

Using WordPress to develop an eCommerce Website

For the past few weeks, I have paused all my work on Fiverr to focus on developing an eCommerce website for my friends. I have been using WordPress (not WordPress.com) to develop the website using Ferado theme by WooRockets and WooCommerce plugin.

There are plenty of guides to get me started. One good example is Setting up WordPress locally using MAMP so that my friends will only need to buy the website domain and hosting server after the website is ready. Once I have decided the theme to use (Ferado), I want to to customize it and to do that, the best practice is to Create a Child Theme. This is especially important if the theme has periodic updates and you won’t want the changes you made to disappear after the updates.

To help my friends cut down costs, I use themes and plugins that are free. Ferado was free just for one month at Envato but as a free user it means that I won’t be able to receive updates and support.

As an over precautious person, I backup my files and database before plugins and WordPress updates. For every customization I made, I pushed a copy of the theme and plugin folders to GitHub to track changes.

Till date, a few important tools I learnt using WordPress and SiteGround hosting are the PHP programming language (the dominant programming language in WordPress), PHPmyAdmin (for managing your database) and cPanel (for managing files for your website).

Sweeter Achievement

Hardship to a Sweeter Achievement

Sweeter Achievement

I took up a two-week job in order to supplement my income from freelancing as it wasn’t sufficient to cover my expenses. I got an average of one order ($4) per week at Fiverr and so I thought I could take up additional job.  Two days ago, however, I received two orders (Admin & Excel) on the same day, to be delivered within 24 hours.

I usually research on the topic of interest prior to working on the required job so I know I’m running against time.  I did research while commuting to and from my temporary job. Then started working on the earlier order (yellow pages search) after my family dinner around 8P.M. I completed the first order around 10.30P.M. even though the buyer only bought a one hour work because I did some filtering to eliminate duplicated entries extracted from yellow pages and search for required details that wasn’t on yellow pages.

After a shower and some food, I began working on the second order (Excel for Mortgage Amortization) and completed it around 2A.M. It took longer then usual as it was an area I wasn’t very familiar with and had taken extra care to make sure I did not screw up the formulas. Initially I wasn’t sure if the pie chart that was requested is what the customer wanted but I received positive review right after I sent the Excel to the customer! I am glad I had met his expectations! I hope the customer for the first order will be satisfied too.

Even though I had to wake up at 6A.M. the next day, seeing satisfied customers make it all worthwhile. Through hardship, the achievement will be sweeter. 🙂

Tips from Customers

Tips from Fiverr

One of the happy moments of freelancing through the Fiverr platform is when you received tips from buyers when you least expected it.

Recently I received tips from two Fiverr orders and am really elated. It just motivates me to work even harder and provide even greater service to my customers.

Thank you so much to my customers and customers to-be!