🔥 Limited-time offer: Get the full bundle for $349$299 forever. Code BUNDLE50 — ends soon.

Ida Docs

This documentation guides installing, customizing, and leveraging the Ida theme for your Ghost site.

Welcome to the Ida theme documentation. This guide will help you set up, customize, and make the most of your new Ghost theme.

For general questions about Ghost, visit the Ghost Help Center.


Introduction

Ida is a clean, editorial Ghost theme designed for minimal portfolios, profiles, and blogs. It offers flexible content management through Ghost's page and tag system, allowing you to create a dynamic homepage with multiple configurable sections.

What you can do with Ida

  • Create a stunning editorial homepage with multiple layout options
  • Display featured posts, tag-based sections, and custom content
  • Choose from 7 different post layouts for your articles
  • Set up YouTube video and podcast sections
  • Display testimonials, author showcases, and logo marquees
  • Configure light/dark mode with 8 preset color schemes

Getting started

Quick start checklist

Here's what you need to do to get your site up and running:

  1. Install and activate the Ida theme
  2. Set up your site branding (logo, accent color)
  3. Configure appearance settings (colors, light/dark mode)
  4. Create your homepage sections
  5. Customize your navigation

Install theme

Upload zip file

To begin, unzip the downloaded package by double-clicking it on a Mac or by right-clicking and selecting "Extract All" on Windows.

Inside the new Ida folder, you will find the ida.zip theme file.

Step-by-step to upload the theme to your website
  1. Log in to your Ghost website admin (example.com/ghost).
  2. Click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
  3. Go to Design & branding > Customize > Change theme.
  4. Click Upload theme and select the ida.zip theme file.
  5. Once uploaded, click Activate now to activate the theme.

[TK image: theme upload screen]

[!note] This theme does not require a routes.yaml file. All homepage sections are managed through Ghost pages and tags.

General settings

Colors and appearance

Ida offers extensive color customization through Ghost's design settings.

Accent color

The accent color is used throughout your site for buttons, links, and highlights.

Step-by-step to set accent color
  1. Go to Settings > Design & branding > Brand.
  2. Click on Accent color.
  3. Choose your preferred color using the color picker or enter a hex code.
  4. Click Save.

Color combinations

Ida includes 8 preset color combinations that adjust your site's overall color scheme.

Combination Description
Default Balanced, neutral tones
Pure Clean black and white
Onyx Dark, sophisticated palette
Rust Warm, earthy tones
Fossil Muted, natural colors
Mint Fresh, cool greens
Ember Warm orange accents
Ice Cool blue tones
Step-by-step to change color combination
  1. Go to Settings > Design & branding > Customize.
  2. Find Color combinations in the theme settings.
  3. Select your preferred combination from the dropdown.
  4. Click Save.

[TK image: color combination settings]

Light and dark mode

Control how your site handles light and dark appearances.

Option Description
Light Always use light mode
Dark Always use dark mode
System Match visitor's device preference
User Let visitors choose their preference
Step-by-step to set appearance mode
  1. Go to Settings > Design & branding > Customize.
  2. Find Appearance in the theme settings.
  3. Select your preferred option.
  4. Click Save.
[!note] When set to "User", visitors can toggle between modes using the theme switcher in your site's navigation.

Upload a secondary logo for use on dark backgrounds, such as hero sections with background images or the footer.

  1. Go to Settings > Design & branding > Customize.
  2. Find Alternate logo in the theme settings.
  3. Click Upload and select your light-colored logo image.
  4. Click Save.

Add your social media profiles to display icons in your site's header and footer.

  1. Go to Settings > Design & branding > Customize.
  2. Find Social links in the theme settings.
  3. Enter your profile URLs separated by commas.
  4. Click Save.

Example:

https://x.com/yourhandle, https://instagram.com/yourhandle, https://youtube.com/@yourchannel

The theme automatically detects the platform and displays the appropriate icon.

Header navigation

The primary navigation appears in your site's header.

Step-by-step to add an item to header navigation
  1. Go to Settings > Navigation > Primary Navigation.
  2. Type the page's name in the label field as you'd like it to appear on your menu.
  3. Click on the item's URL. The blog URL will already be auto-populated.
  4. When satisfied with your page configurations, click the Save button.

