Skip to content

Theme setup

Jory Hogeveen edited this page Sep 13, 2023 · 34 revisions

This guide is about the theme hooks you'll be using to enable this plugin to work properly.
You can find these hooks in the plugin main settings page under "Frontend Settings".
It's required to update these hooks according to one of the below setups in order to complete the installation.

Default theme setup

Themes based on the Genesis Framework are supported by default! No changes needed.
Please note that it is possible that there are some Genesis themes that can not be supported due to their structure.

There are more themes with similar implementations like Genesis to insert code before and after the website HTML through actions hooks.
See a full list here with currently known compatible theme hooks

After installaton


Alternative installation options

For other themes there are three options.

  • Basic theme setup: Available since WordPress 5.2!
  • Simple theme setup: Just add two lines of code and use the frontend functionalities from this plugin
  • Custom theme setup: Disable the frontend rendering of HTML by this plugins and make your theme compatible yourself like you want.

Basic theme setup

Since WordPress 5.2 themes are encouraged to add the wp_body_open tag right after the <body> tag in their themes. That in combination with wp_footer creates a uniform location for this plugin to work with.

Please verify that your theme supports these hooks at the correct location by looking for the following lines of code:

  • wp_body_open
    • look for wp_body_open() in your theme header.php (Since WordPress 5.2).
    • This plugin hooks at priority 5.
  • wp_footer
    • look for wp_footer() in your theme footer.php
    • This plugin hooks at priority -50 (only for wp_footer).

If your theme supports these hooks when please update the plugin settings website_before and website_after with these hooks. This is not a default setting!

Important: It could be that your theme calls wp_body_open() or wp_footer() but not as a direct child of the <body>. If this is the case then this will not work! See the "Simple theme setup" instructions below for a correct structure of your page.

More info: #70

Simple theme setup

First of all, I strongly advice to create a child theme if you didn't already! Click here for more information.

Set the correct hooks (actions) in the plugins settings website_before and website_after.

Add the following code directly after the <body> tag. This is probably located in the header.php or index.php theme file.
<?php do_action('website_before'); ?>

Next, add the following code directly after the site content, before the wp_footer() function. This is probably located in the footer.php or index.php theme file.
<?php do_action('website_after'); ?>
Important: This code needs to be a direct child of the <body> tag!

The final output of your theme should be similar to this:

<html>
	<head>
		/** HEADER CONTENT **/
	</head>
	<body>
		<?php do_action('website_before'); ?>
		<!-- WEBSITE CONTENT -->
		<?php do_action('website_after'); ?>
		<?php wp_footer(); ?>
	</body>
</html>

Custom theme setup