Skip to content
trexthemes
Documentation

Folio Documentation

Everything you need to install, configure, and customize the Folio Ghost theme.

View live demo

Getting Started

Thank You for Choosing Our Theme!

We’re thrilled that you’ve selected our Folio theme for your Ghost website. If you run into any challenges or have questions, don’t hesitate to reach out via our email (trexthemes@gmail.com) — we’re here to help!

Getting Started with Folio

All the theme’s features, setup instructions, and customization options are thoroughly covered in this documentation. Use the On this page menu on the right to jump straight to any section.

Theme Details

  • 🎨 Name: Folio
  • ✍️ Author: T-Rex Themes
  • 🛠️ Platform: Ghost
  • 🔄 Latest Version: 1.0.0
  • 📅 Last Updated: May 7, 2026

Requirements

Since Folio is a Ghost theme, it follows the same system requirements as Ghost. Before getting started, ensure you have:

  • ✅ A working Ghost installation
  • ✅ Basic familiarity with Ghost’s interface

🔍 New to Ghost? We recommend checking out the official Ghost Help Center for beginner-friendly guides and tutorials.

Installing Your Folio Theme

🚀 Welcome to Folio!

Follow these quick steps to install your new Ghost theme:

1. Download Your Theme

After purchase, you’ll receive a Folio.zip file containing your theme.

2. Log Into Ghost Admin

Access your dashboard at:
https://yoursite.com/ghost

3. Upload the Theme

  • Click the ⚙️ Settings icon (bottom left)
  • Select “Theme” from the menu
  • Choose “Change theme” → “Upload theme”
  • Upload the Folio.zip file

4. Activate Folio

Once uploaded, click “Activate now” to apply your new theme.

🚀 Route Setup!

For the Folio theme to function correctly, you must upload the routes.yaml file. This step is separate from the theme upload and ensures that custom collections, navigation, and dynamic pages work properly.

