Course Catalog - Advanced - Creating and Applying Custom Templates
Creating and Applying Custom Templates
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: CM Video Lessons Manager (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
Course Catalog 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 | CM Video Lessons Manager | CM Expert Directory | CM Product Directory | CM Business Directory | CM Course Catalog
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.
- Navigate
to WordPress page directory → wp_content → plugins.
- Locate the folder
cm-course-catalog-pro
- Head to
frontend → template
- 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)
b) Copying the content
b) Copying the content
2) Edit Template Files
Inside the template folder, you will find many 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 CM Course Catalog.
The relevant file is course-page-content.phtml.
Example 1: Add " - MY SCHOOL" To All Course Names
- Locate the h1 element. Note that it uses the [cmcc_post_title] shortcode to fetch the title.
- Edit its content, adding "- MY SCHOOL" after the shortcode.
Result
Example 2: Gradient Background in Details Widget
- Locate the div.course-widget#cmcc-info.
- Edit the content of the background attribute.
Result
With
background: linear-gradient(90deg, rgba(0,119,182,1) 0%, rgba(255,255,255,0.5802696078431373) 92%, rgba(0,212,255,0) 100%);
Result
With
background: linear-gradient(90deg, rgba(0,119,182,1) 0%, rgba(255,255,255,0.5802696078431373) 92%, rgba(0,212,255,0) 100%);
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>
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.
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.
Option 2) Applying Template To Single Page
While editing a course, locate the Template metabox and choose the template from the dropdown menu.
 |
More information about the CM Expert Directory WordPress 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 |