You can create dropdown sub-menus in your Ghost site navigation to organize your content more effectively and improve site navigation.

Add dropdown menu
  1. In your Ghost Admin panel, go to Settings → Navigation.
  2. Add your main menu items normally.
  3. To create submenu items, add them with a dash (-) prefix before the child item.
  4. Arrange items in the order you want them to appear.

Example settings:

Home          /
About         /about
- Team        /team
- Contact     /contact
Blog          /blog

Header profile displays Publication logo from Settings → Design & branding → Brand → Publication logo. If no logo is uploaded, the site title will display instead.

Like the header, you can add the footer navigation links from the Ghost Admin Settings > Navigation > Secondary.

To group footer items into different groups, add # before the name.

Footer navigation groups

Example configuration:

#Company
About Us      /about
Careers       /careers
#Legal
Privacy       /privacy
Terms         /terms

Homepage

The Ida homepage is a dynamic, editorial layout with multiple configurable sections. Sections are created using Ghost pages with special internal tags, giving you complete control over what appears on your homepage.

Hero section

The hero section displays your featured posts in an eye-catching layout at the top of your homepage.

[TK image: hero section example]

Layout options

Ida offers two hero layouts:

Layout 1 (default)

  • Row 1: One large center post with two side posts
  • Row 2: Four text-only posts

Layout 2

  • Left column: Two posts (one with image, one text-only)
  • Center: Primary featured post with large accent title
  • Right column: Two posts (one with image, one text-only)
Step-by-step to change hero layout
  1. Go to Settings > Design & branding > Customize.
  2. Find Homepage hero layout in the theme settings.
  3. Select Layout 1 or Layout 2.
  4. Click Save.

Posts appear in the hero section when marked as "Featured" in Ghost.

Step-by-step to feature a post
  1. Open the post you want to feature.
  2. Click the settings icon ( ⚙️ ) in the top right.
  3. Toggle Feature this post to on.
  4. Update the post.

Latest stories section

This section automatically displays your 4 most recent posts in a grid layout below the hero. It shows post images, authors, and tags.

[!note] This section appears automatically and doesn't require configuration.

Dual feature section

Display two featured posts from a specific tag in a prominent layout.

[TK image: dual feature section]

Step-by-step to add dual feature section
  1. Go to Settings > Design & branding > Customize.
  2. Find Featured tags in the homepage settings.
  3. Enter the tag slug for the posts you want to feature.
  4. Click Save.

Example: Enter photography to display posts tagged with "Photography".

Primary tag sections

Create prominent sections for your main content categories. Each section displays:

  • A hero row with the first featured post (text left, large image right)
  • A secondary row with 4 additional text-only posts
Step-by-step to add primary tag sections
  1. Go to Settings > Design & branding > Customize.
  2. Find Primary tags in the homepage settings.
  3. Enter tag slugs separated by commas.
  4. Click Save.

Example: news, technology, culture creates three primary sections.

Secondary tag sections

Create additional content sections with a mixed layout:

  • Row 1: Three posts with images (varying aspect ratios)
  • Row 2: Four text-only posts
Step-by-step to add secondary tag sections
  1. Go to Settings > Design & branding > Customize.
  2. Find Secondary tags in the homepage settings.
  3. Enter tag slugs separated by commas.
  4. Click Save.

Custom homepage sections

Create unique sections on your homepage using Ghost pages with special internal tags. Sections are displayed in the order of their publish dates (oldest first).

How custom sections work

  1. Create a Ghost page (not a post)
  2. Add the appropriate #section-* tag
  3. Optionally add a positioning tag
  4. Publish the page

The page title becomes the section heading, and the content varies based on the section type.

Display a horizontal scrolling marquee of logos—perfect for showcasing clients, partners, or brands.

[TK image: logo carousel section]

  1. In Ghost admin, go to Pages and create a new page.
  2. Give it a title (this becomes the section heading).
  3. In the page content, add a Gallery card with your logo images.
  4. Add #section-logos to the Tags field.
  5. Publish the page.
[!note] For best results, use logo images with transparent backgrounds and consistent heights.

Static text section

Display custom text or HTML content in a highlighted section.

[TK image: static text section]

