As a flexible theme, it should have the ability to customize code and integrate third-party services. Therefore, we brought a feature called hook.

In this article, we will introduce all hooks and provide some use cases.

Overview

HookDescription
head-endBefore the <head> end
body-endBefore the <body> end
main-beginAbove of the <main>
main-endFollow the <main>
list-beginAbove of the posts list
list-endFollow the posts list
sidebar-beginAt very top of the sidebar
sidebar-endBefore the sidebar end
content-beginAbove of the post content
content-endFollow the post content
comments-beginAbove of the comments
comments-endFollow the comments
footer-beginAt very top of the footer
footer-endBefore the footer end
post-panel-beginAt very top of the post panel
post-panel-endBefore the post panel end
docs/sidebar-beginAt very top of the docs sidebar
docs/sidebar-endBefore the docs sidebar end
docs/nav-beginAt very top of the navigation
docs/nav-endBefore the navigation end
contact/form-field-beginAt very top of the contact form field
contact/form-field-endBefore the contact form field end
search/sidebar-beginAt very top of the search sidebar
search/sidebar-endBefore the search sidebar end

Usages

It’s easy to use a hook, what you need to do is that create an HTML file with the same name as hook in the layouts/partials/hooks directory.

Let’s take sidebar-begin as an example:

1echo '<section class="row card component text-center"><div class="card-body">SIDEBAR BEGIN</div></section>' \
2  > layouts/partials/hooks/sidebar-begin.html