Mythos Theme logo Mythos Theme

Microhooks

What are Microhooks?

Microhooks are a powerful customization system created by me specifically for Micro.blog themes. They allow you to add or modify elements of your website without overwriting critical theme files or losing your changes when the theme updates.

Think of microhooks as “insertion points” throughout your theme where you can add your own custom content. Want a newsletter signup box after every post? A welcome message on your home page? Custom sidebar content? Microhooks make it possible with just a few clicks.

For users of Tiny Theme and Sumo Theme, Microhooks for Mythos are essentially the same. Some functionality that required Microhooks in those themes are now available as simple settings in Mythos Settings.

The Power Behind Microhooks

Update-Safe Customization

The biggest advantage of microhooks is that your customizations survive theme updates. When I release a new version of the Mythos theme, your microhooks remain intact and continue working exactly as before.

Non-Destructive Changes

Made a mistake? No problem! Simply delete the microhook file and your site returns to its original state. There’s no risk of breaking your theme permanently.

How to Add a Microhook in Micro.blog

  1. Create a Custom Theme (if you haven’t already)

    • Go to your Micro.blog dashboard
    • Navigate to Design → Edit Custom Theme
    • If you don’t have a custom theme yet, click “Create Custom Theme”

  2. Create Your Microhook File

    • In the theme editor, click “New Template”
    • Name your file exactly as shown in the microhook list below (e.g., microhook-home-before-posts.html)
    • Make sure to include the full path in the name: layouts/partials/microhook-name.html

  3. Add Your Content

    • Add whatever HTML, text, or code you want to appear
    • Click “Update Template” to save

  4. See Your Changes

    • Your microhook will appear on your site
    • No need to republish

Available Microhooks

Content Area Microhooks

microhook-before-post-content.html

Location: layouts/partials/microhook-before-post-content.html

Appears on individual post pages, after the post title and date but before the actual post content.

Perfect for:

  • Subscription boxes or newsletter signups
  • Post disclaimers or warnings
  • Announcements that should appear on every post
  • Calls-to-action before readers dive into content

Styling: Inherits the post’s styling context. You can add your own CSS classes or use inline styles.

microhook-after-post-content.html

Location: layouts/partials/microhook-after-post-content.html

Appears on individual post pages, after the post content but before categories and share buttons.

Perfect for:

  • Newsletter signup forms
  • Author bio boxes
  • Related post suggestions
  • Comments or feedback requests
  • Social media follow buttons

Styling: Positioned within the post container, so it follows the post’s width and spacing.

microhook-before-page-content.html

Location: layouts/partials/microhook-before-page-content.html

Appears on static pages (like About, Contact), after the page title but before the page content.

Perfect for:

  • Page-specific disclaimers
  • Contact information on service pages
  • Special announcements for specific pages
  • Breadcrumb navigation

Styling: Uses the same styling context as posts, but only appears on pages, not blog posts.

microhook-after-page-content.html

Location: layouts/partials/microhook-after-page-content.html

Appears on static pages, after the page content.

Perfect for:

  • Contact forms on your Contact page
  • Related links on your About page
  • Page-specific calls-to-action
  • Additional resources or downloads

Styling: Positioned within the page container for consistent formatting.

Home Page Microhooks

microhook-home-before-posts.html

Location: layouts/partials/microhook-home-before-posts.html

Appears only on your home page, at the very top before your posts list begins.

Perfect for:

  • Welcome messages for new visitors
  • Site announcements or news
  • Featured content or highlights
  • Search bars or navigation aids

Styling: Full width of the home content area. Great place for hero sections or prominent announcements.

microhook-home-after-posts.html

Location: layouts/partials/microhook-home-after-posts.html

Appears only on your home page, after all posts and pagination.

Perfect for:

  • Newsletter signup forms
  • Archive links or site navigation
  • Additional calls-to-action
  • Footer-like content specific to the home page

Styling: Appears at the bottom of the home page content, before the main site footer.

Site-Wide Microhooks

microhook-after-header.html

Location: layouts/partials/microhook-after-header.html

Appears on every page of your site, right below the header and navigation.

Perfect for:

  • Site-wide announcements or alerts
  • Breadcrumb navigation
  • Search bars
  • Important notices or updates

Styling: Full width placement between header and main content. Excellent for prominent, site-wide messaging.

microhook-sidebar.html

Location: layouts/partials/microhook-sidebar.html

Appears on every page, after the main content but before the footer.

Perfect for:

  • Sidebar widgets (with custom CSS)
  • Recent posts or popular content
  • About the author sections
  • Social media feeds
  • Additional navigation menus

Styling: Requires custom CSS to position as a true sidebar. By default, appears as a content block below the main content. Plug-in developers can easily utilize this microhook.

Technical Microhooks

microhook-unfontawesome.html

Location: layouts/partials/microhook-unfontawesome.html

Replaces the theme’s FontAwesome icon library with your custom solution (or removes it entirely).

Perfect for:

  • Custom SVG icon sets
  • Different icon libraries (like Phosphor Icons)
  • Removing icons entirely for faster loading
  • Self-hosted icon solutions

Important: Only use this if you understand icon systems. The social media icons provided in your plugin settings will not work if you use this microhook.

microhook-uncss.html

Location: layouts/partials/microhook-uncss.html

Replaces the entire theme CSS with your custom stylesheet.

Perfect for:

  • Complete theme redesigns
  • Custom CSS frameworks
  • Performance optimizations
  • Self-hosted CSS files

Warning: This replaces ALL theme styling. Only use if you’re providing a complete CSS replacement.

Example Microhook

Here’s a simple example of a site-wide announcement using microhook-after-header.html:

Mythos Microhook Example

<div style="background: #2563eb; color: white; padding: 12px 0; text-align: center; margin-bottom: 20px;">
    <p style="margin: 0; font-size: 0.95em;">
        🚀 <strong>New Project:</strong> I just launched <a href="/my-new-project" style="color: #bfdbfe; text-decoration: underline;">My Awesome App</a> -
check it out!
    </p>
</div>

Troubleshooting

Something Looks Wrong?

If a microhook breaks your layout or doesn’t look right:

  1. Go back to your theme editor
  2. Find the problematic microhook file
  3. Delete it or edit the content
  4. Your site immediately returns to normal

Microhook Not Appearing?

  • Double-check the file name and path
  • Ensure you’re looking in the right location on your site
  • Try adding simple text first to confirm it’s working

Styling Issues?

  • Use your browser’s developer tools to inspect the microhook
  • Add custom CSS classes or inline styles
  • Remember that microhooks inherit the surrounding context’s styling

Remember: Microhooks are designed to be safe and reversible. Don't be afraid to experiment!