WordPress Course Catalog Plugin - Advanced - Creating and Applying Custom Templates


Creating and Applying Custom Templates

Back to User Guides

Use Child Themes Or Changes Will Be Overwritten

When you update a parent theme, the folder with template files created for the CM plugin will be deleted.

However, if you are working with a child version of that theme and update it, the files will not be deleted.

Learn more: WordPress Video Lessons Manager Plugin (CMVLM) - Creating Custom Template


Advanced Process

Editing or creating a template can be complex and requires some CSS and JavaScript knowledge.

Learn some general tips: General Support - Advanced - Creating and Editing Custom Templates


Introduction

The WordPress Course Catalog plugin supports using custom template on course pages. You can apply a template to single course pages or to all at once. 

This article will cover how to create and implement templates, step-by-step. 


Why Custom Templates?

Custom templates help you adapt the plugin pages look and feel to your site's identity. You have complete control over each element's placement and overall appearance.

TIP: Other CM Plugins With Custom Template Settings

These plugins also allow you to easily change the template from the settings

CM FAQ | WordPress Video Lessons Manager plugin | Expert Directory plugin | Product Directory plugin | Business Directory plugin | WordPress Course Catalog plugin


1) Locating The Plugin Template

First, we will locate and copy the plugin folder where the template files are located.

For this article, we are using a WordPress File Manager plugin.

1. Navigate to WordPress page directory → wp_content → plugins.

Navigation to the 'plugins' directory - WordPress Plugin for Online Courses
Navigation to the 'plugins' directory

2. Locate the folder cm-course-catalog-pro.

Locating the course catalog plugin - WordPress Plugin for Creating Online Courses
Locating the course catalog plugin

3. Head to frontend → template.

Locating the templates folder - LMS Plugin for WordPress
Locating the templates folder

4. Copy the contents of this template folder to:

wp-content/themes/<active_theme>/CMCC/<template_name_dir>.

<active_theme> is the theme you are currently using. In the example below, it's Divi.

<template_name_dir> is the name of your custom template. In the example, it's cm_new.

a) Creating the folder (if this is the first time):

Creating a new folder in the theme directory - LMS WordPress Plugin for Courses
Creating a new folder in the theme directory

b) Copying the content:

Copying the plugin template to the theme folder - WordPress Plugin for Online Courses
Copying the plugin template to the theme folder

2) Edit Template Files

Inside the template folder, you will find many files.

Editing template files - WordPress Plugin for Courses
Editing template files

It's time to edit the files. This step is heavily dependant on what you want to achieve and your experience. 

Examples

For our two examples, we will use the Sublime Text editor to edit the Course Page in the WordPress Course Catalog plugin.

The relevant file is course-page-content.phtml.

Example of the template file - E Learning WordPress Plugin
Example of the template file

Example 1: Add " - MY SCHOOL" To All Course Names

  1. Locate the h1 element. Note that it uses the [cmcc_post_title] shortcode to fetch the title.
  2. Edit its content, adding "- MY SCHOOL" after the shortcode.
Example of editing the template - WordPress LMS Addon
Example of editing the template

Result

Result of editing - WordPress LMS Plugin
Result of editing

Example 2: Gradient Background in Details Widget

  1. Locate the div.course-widget#cmcc-info. 
  2. Edit the content of the background attribute.
Another example of editing the template - WordPress Course Catalog Plugin
Another example of editing the template

Result

Result of editing - WordPress Plugin for Online Courses
Result of editing

3) After The Files Have Been Edited

a) Reupload Edited Files

Go back to your file manager and upload the edited the files to the same directory:

wp-content/themes/<active_theme>/CMCC/<template_name_dir>

Reuploading edited files - WordPress Plugin for Creating Online Courses
Reuploading edited files

b) Changing The Plugin's Settings

Head to CM Catalog Pro → Settings → Course Page tab → Course Page defaults section.

Change the "Default template" to the one you edited.

Choosing new template in plugin settings - LMS Plugin for WordPress
Choosing new template in plugin settings

Changing All Pages vs Changing One Page

Option 1) Applying Template To All Pages

You can apply the currently selected theme to all course pages.

To do so, click on the button Apply. Note that this action cannot be undone.

Applying chosen template - LMS WordPress Plugin for Courses
Applying chosen template

Option 2) Applying Template To Single Page

While editing a course, locate the Template metabox and choose the template from the dropdown menu.

Overriding the default template for a specific course - WordPress Plugin for Online Courses
Overriding the default template for a specific course

More information about the WordPress Course Catalog Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.