How to Upload the routes.yaml File

  1. Access Ghost Admin: Log in to your dashboard at https://yoursite.com/ghost/.
  2. Navigate to Labs: Go to Settings → Labs (located at https://yoursite.com/ghost/#/settings/labs).
  3. Upload the File: Under the Beta features section, click the Upload routes file button.
  4. Select the File: Locate and select the routes.yaml file found within the root directory of the Folio zip file you downloaded.

[!IMPORTANT] Labs is a testing ground for experimental Ghost features. These settings may change or require updates as Ghost evolves.

Available Features in Labs

  • Routes: Use the routes.yaml file to configure dynamic routing and custom URL structures.
  • Download: You can also download your current routes configuration directly from this menu to keep a backup before making changes.

🎉 That’s it! Folio is now ready to use.

💬 Need help? Contact our support team for assistance at trexthemes@gmail.com.

Homepage

This guide explains how to set up your homepage using the Folio theme in Ghost.

1. Profile with name and profession

  1. Go to Ghost Admin → Settings → Design & Branding → Theme.
  2. Upload your Profile Image and Second Profile Image.
  3. And add your Full Name and Professional title
  1. Go to Ghost Admin → Settings → Social accounts.
  2. Add your links:
    • Facebook: Paste full profile URL (e.g., https://facebook.com/yourpage)
    • X (Twitter): Enter handle or full profile URL (e.g., https://twitter.com/yourhandle)

Other Social Networks

  1. Navigate to Settings → Design & Branding → Theme.
  2. Add your Instagram and Pinterest and the other profile links.

3. Hero section:

  1. For H1 text, Go to Settings → Design & Branding → Theme → Bio headline.
  2. For Description bellow the title text, Go to Settings → Design & Branding → Theme → Bio Description.
  3. For Button Get In Touch , Go to Settings → Design & Branding → Theme → Contact Email. For the text it can be edited via Translation file.

4 and 5. Location and timezone:

  1. Go to Ghost Admin → Settings → Design & Branding → Theme.
  2. Add your location in “Location Field and Timezone in “Timezone Field”.
  3. In Available for work selection Choose your current situation, If your are open to work then the theme display Open to new opportunities, if not Welcome to my portfolio is displayed instead. you change both of the text via translation file.

By default, this section displays 6 Featured Projects. Follow the steps below to configure and customize this section.

1. Set Up the Section Header

Create a new Page to serve as the “anchor” for this section:

  • Slug: Set the slug to projects.
  • Title: The title you enter here will be the section’s main headline.
  • Excerpt: The text provided in the excerpt field will serve as the section’s description.
2. Create and Tag Your Projects

Each project is created as an individual Post. To ensure they appear in the portfolio:

  • Internal Tag: Add the internal tag #project in the post settings (the # ensures it is hidden from your public tag list).
  • Template Selection: In the right-hand settings panel, change the Template dropdown to Portfolio.
3. Adjust the Number of Displayed Projects

If you wish to show more or fewer than the default 6 projects:

  1. Go to Ghost Admin → Settings → Design & Branding.
  2. Click on Customize and select the Theme tab.
  3. Locate the field labeled “Number of projects in homepage”.
  4. Enter your desired number and click Save.

8. Adding Recommendations:

The Recommendations feature allows you to cross-promote other publications and build a network with fellow creators.

To begin recommending other sites to your audience:

  • Access Settings: Navigate to Settings → Growth → Recommendations in your Ghost dashboard.
  • Add Site: Click Add recommendation and enter the URL of the publication you wish to suggest.
  • Personalize: You can customize the Title and Description for each specific recommendation to explain why you like it.
  • The main heading for the recommendations section can be edited and localized through your theme’s translation files.

9. Bio Section:

To set up the “About” section on your homepage, create a new Page and configure it with the following details:

  • Internal Tag: Add the internal tag #about-home in the page settings panel to identify it as the source for this section.
  • Headline/Quote: The text you enter into the Excerpt field will serve as the section’s main title or quote.
  • Section Image: The Featured Image assigned to the page will be displayed as the primary visual for this section.
  • Main Content: All text written in the Body of the page will appear as the descriptive content for the section.

10. Testominals Section:

To set up the Testimonials section on your homepage, follow these steps to create the main container and individual reviews:

1. Initialize the Section

Create a new Page with the following settings:

  • Internal Tag: Add the tag #testimonials in the page settings panel.
  • Headline: The Title of the page will serve as the section’s main headline.
  • Description: The text provided in the Excerpt field will be used as the section description.
2. Add Individual Reviews

To add reviews, use the Product Card feature within the body of this page. For each card, map the information as follows:

  • Reviewer Image: Upload the person’s photo into the Product Image slot.
  • Reviewer Name & Profession: In the Product Name field, use the format Name*Profession (e.g., John DoeSoftware Engineer*).
  • Comment: Enter the reviewer’s feedback into the Product Description field.

11 and 12 Blog Section:

1. Set Up the Section Header

Create a new Page to serve as the “anchor” for this section:

  • Slug: Set the slug to blog.
  • Title: The title you enter here will be the section’s main headline.
  • Excerpt: The text provided in the excerpt field will serve as the section’s description.
2. Create Blog Posts

Create a normal individual Post.

To modify the text appearing in the footer:

  • Navigation: Go to Settings → Design & Branding.
  • Field: Click on Customize, open the Theme section, and locate the Footer text field.
  • Save: Enter your desired copyright notice and save your changes.
2. Configure the “Get In Touch” Button

The contact button on your site is linked to your email address:

  • Email Destination: Go to Settings → Design & Branding → Theme and update the Contact Email field.
  • Button Text: To change the “Get In Touch” label, you must edit the value within your theme’s Translation (locales) file.
3. Localization & Other Text
  • General Text: Most other labels in footer are managed via the translation files

14. Other Setting

Primary Color:
  1. Go to Ghost Admin → Settings → Design & Branding → Brand.
  2. Find the “Accent Color” field and choose your color
  3. For dark mode color:
    • Go to Settings → Design & Branding → Theme.
    • Find the “Accent Color for Dark mode” field and choose your color

The Folio theme provides flexible navigation options.

📌 Primary Navigation

(Displayed at the top of your site)

  1. Go to Ghost Admin → Settings → Navigation.
  2. Click Customize next to Primary Navigation.
  3. Add/Edit Menu Items:
    • Drag to reorder links.
    • Click + to add new items.
    • Click the trash icon to remove items.
    • Click Save to apply changes.
➕ Secondary Navigation

(Optional menu for extra links or CTAs)

  1. In the same Navigation settings, click Customize next to Secondary Navigation.
  2. Build your menu following the same steps as above.

Project and Blog Collections

To correctly organize your content into distinct Project and Blog pages, follow the setup instructions for each collection:

Project Collection

To display a dedicated page featuring a list of recent projects with a “Load More” button:

  • Create a Container Page: Create a new page and set the slug to projects.
  • Define Project Posts: For every project entry, create a Post and add the internal tag #project.
  • Apply Layout: Select the Portfolio template from the right-hand settings panel.

Blog Collection

To display a dedicated page for your standard articles with a “Load More” button:

  • Create a Container Page: Create a new page and set the slug to blog.
  • Define Blog Posts: For standard blog entries, create a Post as usual.
  • Configuration: Ensure these posts do not have the #project tag and do not have a specific template selected.

Typography with the Folio Theme

The Folio theme gives you full control over the fonts used across your site. You can select from theme fonts, Ghost fonts, or system fonts, based on your preference for style and site performance.

How to Configure Typography

1. Log in to Ghost Admin

Go to:
https://yoursite.com/ghost

2. Access Design Settings

Navigate to:
Settings > Site > Design & branding
or visit:
https://yoursite.com/ghost/#/settings/design
Click the Customize button to open the theme editor.

3. Open Theme Typography Settings

Find the Typography option under the Site wide section.

4. Choose Your Font Option

  • Theme (default): Uses fonts provided by the Folio theme, we are using Google Fonts for optimal load speed and consistent appearance.
  • Ghost: Enables fonts set in Settings > Site > Design & branding > Brand > Typography. When selected, the theme’s default fonts are disabled to prevent redundant loading.

Translation

The Folio theme fully integrates with Ghost’s native translation system, allowing you to easily localize your website for a global audience. It uses simple JSON files stored in the locales/ folder to manage all text strings, making it straightforward to edit existing translations or add new languages.

How to Customize or Add Translations

1. Download and Unzip the Theme

Extract the theme .zip file on your computer.

2. Locate the Translation Files

Open the locales/ folder inside the theme directory. Here you’ll find JSON files named by language code, such as en.json or fr.json.

3. Edit an Existing Translation

Open the JSON file in a code editor (e.g., Visual Studio Code or Sublime Text) and modify the key-value pairs to your desired translations.

Example snippet from a translation file:

{
  "Subscribe": "Inscreva-se",
  "Read More": "Leia Mais"
}

4. Add a New Language (Optional)

  • Duplicate an existing language file, e.g., en.json.
  • Rename the copy with your desired language code, such as fr.json for German.
  • Translate all the key-value pairs inside the file to your target language.

5. Repackage the Theme

Compress the entire theme folder—including your updated locales/ directory—back into a .zip archive.

6. Upload the Updated Theme

  • Log in to your Ghost Admin panel.
  • Navigate to:
    Settings > Site > Theme > Change theme > Upload Theme
  • Upload the newly created .zip file containing your modified theme.

7. Set the Site Language

  • Go to:
    Settings > General > Publication Language
  • Enter the appropriate language code (e.g., es for Spanish, fr for Arabic).

Important Folios

  • Always use a code editor that supports UTF-8 encoding and proper JSON syntax to prevent file corruption.
  • Avoid basic text editors like Foliopad or word processors such as Word, as they may insert hidden characters or break formatting.

Additional Resources

For comprehensive details on Ghost’s translation and localization features, see the official Ghost Localization Guide.

← Back to all documentation