Tag Archive: plugin

Exclude stylesheet in Frontend for admin in WordPress

WordPress Tips

While is_admin() function works great within the backend, using this function in frontend will always return false. For example, consider the following sample code:

if (is_admin()):
	echo "is admin";
else:
	echo "not admin";
endif;

It will display “not admin” in the frontend (such as your homepage). When in the backend (such as WordPress admin) and whether you logged in as an administrator or not, it will display “is admin”.

In order to change layout for certain elements in frontend for non-administrators, you need to use current_user_can() function:

function custom_scripts() {
	if (!current_user_can("administrator")):
		wp_enqueue_style("noAdmin_style", plugins_url("notAdmin.css", __FILE__));
	endif;
}

add_action("wp_enqueue_scripts", "custom_scripts");

Note that if you placed current_user_can() if statement outside of a function and without any hook, it will display a fatal error which is discussed in this article.

Feel free to leave a comment below regarding the use of current_user_can() function.

Modifying Woocommerce Templates within a plugin

Woocommerce

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:


<?php
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(
    array(
      $template_path . $template_name,
      $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.