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_content_headline', 10 );
		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-text-main 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.