Step-by-step to add static text section
  1. Create a new page.
  2. Add your title.
  3. Add your content using Ghost's editor (text, images, HTML cards, etc.).
  4. Add #section-static-text to the Tags field.
  5. Publish the page.

Testimonials section

Display a grid of quotes or testimonials.

[TK image: testimonials section]

Step-by-step to add testimonials section
  1. Create a new page.
  2. Add a title for the section.
  3. Add individual testimonial entries using the page content.
  4. Add #section-testimonials to the Tags field.
  5. Publish the page.

Authors section

Showcase your site's authors with their profile images, bios, and post counts.

[TK image: authors section]

Step-by-step to add authors section
  1. Create a new page.
  2. Add a title (e.g., "Meet the team" or "Our writers").
  3. Add #section-authors to the Tags field.
  4. Publish the page.
[!note] The section automatically pulls author information from Ghost. Make sure your authors have profile images and bios configured.

Podcast section

Display your latest podcast episodes in a horizontal scrolling layout.

[TK image: podcast section]

Step-by-step to add podcast section
  1. Create a new page.
  2. Add a title for the section.
  3. Add #section-podcast to the Tags field.
  4. Publish the page.
  5. Set up the media proxy (see Media proxy setup section).
[!note] This section requires the media proxy to be configured with your podcast RSS feed URL.

YouTube section

Display your latest YouTube videos in a scrollable grid.

[TK image: youtube section]

Step-by-step to add YouTube section
  1. Create a new page.
  2. Add a title for the section.
  3. Add #section-youtube to the Tags field.
  4. Publish the page.
  5. Set up the media proxy (see Media proxy setup section).
[!note] This section requires the media proxy to be configured with your YouTube channel ID.

Members-only posts section

Display posts that are only visible to your members. You can filter by membership level using additional tags.

[TK image: members-only posts section]

Step-by-step to add subscribers section
  1. Create a new page.
  2. Add a title for the section.
  3. Add #section-subscribers to the Tags field.
  4. Optionally add a filter tag (see table below).
  5. Publish the page.

Filter by membership level

Control which member posts appear in the section:

Tag Shows posts visible to
(no filter tag) Signed-in Members only post
#paid Paid members only
#tiers Specific membership tiers only

Example: A page with tags #section-subscribers and #paid displays only posts restricted to paid members.

Section positioning

By default, custom sections appear at the top of the homepage, after the hero. Use positioning tags to control where sections appear.

Tag Position
(no tag) Top of page, after hero
#middle Between primary and secondary tag sections
#bottom Bottom of page
#hash-homepage-exclude Section page exists but doesn't show on homepage
Step-by-step to position a section
  1. Open the page for your section.
  2. Add the positioning tag alongside your section tag.
  3. Update the page.

Example: A page with tags #section-testimonials and #hash-bottom displays testimonials at the bottom of the homepage.


Post templates

Ida offers seven distinct post layouts to showcase your content. You can set a default layout for all posts or choose a specific layout for individual posts.

Default post layout

Set the default layout used for all new posts.

Step-by-step to set default post layout
  1. Go to Settings > Design & branding > Customize.
  2. Find Default post hero layout in the post settings.
  3. Select your preferred layout.
  4. Click Save.

Available layouts

No feature image

A clean, text-focused layout without any feature image. Ideal for essays, editorials, or posts where imagery isn't the focus.

[TK image: no feature image layout]

Wide feature image

The feature image displays at content width above the post. A balanced layout that works well for most content types.

[TK image: wide feature image layout]

Full feature image

The feature image spans the full viewport width, creating a dramatic header. Best for high-quality, wide images.

[TK image: full feature image layout]

Overlay feature image

Post title and metadata overlay the feature image with a gradient veil effect. Creates an immersive, magazine-style header.

[TK image: overlay feature image layout]

Split layout

A side-by-side layout with the feature image on one side and post title/metadata on the other. Modern and distinctive.

[TK image: split layout]

Split reverse

Same as split layout but with the image and content positions reversed.

[TK image: split reverse layout]

Solid hero

A full-width colored hero section using your accent color, without an image. Clean and bold.

[TK image: solid hero layout]

Choosing a layout for a specific post

Step-by-step to select post template
  1. Open the post you want to customize.
  2. Click the settings icon ( ⚙️ ) in the top right.
  3. Scroll down to Template.
  4. Select your preferred layout from the dropdown.
  5. Update the post.

