Skip to main content
On this page

Course Setup Guide with custom-course Template &

The TanaFlows theme features an integrated learning management system (LMS) operating as a smooth Single Page Application (SPA). You can turn any standard post or page into a professional course viewing experience featuring:

  • Left Sidebar: Displays the course table of contents (chapters and lessons) and automatically highlights the currently active lesson.
  • Right Content Panel: Displays the video player (if it is a video lesson) or the article text and discussion comments section.

In addition to video-based courses (using YouTube, Vimeo, Bunny, etc.), the theme supports a special internal tag #textcourse specifically tailored for document-based or reading-focused courses (without videos).

1. Setting Up a Basic Course Page (Hub Page)

To begin setting up a course:

  1. Create a new Page or Post in Ghost Admin.
  2. Open page settings (gear icon in the top-right corner), locate the Template field, and select: custom-course.
  3. Publish the page. This page acts as the main Course Hub.

2. Declaring Chapters and Lessons

To draw the lesson checklist in the left sidebar, prepare your course outline in a structured code format and paste it into the editor of your Course Hub page:

  1. In the Ghost Editor of your Hub Page, click the + icon and select the HTML card.

  2. Paste the following configuration script:

    <script>
      window.lessons = [
        {
          "groupTitle": "CHAPTER 1: INTRODUCTION",
          "lessons": [
            {
              "title": "Lesson 1: Overview of Tana Second Brain",
              "videoUrl": "tana-second-brain-overview" // Enter the slug of the post/page containing Lesson 1
            },
            {
              "title": "Lesson 2: Initial Setup Guide",
              "videoUrl": "tana-initial-setup" // Enter the slug of the post/page containing Lesson 2
            }
          ]
        },
        {
          "groupTitle": "CHAPTER 2: ADVANCED TECHNIQUES",
          "lessons": [
            {
              "title": "Lesson 3: Smart Node Connections",
              "videoUrl": "smart-node-connections"
            }
          ]
        }
      ];
    </script>
  • groupTitle: The name of the chapter or module.
  • title: The display title of each lesson in the sidebar.
  • videoUrl: The exact URL slug of the Ghost post or page that holds the detailed content for that specific lesson.

3. Activating Text-Only Course Mode (#textcourse)

For courses that do not use videos (e.g., email courses, guides, handbooks, writing challenges), the default video player area will display as a large black empty block.

To convert your course to text-only mode and hide the video player:

  1. Open your course Hub Page in Ghost Admin.
  2. Go to page settings, locate the Tags field, and add the internal tag: #textcourse (must start with #).
  3. Click Update (or publish).

How the #textcourse Tag Works

  • Hides Video Players: The right content column hides the empty video frame (YouTube, Vimeo, etc.) and focuses entirely on the lesson heading and post content.
  • Updates CTA Buttons: Instead of displaying a “Start Watching” button on the course intro, it changes to “Continue Reading” to guide students to the first lesson.
  • Seamless Reading Transitions: When students switch between lessons in the sidebar, the new text content is loaded dynamically and scrolls smoothly to the top of the page instantly.

4. Important Considerations for Creating Lesson Posts

Lesson Post Setup

Individual lesson posts (defined in the window.lessons array) must be created as standard Posts or Pages in Ghost Admin.

Access Control

You can set these lesson posts to public or members-only. If a lesson is members-only, the theme will automatically prompt non-logged-in students with a portal subscription signup/login box.

Student Progress Saving

The student’s course progress (last viewed lesson) is automatically stored in their browser, allowing them to resume exactly where they left off when returning to the course.