How to Customize LifterLMS Templates

Overview

# Top

There will be times when you want to change the appearance of something in LifterLMS. For example, you might want to modify the appearance of the course cards in the course catalog page by modifying the underlying HTML and PHP code. This step is only necessary if you cannot achieve the same change using CSS alone.

One way to do this is to override the built-in template files used by the LifterLMS core plugin or by the add-ons of LifterLMS. These template files are just PHP files with HTML code that LifterLMS uses to display something on your site’s front end, as you can see below.

Sample demo of LifterLMS templates being customized.

However, directly modifying the template files as shown above is not safe. This is because your changes will be lost once you update the plugin or add-on you directly modified.

To safely override a built-in template file, you need to follow these high level steps below.

  1. Create a child theme if you do not already have one.
  2. Make sure that the child theme is the active theme.
  3. Search for the template that you need to edit.
  4. Copy the template file that you need to override.
  5. Paste the template file into appropriate folders inside your child theme.
  6. Modify the contents of the template file as much as you want.
Note that this document assumes that you are comfortable with both HTML and PHP coding. If you are not comfortable with HTML and PHP coding, you need to hire a WordPress developer from lifterlms.com/experts to assist you. Since our products are provided “as is”, we do not provide support for customizations as you can see in our support policy.

Step 1. Create a child theme if you do not already have one

# Top

Your child theme and its parent theme will be located in WordPress Dashboard > Appearance > Themes. For example, if you have a Twenty Twenty Four child theme then you should have both the Twenty Twenty Four parent theme and the Twenty Twenty Four child theme on your site, as you can see below.

Child theme and parent theme active on the site
Child theme and parent theme active on the site

If you do not yet have a child theme that you can edit, then you need to create one. One way to create a child theme is to follow the instructions in developer.wordpress.org/themes/advanced-topics/child-themes.

On the other hand, if you are not comfortable with that approach, feel free to use the Child Theme Configurator plugin from wordpress.org/plugins/child-theme-configurator.

Step 2. Make sure that the child theme is the active theme

# Top

While both the child theme and the parent theme have to be installed, only the child theme must be the active theme. If your changes in the child theme do not reflect on the site’s front-end, you might have accidentally activated the parent theme instead of the child theme.

Make sure the child theme is active.
Make sure the child theme is active.

Step 3. Search for the template that you need to edit.

# Top

There are two things you need to learn here:

  1. where to search for template files
  2. how to search for specific template files

Where to search for template files


LifterLMS template files can either be inside a plugin or inside a theme. If it is inside a plugin, then it will be somewhere inside the templates/ subdirectory of that plugin. On the other hand, if it is inside a theme, then it will be inside the lifterlms/ subdirectory of that theme.

For example, if the plugin’s folder is located in wp-content/plugins/lifterlms/ then the templates will be located at wp-content/plugins/lifterlms/templates/. The template files for all of our paid add-ons at lifterlms.com/store are also located in the templates/ subdirectory of each respective addon’s plugin folder. For example, the plugin folder for the LifterLMS Groups add-on will be located at wp-content/plugins/lifterlms-groups/. As a result, the template files will be located at wp-content/plugins/lifterlms-groups/templates/.

Finally, the LifterLMS template files for the child themes you/others create and the themes created by LifterLMS (e.g., Sky Pilot theme, LaunchPad theme) are located in the lifterlms/ subdirectory of the theme’s folder. For example, if the theme’s folder is located in wp-content/themes/sky-pilot/ then the templates will be located at wp-content/themes/sky-pilot/lifterlms/.

How to search for specific template files


Searching for exactly what file you need to edit requires some level of problem-solving skill and creativity. This is because searching for a template can be:

  1. as simple as searching for a string of characters that gets displayed as an output
  2. as complex as discovering how several filter hooks, action hooks, functions, and callback functions work together to produce an output

To help you perform the search efficiently, you can use some of the following tools below. This is not an exhaustive list, so if you find something better, let us know!

  1. The free String locator WordPress plugin along with the free File Manager plugin.
  2. Any command-line tool used for file searching (e.g., ack, grep) along with terminal-based text editors (e.g., vim).
  3. Any of the popular non-terminal-based text editors with powerful search capabilities (e.g., Sublime Text)

Which tools to use depends on how you are accessing the website.

  1. WordPress plugins can be used for string search if you have WordPress administrator access to the live website.
  2. Command-line tools can be used if you have SSH access to the live website’s files or if you have a local clone of the live website (e.g., using Local WP).
  3. Text editors (both terminal-based and non-terminal-based) can be used if you have a local clone of the website (e.g., using Local WP).
  4. Terminal-based text editors can be used if you have SSH access to the live website’s files assuming one is installed on the server you have SSH access to.

Once you have settled on the tool the text search tool to use, the general pattern of searching for specific template files is given below:

  1. Step A. Decide what to change. Visit the page where you want to make customizations. Identify the parts that you want to change. Go to Step B .
  2. Step B. Know what to search for. If the part directly contains text, you can search for that text. But if you need to discover what HTML class is used in a given element you are seeing on a page, use the browser’s developer tools to inspect the HTML code of the output you want to modify. You can then search based on that HTML class. Go to Step C.
  3. Step C. Search. Search based on what you learned in Step A. Scan the search results page and open the file that you feel is most relevant to your search. Open that file and carefully read and understand its contents. Based on the file contents, you may need to perform another search or not. Repeat Step C (if you need to do another search) or go to Step D.
  4. Step D. Make test changes to the file you found. Make a small but noticeable change in the file you found and save the changes. Then reload the page where you want to make customizations and see if the changes you made are reflected there. If the changes are reflected on the front-end and where they should be, you can stop now and proceed to Step E . Otherwise, go to either Step B . or Step C.
  5. Step E. Revert the test changes. Undo the test changes. You now know which template file to copy.

The example below shows how to do Step A to Step E when using the free String locator WordPress plugin along with the free File Manager plugin to perform your text search.

Step A. Decide what to change
Step A. Decide what to change
Step B. Know what to search for.
Step B. Know what to search for.
Step C. Search
Step C. Search
Step D. Make test changes to the file you found.
Step D. Make test changes to the file you found.
Step E. Revert the test changes.
Step E. Revert the test changes.

Step 4. Copy the template file that you need to override

# Top

Once you find the template file that you need to modify, just copy that file. The file name of that template file must remain the same whether you modify that file or not. The example below shows how you can copy that template file if you are using the File Manager plugin.

Copy the template file that you need to override

Step 5. Paste the template file into appropriate folders inside your child theme

# Top

As we mentioned in Step 3 above, the LifterLMS templates files inside a theme must be located inside the lifterlms/ subdirectory of that theme.

  1. For example,if your child theme’s folder is located in wp-content/themes/sky-pilot-child/ then the templates will be located at wp-content/themes/sky-pilot-child/lifterlms/.
  2. Similarly, if your child theme’s folder is located in wp-content/themes/twentytwentyfour-child/ then the templates will be located at wp-content/themes/twentytwentyfour-child/lifterlms/.

Moreover, the parent folders structure of the copied template file must be preserved, but without having to include the templates/ folder itself. For example, if the template file you copied is located in

wp-content/plugins/lifterlms/templates/loop/content.php

then the pasted file should be located in

wp-content/themes/twentytwentyfour/lifterlms/loop/content.php

Similarly, if you instead copied the file from the parent theme at

wp-content/themes/sky-pilot/lifterlms/loop/content.php

then the pasted file should be located in

wp-content/themes/sky-pilot-child/lifterlms/loop/content.php

The example below shows you how to paste the file you copied from Step 4 into the appropriate folders inside your child theme by using the free File Manager plugin.

Paste the file you copied into the appropriate folder

Step 6. Modify the contents of the template file as much as you want.

# Top

In this final step, you can now modify the file you just pasted to achieve your desired results. The changes you make in this file will be safe from theme and plugin updates. In the example below, we use the free File Manager plugin to make the desired changes.

Modify the contents of the template file as much as you want.

Can we change the templates directory?

# Top

As mentioned in Step 5 above, the LifterLMS template files must be located inside the lifterlms/ subdirectory of that theme. You can rename that directory into something else by using the lifterlms_theme_override_directories filter as shown below.

Last Updated on
Was this article helpful?