Renaming

The template name (“default”, “modern”, etc.) is used to identify the template in the file system as well as within the plugin. The name should be short and simple, and must be slug-friendly: i.e. lowercase, alphanumeric, hyphenated (if necessary).

That name is also used throughout the various template files. This allows multiple templates to be used on the same page without conflicts.

That flexibility comes at a price. To create a custom template, you have to find and replace that template name in multiple places in your copy of the template.

After each step, double-check your work before moving on.

Rename the folder

Rename the folder in your theme.

Do not use any of the existing template names:

  • bold
  • default
  • default-form
  • modern
  • simple
  • simple-form
  • small-widget
  • unstyled
  • unstyled-form

We will change the actual title and description later.

In this example, we have copied the default template and we are renaming it “custom”.

From:

wp-content/themes/{my-theme}/strong-testimonials/default

To:

wp-content/themes/{my-theme}/strong-testimonials/custom

Edit the template file

Edit the main template file (either content.php or form.php) and change the name and description at the top.

From:

/**
 * Template Name: Default
 * Description: The default template.
 */

To:

/**
 * Template Name: Custom
 * Description: A custom template.
 */

This name and description were used in earlier versions to identify the template in the view editor. Starting with version 2.30, those values are stored in config.jsoninstead. So while it’s not required to change them in the PHP file, it’s a good idea to be consistent. Or you can simply remove those lines.

Edit the config file

Edit the config.json file. Never seen JSON before? It’s just a way to store data.

Algebrax = 42
PHP$x = 42;
JSON{"x": 42}

JSON syntax is unforgiving. It must be perfect. Every text string must be wrapped in double quotes. Each setting and group must be separated by a comma. Use jsonlint.com to validate your code if necessary.

First, edit the name and description. These are used to identify the template in the view editor.

"name": "Custom",
"description": "A custom template.",

Remove template options

Some config files have a big group of settings named options that looks like this:

"options": [
    {
      "name": "image_position",
      "label": "",
      "type": "select",
      "default": "left",
      "values": [
        {
          "value": "left",
          "class_name": "",
          "description": "image on left"
        },
        {
          "value": "right",
          "class_name": "image-right",
          "description": "image on right"
        }
      ]
    },

Not all templates have options. Don’t worry if you don’t see this in your config file

Those represent the template options in the view editor.

Renaming 1

You can safely delete that whole section so that line looks like this:

"options": "",

Config examples

Display

The basic config for a display template (list or slideshow):

{
  "name": "Custom",
  "description": "A custom template.",
  "type": "display",
  "order": 1,
  "scripts": "",
  "styles": "",
  "force": "",
  "options": "",
  "format_version": "2.0"
}

To also enqueue Font Awesome (for the quote symbols in the Modern template):

{
  "name": "Custom",
  "description": "A custom template.",
  "type": "display",
  "order": 1,
  "scripts": "",
  "styles": "wpmtst-font-awesome",
  "force": "",
  "options": "",
  "format_version": "2.0"
}

That’s not necessary if your theme includes Font Awesome or you’re using a plugin like Better Font Awesome which I highly recommend.

Form

The basic config for a form template:

{
  "name": "Custom Form",
  "description": "A custom form template.",
  "type": "form",
  "order": 1,
  "scripts": "",
  "styles": "",
  "force": "",
  "options": "",
  "format_version": "2.0"
}

Edit the stylesheet

Edit the stylesheet (either content.css or form.css).

1. Template name

Change the template name at the top of the file. It’s not required but it’s a good idea to be consistent.

/**
 * Strong Testimonials custom template
 */
2. Template options

Remember those template options we saw above in the config.json file? We should remove their CSS from the stylesheet.

Delete these sections:

/* Option: Image Right
-----------------------------------------------*/
.strong-view.default.image-right .strong-content {
...
/* Option: No Quotes
-----------------------------------------------*/
.strong-view.default.no-quotes .testimonial-heading {
...
/* Option: Dark Theme
-----------------------------------------------*/
.strong-view.default.dark .testimonial {
...
3. Template class

The template folder name becomes a CSS class added to the view container. This allows multiple templates to exist on the same page without conflict.

Replace every occurrence of:

.strong-view.default

with:

.strong-view.custom

Check

Your custom template will be available in the template list in the view editor.

Renaming 2

Before you start customizing, make sure the template is working properly on the front end. It should look just like the template you copied it from.

If all went well, you are ready to start customizing.

Was this article helpful to you? Yes 1 No

Still stuck? We’re here to help.

Send us a message and we’ll get back to you as soon as we can.