How to build custom headline areas

This quick episode of MD Live shows you how to override the default MD headline area and blend your own custom HTML block into your site header.

For advanced customization reasons, you may want more control over how the headline of your articles show on your site. The best way to get a grip over your site’s design is by diving into your child theme.

By following this tutorial, you’ll be able to insert your own block of HTML into your header, and by using WordPress template tags, show the title of the current page you’re on.

This gives us a nice setup to style our header and headline in the same container, and create an attached effect that clearly separates the header from the content.

Watch the video above to get a thorough explanation of exactly what is being changed in your child theme, and what the code below means.

To modify your headline, simply paste the following code into your child theme’s functions.php file, or your loader template:

/**
 * Manipulate templates on frontend.
 *
 * @since 1.0
 */

function md_child_theme_template_redirect() {

	// Move headline into header (when needed)

	$position = md_featured_image_position();

	if ( ( is_single() || is_page() ) && in_array( $position, array( '', 'remove' ) ) && md_has_headline() ) {
		remove_action( 'md_hook_content_item', 'md_headline', 20 );
		add_action( 'md_hook_after_header', 'md_child_theme_header_headline' );
	}

}

add_action( 'template_redirect', 'md_child_theme_template_redirect' );



/**
 * A quick function that shows our custom headline for posts/pages.
 *
 * @since 1.0
 */

function md_child_theme_header_headline() { ?>

	<div class="header-headline box shadow">
		<div class="inner">

			<div class="format block-triple">

				<?php while ( have_posts() ) : the_post(); ?>

					<?php md_hook_before_headline(); ?>

					<h1 class="headline" itemprop="headline"><?php the_title(); ?></h1>

					<?php md_hook_after_headline(); ?>

				<?php endwhile; ?>

			</div>

		</div>
	</div>

<?php }

Additional code has been provided so you can add your own custom headline container without interfering with existing MD options.

Do you have a coding question, or need assistance on your own custom layouts? Leave a comment on this post below with your request and I’ll answer it on the next episode of MD Live.

Start building your website with MD now

Get started with MD today. Pay once for use on unlimited websites.
* Save 40% on license key renewals every 12 months. Get auto-updates sent to 5 websites.

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.