Buy Theme

How to modify shortcode template?

Silicon mostly built with shortcodes. Shortcode is a small and self-contained element that can be placed anywhere in the content section of the page. A small blocks from which you can build a stylish and unique site. But it is impossible to cover all the requirements under the theme. That’s why if you need even more uniqueness (or, for example, fix a small issue) you can modify the templates on your own.

Silicon contains of two types of shortcodes:

  • Our brand shortcodes, developed for Silicon
  • Shortcodes, which comes with Visual Composer

Modifying Visual Composer’s shortcodes

The Visual Composer works by using template files for the output of all it’s shortcodes which can be overwritten via themes. So you’ll need to place the original file in your child theme.

  1. Create new folder /vc_templates in your child theme
  2. Locate the template inside the Visual Composer plugin at /js_composer/includes/templates/shortcodes/
  3. Copy and paste template in the /vc_templates folder of your child theme
  4. Modify the template.

Note, Silicon already modified some templates to fix some design issues and to add some extra options that weren’t present. All modifications are in Silicon Core plugin. You can check modified templates in /silicon-core/vendor/vc/vc_templates/.

Note, deactivating a Silicon Core plugin will restore a default Visual Composer. So, if you need a clean Visual Composer without our modification, so just deactivate a Silicon Core.

Modifying brand shortcodes

All Silicon’s shortcodes are located in the Silicon Core plugin. When shortcode displayed on the front-end this will trigger the shortcode’s template loader. It detects the shortcodes name and searches the template in the following directories:

  • /silicon-child/shortcodes/
  • /silicon/shortcodes/
  • /silicon-core/shortcodes/

First found template will be loaded. That’s why if you need to modify a shortcode template you can do the following:

  1. Create new folder /shortcodes in your child theme.
  2. Locate the template in Silicon Core plugin at /silicon-core/shortcodes/
  3. Copy and place this template in /shortcodes folder of your child theme
  4. Modify the template!

Now template loader will use overwritten template.

Also you can add your own locations to the template loader. For example, you don’t like using child theme’s for one reason or another or you want to tweak a theme via a plugin you can use the filter:

/**
 * Add custom locations to shortcode template loader
 *
 * @param array $locations
 *
 * @return array
 */
function silicon_child_custom_shortcodes_location( $locations ) {
   // add to the beginning of a list
   array_unshift( $locations, '/my/custom/location' );

   // add to the end of a list
   $locations[] = '/my/custom/location';

   return $locations;
}

add_filter( 'silicon_shortcode_template_dirs', 'silicon_child_custom_shortcodes_location' );

Categories