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;

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');
}

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).