How to Add Footer Links?

The Zora Ghost theme allows you to easily customize footer links using Ghost’s Code Injection feature. You can add custom links for sections like “Explore” and “Legal” to provide better navigation for your visitors.

What Are Footer Links?

Footer links appear at the bottom of every page and typically include:

• Explore Links: Important pages like About, Contact, Blog
• Legal Links: Terms, Privacy Policy, etc.
• Social Links: Your social media profiles

These links help visitors find important information and improve site navigation.

How to Add Footer Links

Step 1: Go to Code Injection

1. Log in to your Ghost Admin panel
2. Navigate to Settings
3. Click on Code Injection in the left sidebar

Step 2: Add the JavaScript Code

In the Site Footer section (bottom of the page), add the following JavaScript code with your own links:

<script>
window.zoraFooterExploreLinks = {
   title: "Explore",
   links: [
      { text: "About Us", href: "/about/" },
      { text: "Contact", href: "/contact/" },
      { text: "Blog", href: "/blog/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "Legal",
   links: [
      { text: "Terms", href: "/terms/" },
      { text: "Privacy", href: "/privacy/" }
   ]
};
</script>

Step 3: Customize Your Links

Replace the example links with your own:

For Explore Links:

• Change the title to your preferred section name
• Update each text to the link label (what users see)
• Update each href to the actual URL path

For Legal Links:

• Change the title to your preferred section name
• Update each text to the link label
• Update each href to the actual URL path

Step 4: Save Changes

Click Save at the bottom of the page to apply your changes.

Example Configurations

Basic Blog Footer

<script>
window.zoraFooterExploreLinks = {
   title: "Explore",
   links: [
      { text: "Home", href: "/" },
      { text: "About", href: "/about/" },
      { text: "Contact", href: "/contact/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "Legal",
   links: [
      { text: "Privacy Policy", href: "/privacy/" },
      { text: "Terms of Service", href: "/terms/" },
      { text: "Cookie Policy", href: "/cookies/" }
   ]
};
</script>

Course Platform Footer

<script>
window.zoraFooterExploreLinks = {
   title: "Explore",
   links: [
      { text: "All Courses", href: "/courses/" },
      { text: "Free Resources", href: "/resources/" },
      { text: "Our Blog", href: "/blog/" },
      { text: "About Us", href: "/about/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "Legal",
   links: [
      { text: "Terms of Use", href: "/terms/" },
      { text: "Privacy Policy", href: "/privacy/" },
      { text: "Refund Policy", href: "/refund/" }
   ]
};
</script>

Minimal Footer

<script>
window.zoraFooterExploreLinks = {
   title: "Quick Links",
   links: [
      { text: "About", href: "/about/" },
      { text: "Contact", href: "/contact/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "",
   links: [
      { text: "Privacy", href: "/privacy/" },
      { text: "Terms", href: "/terms/" }
   ]
};
</script>

Important Notes

• URL Format: Use relative URLs (starting with /) for internal links
• External Links: For external links, use full URLs like https://example.com
• Multiple Links: You can add as many links as needed by adding more objects to the links array
• Section Titles: You can leave title empty ("") if you don’t want a section title
• Case Sensitive: The variable names (zoraFooterExploreLinks, zoraFooterLegalLinks) must be exact

Adding More Link Sections

The theme supports these two main sections. If you need more sections, you can add similar code with different variable names, but ensure the theme recognizes them.

Removing Footer Links

To remove footer links:

1. Go to Settings > Code Injection
2. Find the Site Footer section
3. Delete or comment out the JavaScript code
4. Save

Testing Your Links

After adding footer links:

1. Visit any page on your site
2. Scroll to the footer
3. Verify all links appear correctly
4. Click each link to ensure they work
5. Test on mobile devices for responsive layout

Best Practices

• Keep it Simple: 3-5 links per section is ideal
• Clear Labels: Use descriptive, short text for links
• Logical Order: Place important links first
• Consistent URLs: Ensure all link URLs exist and work
• Mobile Friendly: Test on mobile to ensure links are tappable

Troubleshooting

Links not appearing in footer?

• Verify the code is in Site Footer section, not Site Header
• Check for JavaScript syntax errors (missing commas, brackets)
• Ensure variable names are exactly zoraFooterExploreLinks and zoraFooterLegalLinks
• Clear browser cache and reload

Links showing but not working?

• Check that href values are correct
• Ensure pages actually exist at those URLs
• For internal links, use relative URLs starting with /
• Test links in a new browser tab to isolate issues

Code not saving?

• Ensure you have admin permissions
• Check if there are any JavaScript errors in the code
• Try removing and re-adding the code

Summary

1. Go to Settings > Code Injection
2. Add the JavaScript code to Site Footer section
3. Customize text and href values with your own links
4. Save changes

Your custom footer links will now appear on every page of your site, providing easy navigation to important pages and legal information.