Tag Archive: plugin

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.

Why create a WordPress Plugin instead of a Child Theme

Plugin vs 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.

Some WordPress Dev Tips

WordPress Plugin

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 tip

Menu Icons

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.

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