Adding a block of content below the header

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Howdy Customizr developer!

A clean and simple solution to display a block of content right below the header is to add an action to the ‘__after_header’ hook (located in the header.php template of the Customizr theme).

In the functions.php file of your child theme, you can write this kind of code that will display a block right after header in your home page.

//we add the action with priority set to 5 => it will be displayed in first position (before the slider if any)
add_action ('__after_header' , 'add_content_after_header', 20);

function add_content_after_header() {
	//checks if we are displaying the home page
	if ( !tc__f( '__is_home' ) )
		return;
	?>
		<div id="my-content-header">
			<div class="row-fluid">
				<div class="span8 text-center">
					<?php 
						printf('<h2>%1$s</h2>',
						__('My header message!')
						)
					?>

				</div>

				<div class="span4 text-center">
					<?php 
						printf('<a class="btn btn-large btn-warning">%1$s</a>',
						__('Call to action')
						)
					?>
				</div>
			</div>
		</div>
	<?php
}

This code uses the Bootstrap base CSS syntax. Find out more here.

59 thoughts on “Adding a block of content below the header”

Comments are closed.