Common post features

All post templates include these features:

Visibility badges

Posts display badges indicating their access level:

  • Public - Available to everyone
  • Members - Available to free and paid members
  • Paid - Available to paid members only
  • Tier name - Available to specific membership tiers

Author byline

Display author information including profile image and name. You can toggle this off in theme settings.

Step-by-step to show/hide author byline
  1. Go to Settings > Design & branding > Customize.
  2. Find Show author in the post settings.
  3. Toggle on or off.
  4. Click Save.

Each post automatically displays up to 6 related posts from the same primary tag in a 3-column grid.

Comments

If Ghost's native comments are enabled, a comments section appears at the bottom of each post.

Social sharing

Posts include social sharing buttons for visitors to share your content.

Email signup box

Public posts display an email signup box encouraging visitors to subscribe. You can customize the heading and description.

Step-by-step to customize email signup box
  1. Go to Settings > Design & branding > Customize.
  2. Find Email signup heading and Email signup description in the post settings.
  3. Enter your custom text.
  4. Click Save.

Table of contents

Add a table of contents to long-form posts using an HTML card.

Step-by-step to add table of contents
  1. Open your post in the editor.
  2. At the location where you want the TOC, click the + button.
  3. Select HTML card.
  4. Enter: <div id="toc"></div>
  5. Save the post.

The table of contents automatically generates from your H2 and H3 headings.


Page templates

Standard page

The default page template uses the same hero layout options as posts. Configure the layout per-page using the template selector.

Authors listing page

Display all site authors in a grid layout.

[TK image: authors page]

Step-by-step to create authors page
  1. Create a new page.
  2. Give it a title (e.g., "Authors" or "Our team").
  3. Click the settings icon ( ⚙️ ).
  4. Under Template, select Authors.
  5. Publish the page.

The page displays:

  • First 4 authors in a 3-column grid (larger cards)
  • Remaining authors in a 4-column grid (smaller cards)

Each author card shows their profile image, name, bio, and post count.

Timeline page

Display posts in a vertical timeline format, perfect for portfolios, project showcases, or chronological content.

[TK image: timeline page]

Step-by-step to create timeline page
  1. Create a new page.
  2. Give it a title.
  3. Click the settings icon ( ⚙️ ).
  4. Under Template, select Timeline.
  5. Publish the page.

Filter timeline by tag

You can filter which posts appear on the timeline using a specific tag.

Step-by-step to filter timeline content
  1. Open your timeline page settings.
  2. Find the Twitter description field (under X card settings).
  3. Enter the tag slug you want to filter by.
  4. Update the page.

Example: Enter projects to only show posts tagged with "Projects".

Timeline minimal page

A cleaner version of the timeline without feature images. Ideal for text-focused content.

Step-by-step to create minimal timeline page
  1. Create a new page.
  2. Give it a title.
  3. Click the settings icon ( ⚙️ ).
  4. Under Template, select Timeline minimal.
  5. Publish the page.

Tag pages

When visitors click a tag, they see a dedicated tag page with:

  • Tag name as the heading
  • Tag description (if configured)
  • Optional feature image with hero overlay
  • 3-column grid of posts with that tag
  • "Load more" pagination

Author pages

Individual author pages display:

  • Author name and location
  • Bio and social links
  • Profile image
  • 3-column grid of their posts

Error page

A styled 404 error page displays when visitors reach a page that doesn't exist.


Media proxy setup

Display YouTube videos and podcast episodes on your site using a Cloudflare Worker proxy.

Why a proxy is needed

Browsers block direct requests to YouTube and podcast feeds from other websites (called CORS restrictions). The Cloudflare Worker fetches the content on your behalf, allowing it to display on your Ghost site.

Prerequisites

Before starting, you'll need:

  • A Cloudflare account (free tier works)
  • A YouTube API key from Google Cloud Console (for YouTube content)
  • Your YouTube channel ID (starts with UC)
  • Your podcast RSS feed URL (for podcast episodes)

Setting up the Cloudflare Worker

Create a new worker

Step-by-step
  1. Log in to your Cloudflare dashboard.
  2. Click Compute > Workers & Pages in the left sidebar.
  3. Click Create application.
  4. Select Start with Hello World.
  5. Give your worker a name (e.g., media-proxy).
  6. Click Deploy to create the worker.

Add the worker code

Step-by-step
  1. After deploying, click Edit code.
  2. Delete all the default code in the editor.
  3. Copy the contents of the cloudflare-media-proxy-worker.js file from the theme's scripts folder.
  4. Paste it into the Cloudflare editor.
  5. Click Deploy.

Add your YouTube API key

Step-by-step
  1. Go to your Worker's Settings tab.
  2. Click Variables and Secrets.
  3. Under Environment Variables, click Add.
  4. Set the variable name to: YOUTUBE_API_KEY
  5. Paste your YouTube API key as the value.
  6. Click Save.

Note your worker URL

Your Worker URL looks like:

https://media-proxy.your-account.workers.dev

You'll need this URL when configuring Ghost.

Getting a YouTube API key

Create a Google Cloud project

Step-by-step
  1. Go to the Google Cloud Console.
  2. Click the project dropdown at the top of the page.
  3. Click New Project.
  4. Enter a project name (e.g., "My Ghost Site").
  5. Click Create.

Enable the YouTube Data API

Step-by-step
  1. In your new project, go to APIs & Services > Library.
  2. Search for "YouTube Data API v3".
  3. Click on it, then click Enable.

Create an API key

Step-by-step
  1. Go to APIs & Services > Credentials.
  2. Click Create Credentials > API Key.
  3. Copy the generated API key.
  4. Click Close.
[!note] For better security, restrict your API key to only the YouTube Data API v3 in the key's settings.

Finding your YouTube channel ID

Your YouTube channel ID is a unique identifier that starts with UC and is 24 characters long.

Step-by-step to find your channel ID
  1. Go to your YouTube channel page.
  2. Look at the URL in your browser's address bar.
  3. If your URL looks like youtube.com/channel/UCxxxxxxxxxxxxxxxxxx, the UCxxxxxxxxxxxxxxxxxx part is your channel ID.
  4. If your URL uses a custom handle (like youtube.com/@username), click on any of your videos, then click your channel name to get the /channel/UC... URL.

Example valid channel ID: UCBcRF18a7Qf58cCRy5xuWwQ

[!note] Common mistakes: Using your channel handle (@username), using a playlist ID (starts with PL), or using an incomplete ID.

Finding your podcast RSS feed URL

Your podcast RSS feed URL is needed to display episodes on your site.

Step-by-step
  1. Log in to your podcast hosting platform (e.g., RSS.com, Anchor, Buzzsprout, Libsyn).
  2. Go to your podcast's Settings or Distribution section.
  3. Look for RSS Feed, RSS Feed URL, or Podcast Feed.
  4. Copy the full URL.

The RSS feed URL typically looks like:

  • https://media.rss.com/yourpodcast/feed.xml
  • https://anchor.fm/s/xxxxxxxx/podcast/rss
  • https://feeds.buzzsprout.com/xxxxxxx.rss
[!note] If you can't find your RSS feed URL, search your podcast host's help documentation for "RSS feed" or contact their support.

Configuring Ghost

Add the following code to your Ghost site's code injection.

Step-by-step
  1. Go to Settings > Code injection.
  2. In the Site Header section, paste your configuration code.
  3. Click Save.

For YouTube videos only

<script>
  window.MEDIA_WORKER_URL = 'https://media-proxy.your-account.workers.dev';
  window.YOUTUBE_CHANNEL_ID = 'UCxxxxxxxxxxxxxxxxxx';
  window.YOUTUBE_CONTENT_TYPE = 'videos';
</script>

For YouTube Shorts

<script>
  window.MEDIA_WORKER_URL = 'https://media-proxy.your-account.workers.dev';
  window.YOUTUBE_CHANNEL_ID = 'UCxxxxxxxxxxxxxxxxxx';
  window.YOUTUBE_CONTENT_TYPE = 'shorts';
</script>

For podcast episodes only

<script>
  window.MEDIA_WORKER_URL = 'https://media-proxy.your-account.workers.dev';
  window.PODCAST_FEED_SOURCE = 'https://anchor.fm/s/xxxxxxxx/podcast/rss';
</script>

For both YouTube and podcast

<script>
  window.MEDIA_WORKER_URL = 'https://media-proxy.your-account.workers.dev';
  window.YOUTUBE_CHANNEL_ID = 'UCxxxxxxxxxxxxxxxxxx';
  window.YOUTUBE_CONTENT_TYPE = 'videos';
  window.PODCAST_FEED_SOURCE = 'https://anchor.fm/s/xxxxxxxx/podcast/rss';
</script>

Configuration reference

Variable Required Description
MEDIA_WORKER_URL Yes Your Cloudflare Worker URL
YOUTUBE_CHANNEL_ID For YouTube Your channel ID (starts with UC)
YOUTUBE_CONTENT_TYPE No 'shorts' (default) or 'videos'
PODCAST_FEED_SOURCE For podcasts Your podcast RSS feed URL

Troubleshooting

YouTube videos not appearing

"YOUTUBE_API_KEY environment variable not configured"

  • Add the API key to your Cloudflare Worker under Settings > Variables and Secrets.

"Invalid YouTube channel ID"

  • Your channel ID must start with UC and be 24 characters long.

"YouTube API returned 403"

  • Check that YouTube Data API v3 is enabled in Google Cloud Console.
  • If you restricted the key, ensure YouTube Data API v3 is allowed.

No videos appearing but no error

  • Your channel may not have public videos.
  • Try switching YOUTUBE_CONTENT_TYPE between 'videos' and 'shorts'.

Podcast episodes not appearing

"Feed returned 404"

  • Double-check your podcast RSS feed URL is correct.
  • Test the feed URL directly in your browser.

Missing episode artwork

  • Some podcast feeds don't include episode artwork.
  • The theme uses channel artwork as a fallback.

Testing your worker directly

Test your Worker by visiting these URLs in your browser:

Test YouTube:

https://your-worker.workers.dev/?youtube=UCxxxxxxxxxxxxxxxxxx&type=videos

Test podcast:

https://your-worker.workers.dev/?feed=https://your-podcast-feed-url

If working correctly, you should see content. If there's an error, you'll see a JSON error message.

Still having issues?

  1. Open your browser's Developer Tools (F12).
  2. Go to the Console tab.
  3. Reload your page.
  4. Look for error messages starting with "YouTube" or "Podcast".

Advanced settings

Code injection

Add custom code to your site without editing theme files.

Step-by-step to add code injection
  1. Go to Settings > Code injection.
  2. Add code to Site Header (for CSS/JS that loads on every page).
  3. Add code to Site Footer (for JS that runs after page load).
  4. Click Save.

Custom fonts

Replace the default fonts with your own choice.

Step-by-step to add custom fonts
  1. Go to Settings > Code injection.
  2. In Site Header, add your font import and CSS:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Your+Font:wght@400;500;700&display=swap" rel="stylesheet">
<style>
  :root {
    --font-primary: 'Your Font', sans-serif;
  }
</style>
  1. Click Save.

Hiding sections

Remove sections from the homepage without deleting the content.

Step-by-step to hide a section
  1. Open the page for your section.
  2. Add #hash-homepage-exclude to the Tags field.
  3. Update the page.

The section page still exists and can be accessed directly, but it won't appear on the homepage.

Translation and localization

Ida supports Ghost's translation system for multilingual sites.

Step-by-step to translate theme text
  1. In your theme files, locate the locales folder.
  2. Copy en.json and rename it to your language code (e.g., es.json for Spanish).
  3. Translate the text strings in the new file.
  4. Upload the modified theme to Ghost.

For more information on translations, see Ghost's localization documentation.


Image sizes

Ida uses responsive images with these breakpoints:

Size Width
xs 50px (blur placeholder)
s 400px
m 750px
l 960px
xl 1140px
xxl 1920px

Ghost automatically generates these sizes when you upload images. The theme serves the appropriate size based on the visitor's screen.


Need help?

If you have questions about your Ida theme:

  1. Check this documentation for your answer
  2. Visit the Ghost Help Center for general Ghost questions
  3. Contact theme support for Ida-specific issues

Last updated: April 2026

The Ultimate Theme Bundle
Lifetime Access
The Ultimate Theme Bundle
Every Themex theme you'll ever need. 10 themes now + all future releases. Unlimited sites for $349.
See what's included
Subscribe to our newsletter.

Become a subscriber receive the latest updates in your inbox.