​
Building Themes for Aikeedo

Creating a custom theme for Aikeedo allows you to personalize the look and feel of your platform. This guide will walk you through the process of building a theme, from setting up the directory structure to activating your new theme.

​
Getting Started

​
1. Create the Theme Directory

First, create a new directory for your theme in the /public/content/plugins directory of your Aikeedo platform. Use the following structure: yourorganization/theme-name.

For this guide, we’ll create a theme called “Orbit”:

mkdir -p public/content/plugins/heyaikeedo/orbit

​
2. Set Up the Composer Package

Aikeedo themes are Composer packages, which require a composer.json file for metadata and dependencies.

Create a composer.json file in your theme directory. Here’s a minimal version that’s sufficient for a functional theme:

{
    "name": "heyaikeedo/orbit",
    "type": "aikeedo-theme",
    "version": "1.0.0",
    "require": {
        "heyaikeedo/composer": "^1.0.0"
    },
    "extra": {
        "title": "Orbit",
        "status": "active"
    }
}

This minimal version includes the essential fields needed for your theme to function properly.

The type attribute must be set to aikeedo-theme. This is crucial for Aikeedo to recognize and properly handle your package as a theme.

For a more comprehensive composer.json file, you can use the following extended version:

{
    "name": "heyaikeedo/orbit",
    "description": "Orbit theme for Aikeedo",
    "version": "1.0.0",
    "type": "aikeedo-theme",
    "homepage": "https://aikeedo.com",
    "time": "2024-03-21",
    "license": "AIKEEDO",
    "authors": [
        {
            "name": "Aikeedo",
            "email": "hey@aikeedo.com",
            "homepage": "https://aikeedo.com",
            "role": "Owner"
        }
    ],
    "support": {
        "chat": "https://aikeedo.com/",
        "docs": "https://docs.aikeedo.com/",
        "email": "support@aikeedo.com",
        "forum": "https://aikeedo.com/",
        "issues": "https://aikeedo.com/",
        "rss": "https://aikeedo.com/",
        "source": "https://github.com/heyaikeedo",
        "wiki": "https://docs.aikeedo.com/"
    },
    "require": {
        "heyaikeedo/composer": "^1.0.0"
    },
    "extra": {
        "title": "Orbit",
        "description": "Orbit theme for Aikeedo",
        "logo": "https://aikeedo.com/",
        "icon": "https://aikeedo.com/",
        "status": "active"
    },
    "autoload": {}
}

This extended version provides more detailed information about your theme, including author details, support links, and additional metadata.

The name field in composer.json must match the path to your theme directory (e.g., heyaikeedo/orbit). This uniquely identifies your theme.

Start with the minimal version and expand your composer.json file as your theme grows and requires more detailed information. Remember to always keep the type set to aikeedo-theme.

​
3. Create the Main Template

Aikeedo uses the Twig templating engine to render pages. Create a templates/index.twig file in your theme directory with a basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Orbit</title>
</head>
<body>
  <h1>Orbit Theme</h1>
  <p>This is the Orbit theme for Aikeedo.</p>
</body>
</html>

Use the @theme Twig namespace to load theme assets in your templates.

​
Activating Your Theme

  1. Access the Themes page in the Aikeedo admin UI.
  2. Locate your new theme (Orbit).
  3. Click the “Activate” button to enable your theme.

​
Further Development

Now that you have the basic structure in place, you can start customizing your theme. Here are some tips for further development:

  • Frontend Tooling: Choose a frontend build tool that suits your workflow. We recommend using Vite for its speed and ease of use.
  • Theme Objects: Aikeedo provides several objects that you can use in your themes. Refer to the Theme Objects section in the documentation for details on available objects and their properties.
  • Default Theme: For inspiration and best practices, take a look at the Default Aikeedo theme.

​
Best Practices

  1. Responsive Design: Ensure your theme looks good on all device sizes.
  2. Accessibility: Follow web accessibility guidelines to make your theme usable for everyone.
  3. Performance: Optimize your assets and use caching techniques to keep your theme fast.

​
Conclusion

Building a theme for Aikeedo is a straightforward process that allows you to create a unique look for your platform. By following this guide and exploring the Aikeedo documentation, you’ll be well on your way to creating professional, customized themes.

For more advanced topics and detailed information on theme development, check out our other documentation pages or reach out to our support team.

Was this page helpful?

Building PluginsAddress