Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PHP hook for adding custom HTML above the header in the Avada theme.
<?php // Don't copy this first line when adding to your child theme's functions.php file.
/** Add custom HTML above the header in the Avada theme. */
function add_my_html() {
if ( is_page( array( 'sample-page' ) ) ) {
return;
}
$my_html = <<<EOT
<style>
.my-header-styles {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.25rem;
font-weight: 400;
padding: 2% 0;
text-align: center;
}
.my-header-link {
border-bottom: 3px solid black;
}
.my-header-link:hover {
border-bottom: 3px solid #65bc7b;
}
</style>
<div class="my-header-styles">
<h2 style="color: #625555; font-weight: 500;">Hello, World!</h2>
<p>This is a demo of custom HTML injected into the top of the page.</p>
<p>Learn more about <a class="my-header-link" href="https://theme-fusion.com/documentation/avada/avada-for-developers/avada-builder-hooks-actions-filters/">Avada hooks</a>.</p>
</div>
EOT;
echo $my_html;
}
add_action( 'avada_header','add_my_html' );
// Add this code to your child theme's functions.php file or use the Code Snippets plugin.
@marklchaves

This comment has been minimized.

Copy link
Owner Author

@marklchaves marklchaves commented Jul 15, 2021

Result

avada-custom-html-above-header

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment