Modifying Woocommerce Templates within a plugin

Woocommerce template files are located in wp-content/plugins/woocommerce/template, and can only be accessed within a theme or a child theme. However, in order to preserve the original data on the site, the solution to access the templates through a plugin must be found.

Fortunately, there is already an existing code that can do exactly that. Here is the original unmodified code copied from the article:

function myplugin_plugin_path() {
  // gets the absolute path to this plugin directory
  return untrailingslashit( plugin_dir_path( __FILE__ ) );

add_filter( 'woocommerce_locate_template', 'myplugin_woocommerce_locate_template', 10, 3 );

function myplugin_woocommerce_locate_template( $template, $template_name, $template_path ) {
  global $woocommerce;
  $_template = $template;
  if ( ! $template_path ) $template_path = $woocommerce->template_url;
  $plugin_path  = myplugin_plugin_path() . '/woocommerce/';

  // Look within passed path within the theme - this is priority
  $template = locate_template(
      $template_path . $template_name,

  // Modification: Get the template from this plugin, if it exists
  if ( ! $template && file_exists( $plugin_path . $template_name ) )
    $template = $plugin_path . $template_name;

  // Use default template
  if ( ! $template )
    $template = $_template;

	// Return what we found
  return $template;

In case you forgot what’s included in the templates or you are just learning to modify the Woocommerce templates, you can copy the entire templates directory under wp-content/plugins/woocommerce/ to the woocommerce subdirectory in your plugin folder. That way, you will know which file is related to which part of Woocommerce generated page without moving back and forth between woocommerce plugin’s folder and yours.

Is this function ever useful to you? Do you prefer to use Woocommerce templates within a custom/child theme or a plugin? Discuss in the comments section below.

Plugin vs Child Theme

Why create a WordPress Plugin instead of a Child Theme

Lately there is a debate about data portability in WordPress community. Normally I don’t care about this type of discussion on WordPress, until I had a client that uses a theme which contains too many custom post types. On top of that, their old coder modified the theme directly in the theme files without creating a child theme as well as modifying original plugin files.

At beginning of the project, I created a child theme to see if it works fine with the current theme. During that time, I don’t know what’s the fuss about data portability. Perhaps because of my ignorance about this concept, most of the theme-related data was lost in the frontend when switching to the child theme.

I warned about the data loss due to theme change to the client. However, I decided to switch back to the parent theme and stick to it for the rest of the project since the client mentioned that the previous coder already modified the original theme.

At that time while struggling to think of a way to modify the styles without modifying the original theme files despite they were already modified, I remembered the concept of data portability.

Data portability, to me, means to retain the already existing data (such as an installed theme with populated data), manipulating them and adding the new data on the site. It basically is a plugin to add a new layer to the site for adding extra features.

So my WordPress plugin development journey for the client’s website began. This actually was my first very own plugin. Before that, I never wrote a plugin from scratch, just edited someone else’s plugins.

At the beginning, I created two files besides the plugin’s main PHP file: style.css and script.js, and added them to the main PHP file using enqueue_scripts function and hook. The style.css was used to change the look of the site, and the script.js was used to modify the content on the site. I know that I can use add_filter function to modify the content. However, I didn’t know much about the add_filter hooks at that time. Later, I added some more files to the plugin based on client’s requirement.

In conclusion, here are the reasons why you should choose to write a site-specific plugin instead of a custom theme: a large amount of data already populated within the current theme and you don’t want to import duplicated data into the child theme, data created using the plugin will transfer to the new theme whenever the client decides to switch theme. However, there are sometimes that a child theme is better for the site, such as a new site or theme that doesn’t have any theme-related data yet, a simple (no custom post type and no option) theme, and a theme framework such as Genesis Framework.

What do you think? Which is better for a site-modification project, a site-specific plugin or a child theme? Discuss in the comments section below.

WordPress Plugin

Some WordPress Dev Tips

While reading this post from Tusplus, the first two tips immediately cached my eyes, which are “don’t start too big” and “study existing code”.

Start Small

The first tip, “don’t start too big”, describes best about me. When I think of some ideas, most of them are pretty big. For example, creating a gamification plugin which users can get a reward by listing their websites in front page of the blog. Because of these big ambitions, I haven’t even begun to study the basics of WordPress plugin development. I don’t know where to start and afraid of failing.

This is a great advise for me as I won’t feel scared of failing on small projects. If you are like me, I recommend to either do small unrelated projects first to learn about the basics of WordPress development, or separate one of your big projects into several smaller projects and start from the most basic or easier ones.

Study existing WordPress Plugins

When I first read about the second tip, which is “study existing code”, I thought that this never worked for me as I read the plugins from WordPress plugins repo and I didn’t understand most of them. The problem for me is that, just like the first tip, I tried to understand each single line of code. After a few tries of reading the code, I gave up because either I can’t find the specified function definition which appeared at the beginning of the code, or I’m overwhelmed by the amount of code the plugin has.

Pick one aspect of WordPress, say the login screen, and look for part of the code in the WordPress source.

This tip tells you once more to think small at a time. While using a plugin, you might find an interesting part and want to know how is done. When you are reading through the code to find the portion you are interested, it’s best to only focus on this, limit yourself not to care about other parts of code. When you are done backtracking the function(s) you would like to learn and learned how it’s done, you could begin to learn the next interesting part of the plugin you found.

The above two tips inspire me to think small instead of big. What do you think of these two tips on WordPress development?

Menu Icons

Menu Icons tip

Menu Icons is a WordPress plugin which adds icon support to the menu items on the front-end of your site. Here is a tip I found during the setup of Menu Icons.

If you recently changed the theme, the menu you set up in the previous theme will only partially transfer to the new theme. That means the current menu in the new theme maybe the same as the old theme, but the menu is placed under a temporary name.

You need to re-setup the menu in the Appearance > Menus by entering an unique menu name for the current menu and click Save Menu button. If you setup a menu icon without clicking the Save Menu button first, the submit button in the Menu Icons dialog box won’t be enabled.

By looking through the console log, it appears that there is an error related to the “replace” JavaScript method for the Menu Icons plugin if you haven’t saved the menu yet. It means that you can’t use the plugin to setup the icons for the menu items until you saved the menu.

After the menu has been saved, the plugin should work normally.

My First Static WordPress Plugin

After almost 3 hours of researches and trials, I finally finished the first one-page WordPress plugin called “identi.ca reminder”. As the name suggests, it’s used for reminding me to post an update whenever I added or updated a blog post. Since identi.ca (http://identi.ca/) also posts updates automatically to Twitter and Facebook, I only need to update the status for my identi.ca account. And because the lack of the good identi.ca-related WordPress plugins, I decided to manually update the status once a blog post is added or updated.

This was the first time I began to learn WordPress plugin. Thanks to the detailed documentation on the WordPress Codex wiki, I was able to learn and create the plugin at the same time. Here is the whole source code for my basic plugin (also includes very detailed comments):

Plugin Name: identi.ca Reminder
Plugin URI: http://wordpress.org/#
Description: This is my first plugin simply remind you to post an update on identi.ca after a blog post is published/updated
Author: Robby Chen
Version: 1
Author URI: http://blog.robbychen.com/

    // Function to output the reminder
function reminderID($messages) {
    $reminder = array();    // An empty array to store the duplication of the messages array
    $others = array();      // An empty array to store the arrays for post types other than messages['post']
    foreach ($messages['post'] as $num=>$message) {
        $message .= "<br /><br />Make sure to update your <a href='http://www.identi.ca/robbychen' target='_blank'>identi.ca</a> status.";
        if ($num == 0) {
            $message = "";  // The first element in the messages['post'] array is always empty
        array_push($reminder, $message);    // Insert/copy the modified message value to the last element of reminder array
    $reminder = array("post"=>$reminder);   // Apply the post key to the first dimension of messages array
    foreach ($messages as $type=>$message) {
        if ($type == "post") {  // Skip the post key since it is already defined
        $others[$type] = $message; // Since message is an array, this statement forms 2D array
    $reminder = array_merge($reminder, $others);    // Merge the arrays in the others array with reminder array in order to form an appropriate format for messages array
    return $reminder;
    // Print the above message when a blog post is submitted or updated
add_filter("post_updated_messages", "reminderID");

Note that when I wrote and tested this plugin, the “messages[‘post’]” array cannot be changed partially. The only way I can change the value is to copy the modified value to a new array, then make the structure of the new array the same as messages’. For instance, I tried to do the following in the code above:

$messages = array('post'=>array(), 'page'=>array(), 'custom_types'=>array(), ...);
$reminder = array('post'=>array(), 'page'=>array(), 'custom_types'=>array(), ...);

It seems that without this format, the add_filter function would not be executed. As the above example shows, it just applies to the “post” post type, although I have not tested it with custom post type yet.

You can download the source file here.

Below are the resources I used to help me for creating this plugin:

9 jQuery Plugins to Enhance Web Design Creativity

Note: Some of the links in this post no longer exists. They have been crossed out.

I just read an article (http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/) about 10 jQuery plugins that can help to increase the creativity of web design (noted that there are actually 9 jQuery Plugins instead of 10 jQuery plugins mentioned on the article title) Some of these plugins have cool animation and some have nice styles. And since these plugins are open source, you can study their source code and create your own animations and effects. Here is the list of these plugins:

  1. Coda Bubble (http://www.myjquery.co.uk/docs/x/plugins/coda_bubble/coda_bubble.php)
  2. DivCorners
  3. Facebook Style Wall Post
  4. Create an Interactive, Filterable Portfolio
  5. How to Make a Slideshow with a Transparent PNG Frame
  6. Simple Toggle with CSS & jQuery (http://www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/)
  7. Captify (http://thirdroute.com/projects/captify/)
  8. Flickr Horizontal Menu (http://www.candesprojects.com/download/flickr-horizontal-menu/)
  9. EncyPlayer – jQuery Fancybox and Flowplayer Intergration

Also noted that in the article, each link to the jQuery plugin web page seems to be directed to jqueryplugins.com, which is a jQuery plugins directory . Right now this website is currently in beta. Therefore, it doesn’t have a RSS feed to track of what are the newest jQuery plugins.

For more information about each plugin, visit the corresponding plugin homepage. Please read the original article (http://blarnee.com/wp/10-new-jquery-plugins-to-inspire/) for an overview for all of the above plugins.

Animate Objects along Paths using jQuery Path Plugin

jQuery Path plugin animates an HTML element along a specified path, much like Flash motion guide layer. The path can be a curve or a line. You can see a demo on this page and checkout its source code. According to the source code, the syntax for this plugin is integrated to the jQuery animate function:

$(“#div”).stop().animate({path: pathType}, time_in_millisecond);

One disadvantage of using this plugin that I’ve found is that there is no pre-set path type. Fortunately, the plugin documentation explains how to create bezier and arc path, as well as custom path types.

Text Gradients Trick Using CSS and a PNG image

A few weeks back I found an useful jQuery plugin called Rainbows to make text gradient. This was an useful JavaScript-based plugin. However, some people disable their browsers’ JavaScript support, make this technique useless. Another technique I discovered today that makes text gradient is by using CSS and a little PNG image. This technique has some advantages and disadvantages over the previous JavaScript technique. First, JS technique has the ability to copy text contained in the gradient where as CSS technique cannot copy the text image and image itself. Second, CSS technique uses basic CSS syntax to achieve this effect by repeat a gradient image vertically where as JavaScript technique borrows JS framework to achieve this effect.

This technique is very easy to create purely using CSS. It uses white gradient background as a background image in order to make this effect working. It’s also cross-browser compatible. The following steps shows how to apply this effect:

  1. First by adding an empty nested span tag after the text you want to make gradient, e.x. <h2>Title<span></span></h2>.
  2. Style the text anyway you want using CSS, except set the position to relative, “position:relative”.
  3. Style the background of empty span to transparent gradient png and repeat-x. That is to set the background image to white gradient background png if you use default white background color.
  4. Lastly, in order to make compatible with other browsers, apply the following CSS styles to the empty span element:
    background-image: url(none.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale");

This technique uses an easier but unusual method to achieve the text gradient effect. Once the text is applied with this effect, the produced image cannot be copied nor selected. The best place to use this effect is on the title of an article or as a logo effect.

To learn more about this technique, visit http://cssglobe.com/lab/textgradient/.