Microhooks allows users to add (or modify) elements without having to over-write critical parts of Tiny Theme. For example, you can add a subscription box below the navigation on every page, add an about-the-author box below every post, incorporate custom fonts, re-format your site’s description, re-work the home page post list, and almost anything else you can imagine.

Enabling the Microhooks Feature

First, this requires Tiny Theme on your Micro.blog. Make sure it’s installed and active. Next, you’ll need to create a Custom Theme in the Micro.blog dashboard (go to Design page) and activate it. At this point, nothing will have changed on your theme, you’ve just laid the ground work for your modifications.

See the first section entitled Getting Started with Themes on this post if you need help creating the custom theme.

How it Works

Tiny Theme checks to see if you’ve enabled any microhooks. If you have, it’ll pull in any that you’ve added and incorporate it into the theme automatically. Since these microhooks are exclusive to your custom theme and are not supplied by Tiny, you aren’t over-writing a single file. When Tiny is updated, you’re not blocking any updates from going through with your files. And your changes will stay live through the update.

Available Microhooks

This is a quick reference list of available microhooks. Detailed descriptions, limitations, and features are listed below.

Activating Specific Microhooks

You’ll need to edit your newly created custom theme. Here’s where the magic happens. You’ll create a new template in that theme with the name of the appropriate path and microhook.

Examples:

  • layouts/partials/microhook-after-post.html
  • layouts/partials/microhook-footer.html

The layouts/partials/ portion is REQUIRED for all microhooks.

By doing that you’ve activated that particular microhook. Now, whatever you add to that new template will be reflected in your theme. You must add a new template for each microhook. This keeps things organized and easily reviewable. An incorrectly used microhook may temporarily break your site, BUT every change you make is easily reversible and NOT destructive.

Details of Each Microhook

You’ll need to know what each Microhook does and any limitations they might have. Different microhooks have different requirements. Let’s go through them one by one.

microhook-head.html

This hook enables you to add anything between the <head></head> tags of your document. For example, certain scripts and meta tags might go here. If you previously used the Tiny Theme Add-On: Browser Color plugin, this is where you’d place your browser color meta tags.

Back to Top ↑

microhook-profile-photo.html

Replace the image/logo at the top of your site. While you can put any content here (even text), the standard is an image wrapped in <a href=""></a>.

Back to Top ↑

microhook-title.html

Modify the “title” area of your site. For reference, here is the default implementation.

<h1><a class="site-title p-name u-url" href="/">{{ .Site.Title }}</a></h1>

Back to Top ↑

microhook-description.html

By default, Tiny Theme uses your account description below your site title. However, you may want to build that out further. If you activate this Microhook, the default description area will be completely removed. It will be replaced with whatever you add here. You can go wild.

Back to Top ↑

microhook-navigation.html

This will completely remove the default navigation panel of Tiny Theme. It will be replaced with your custom content. Want a hamburger menu or something more complex? Have at it!

If you use this microhook, you will also be over-riding any use of the microhook-inline-nav-begin and microhook-inline-nav-end microhooks on your site.

Back to Top ↑

microhook-inline-nav-begin.html

You can add content within (at the beginning) of the navigation ul. This is great if you’d like to add additional navigation elements before the default micro.blog navigation elements.

<li><a class="new-link" href="https://new-link.com">New Link</a></li>

It will follow the formatting and design of your existing navigation.

Back to Top ↑

microhook-inline-nav-end.html

You can add content within (at the end) of the navigation ul. This is great if you’d like to add additional navigation elements after the default micro.blog navigation elements.

<li><a class="new-link" href="https://new-link.com">New Link</a></li>

It will follow the formatting and design of your existing navigation.

Back to Top ↑

microhook-post-list-byline.html

The default byline on each post on the home page shows only the date of the post. If you’d like to reformat that date, remove it completely, or modify what is shown, this is your microhook. You could add the author’s name, the category, or any other information. This will only change the byline on the blog feed. If you want to change it on individual pages, you’ll need microhook-post-byline.html.

Back to Top ↑

microhook-post-list.html

Be Careful! This one requires advanced knowledge of Hugo and Micro.blog. By activating and using this microhook, you will completely remove the built-in list of posts and pagination from your blog’s main page, including other certain microhooks. This should only be used for reconstructing the post list and pagination in full by advanced users. Potential use-cases for this microhook are displaying posts based on category or changing posts to chronological order.

If you use this microhook, you will also be over-riding any use of the microhook-post-list-byline.html, microhook-post-summary.html, microhook-before-post-list.html, microhook-read-more-text.html, and microhook-after-post-list.html microhooks on your main blog page.

Don’t be too scared. If you do break things, you can simply delete this microhook from your installation and all will return to as it was. It is advanced, but not irreversible.

Back to Top ↑

microhook-before-post-list.html

This will apply only to your main blog page. Anything added here will appear before the first post on your main blog page. You could use it for a call-to-action box, add a news alert, or anything your heart desires.

Back to Top ↑

microhook-below-post-in-list.html

The content in this microhook will go below each individual post on the main blog page. One common use for this would be to add social media buttons to the home page for each individual post in the list. You could also dividing content like advertisements or horizontal rules. Whatever is added to this hook will show below EVERY post in the list.

Back to Top ↑

