Templates / Skins customizing

Applicable for version 2.2.500+

Plugin template files are available in the: wp-content/plugins/wp-foto-vote/templates/*module*

Each module (skins or winners, etc) has its own directory with templates, respectively “skins”, “winners”, “leaders”, “contests_list”. Every file starts with a short documentation along with a list of variables available in this template.

Example 1 (php)

If you wish to modify one of php template files, here is the correct way to do it.

Go to your WordPress Theme (for example “twentyten”) directory, wp-content/themes/twentyten and create a wp-foto-vote directory here. Next, let’s assume we want to modify “Single Competitor View” page in “Pinterest” skin. The original template for this file is located in wp-foto-vote/templates/skins/pinterest/single_item.php.

So need to create the folder called skins/pinterest and copy there file single_item.php.

Now, as a template for “Single Competitor View” page, WP Foto Vote will use the following file: wp-content/themes/twentyten/wp-foto-vote/skins/pinterest/single_item.php

The reason for creating the new file instead of modifying the original file is that once you update WP Foto Vote you would lose all modification you made.

Example 2 (css)

If you wish to modify one of css template files you can follow 3 ways:

  • Override this CSS file (for big changes, else after update some styles for new elements can be missed)
  • Add custom CSS file where override original styles (medium changes)
  • For small changes use Custom CSS section [Photo Contest => Settings => Custom CSS (at the bottom of page)]

If you selected first way – “Override this CSS file” then follow Example 1:

Let’s assume we want to modify “Single Competitor View” page styles in “Pinterest” skin.

The original template for this file is located in wp-foto-vote/templates/skins/pinterest/public_item_tpl.css. So create folders called wp-foto-vote/skins/pinterest in a twentyten theme folder and copy there file public_item_tpl.css.

Now a CSS for “Single Competitor View” page will be loaded from wp-content/themes/twentyten/wp-foto-vote/skins/pinterest/public_item_tpl.css.

Can I copy all  Skin files and modify them in my theme folder?

Yes, but I recommend copy file that you really need customize (if there no suitable hooks/filters).

Because template files are frequently updated (new features, improvements) and you can miss new things.

Also if you copy just CSS file (public_item_tpl.css but do not copysingle_item.php) after future updates your layout can be broken because of css classes & layout changes.

How template file is searched?

For the first plugin calls WordPress function,locate_template that check is file exists in Child theme & Main WP theme and returns its path.

If nothing was found – default template has been loaded from plugin templates folder.

 

Last updated: 25 April 2017

Related Articles

Leave A Comment?