Creating plugin templates

If you want to customize your plugin instance for your template – you can face with 2 issues:

  1. After each plugin update all your changes will be removed
  2. You can’t move your template with all changes for plugin from one wordpress instance to another without your customized plugin files.

To resolve those issues we developed next solution for wordpress template developers. I will use for example template “twentytwelve”:

  1. In your template directory create folder “toe”, so it will be wp-content/twentytwelve/toe/ structure.
  2. Then for example you want to replace shopping cart page to your own customized html code. Shopping cart page template is in “user” module, template file is “shoppingCart.php”. So you need to create in your template/toe directory folder with your module name (“user” in our case) and mode your custom template file there (“shoppingCart.php” in our example). So you will have structure like this: wp-content/twentytwelve/toe/user/ shoppingCart.php
  3. Now, if active theme for worpdress is twentytwelve, on shopping cart page will be used file from your template/toe/module_name folder, not from plugin folder. You can do this for ANY template file from ANY module.
  4. You can also replace in same way css style files for plugin. Just put file with same name in your template folder/toe. All plugin style files are in plugin directory “css” folder. List of files that can be replaced:

-          style.css

-          subScreen.css

-          rating.css

-          jquery-datepicker.css

-          adminStyles.css

-          farbtastic.css

-          jquery-tabs.css (for frontend only)

-          evoslider/evoslider.css (for frontend only)

-          evoslider/default/default.css (for frontend only)

-          jquery-slider.css (for admin side only)

-          jquery-accordion.css  (for admin side only)

-          system.css

“For frontend only” mean that style file will be substituted on frontend only, on admin side will be used original file from plugin/css folder. “For admin side only” mean that you can substitute it for admin side only. This feature was developed for example to create custom jquery ui tabs styles in “jquery-tabs.css” for frontend, but in admin area, where all Ready! Options page are build on jquery ui tabs, will be used original tabs styles to avoid problems with it’s display.

Posted in Codex