microhook-read-more-text.html

If you use a more tag in your posts to control what’s shown on your main blog page, a button with the text “Read More →” is added in the appointed place. If you’d like to change that text in any way (such as another language), you’ll need to use this microhook. Do not use any HTML or other coding language. This file should include only a very short snippet of plain text.

Previously, this was accomplished with the Summary Posts plugin. That plugin is now deprecated and no longer required.

Back to Top ↑

microhook-after-post-list.html

Use this microhook to add content below the post list on your main blog page.

Back to Top ↑

microhook-before-post.html

Add content before all individual posts. Could be used for special announcements, calls to action, subscription boxes, and more.

Back to Top ↑

microhook-post-byline.html

Similar to microhook-post-list-byline.html, which changes bylines on the blog feed, this microhook will change byline information on individual posts.

Back to Top ↑

microhook-after-post.html

Add content here that will display at the bottom of every individual post you create. The most common reasons to use this box would be for an author description or an email subscription box.

Back to Top ↑

microhook-categories.html

Activating this microhook will remove the list of categories from single posts and replace it with your content. The primary use of this microhook would simply be re-working how categories are pulled in and displayed or placing some other content in its place.

Back to Top ↑

microhook-share-button.html

Many people have buttons at the bottom of their posts. Examples might be a Tinylytics Kudos button, a Reply on Micro.blog button, or a Reply on Mastodon button. You can use this microhook to add additional links/buttons here. Whatever you add here will be wrapped in the same <ul></ul> tags as the other buttons. You’ll need to format this microhook as such:

<li><a href="link here">Text here</a></li>

These links (you can add multiple in one hook) will fall inline with the other links. You’ll need to style them in Custom CSS as well.

Back to Top ↑

microhook-before-comments.html

Want to add content after the comments on an individual post? Perhaps a comment counter or commenting rules?

Back to Top ↑

microhook-after-comments.html

Want to add content after the comments on an individual post? Perhaps a disclaimer for affiliate links?

Back to Top ↑

microhook-before-page-content.html

Add anything before the content of a PAGE (not visible on posts). This will display after the page title but before the page content.

Back to Top ↑

microhook-after-page-content.html

Add whatever you’d like after the content of all PAGES (not posts) on your site.

Back to Top ↑

microhook-footer.html

This will completely remove the Tiny Theme default footer INCLUDING Micro.blog’s Custom Footer functionality. If you want a complex footer design that doesn’t seem possible with current Tiny and Micro.blog options, you can go fully custom here.

Back to Top ↑

microhook-before-closing-body.html

If you need to add scripts that load after the page content, this is the best place for them. Google Analytics, Font Providers, etc.

Back to Top ↑

microhook-archive-post-list.html

Be Careful! Similar in functionality to microhook-post-list.html, this microhook will clear out the default content of your individual category page giving you full control of its layout, design, and functionality. This is an advanced microhook that will override any existing uses of microhook-post-list-byline.html, microhook-read-more-text.html, microhook-below-post-in-list.html, microhook-pagination.html, and microhook-category-header.html on the category pages.

You can break things using this Microhook, but it’s easy to revert to a working theme by simply removing the microhook.

Back to Top ↑

microhook-category-header.html

If you’d like to add content above your post list for individual category pages, this is your microhook. If you’d like the same content on each category page, it’s pretty straightforward. However, for most, you’d like to have different content depending on the category. One example of this might be for category descriptions. To accomplish this, here’s a starting point:

{{ if eq .Title "CategoryHere" }}<p>Insert Content</p>{{ end }}

In the above example, change CategoryHere to your category. It is case sensitive.

microhook-archive-lead.html

Add content below the “Archive” title and above the list of categories/posts on the main archives page. Often used to help readers understand your categorization strategy or provide RSS links.

Back to Top ↑

microhook-pagination.html

Activating this microhook will override the main blog page pagination in full (it will NOT disable pagination). The most obvious use of this is to re-work the pagination design/layout of Tiny Theme. This microhook requires advanced knowledge of Hugo and Micro.blog.

Back to Top ↑

microhook-before-replies.html

If you have the micro.blog replies page enabled, you can use this hook to add content before the first reply. This might be useful to explain to micro.blog users what exactly they’re seeing.

Back to Top ↑

microhook-after-replies.html

If you have the micro.blog replies page enabled, you can use this hook to add content after the last visible reply.

Back to Top ↑

microhook-unfontawesome.html

By default, Font Awesome is included with Tiny Theme. If you’d like to disable it, use this microhook. The microhook can remain blank as it will only trigger the removal.

Back to Top ↑

microhook-uncss.html

Are you a web designer who likes to handle your own CSS? This microhook is for you. Activating it will remove default styling (main.css ) for your site, enabling you to style it from scratch. Once enabled, you have 3 options for adding your own styling.

  1. Add your own stylesheet using <link rel="stylesheet" href="your-styles.css">
  2. Create an internal stylesheet within the microhook by utilizing <style></style>
  3. Leave the microhook blank and use Micro.blog’s built-in Custom CSS feature

If at any point, you’d like to return to Micro.blog’s default styling, you can just delete this microhook and rebuild the site.

This microhook will not remove Font Awesome styling. If you'd like to do that, see microhook-unfontawesome.html

Back to Top ↑