Implementing the Breadcrumbs from Yoast SEO into the Zuki theme by Elmastudio

I often work with themes by Elmastudio for client projects. Therefore, I put one of their themes, Zuki, into use for a website of a local hairdresser.

The themes by Elmastudio are pretty light-weight – which also means that they don’t have support for too many plugins out of the box.

For better SEO and an improved user experience I wanted to display breadcrumbs on the pages of my Zuki website. The popular Yoast SEO plugin has a breadcrumb functionality baked into the plugin – therefore was no need for an extra plugin or coding this by myself. There is just a little copy & paste needed in order to achieve this.

The plugin authors describe here in general how to implement their breadrumbs into themes. In the case of the Zuki theme I wanted to display the breadcrumbs in between the thin grey line that sits on top of the content container and the page title, as indicated in red in the following screenshot from the live theme demo.

All I needed to do is to copy the theme’s content-page.php file into my child theme folder and paste the snippet provided by the Yoast SEO team as follows:

<?php
/**
 * The template used for displaying page content.
 *
 * @package Zuki
 * @since Zuki 1.0
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class('cf'); ?>>

<?php
/* Start displaying Yoast SEO breadcrumbs */
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
/* End displaying Yoast SEO breadcrumbs */
?>

	<header class="entry-header">
		<h1 class="entry-title"><?php the_title(); ?></h1>
	</header><!-- end .entry-header -->

	<div class="entry-content cf">
		<?php
			the_content();
			wp_link_pages( array(
				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'zuki' ) . '</span>',
				'after'       => '</div>',
				'link_before' => '<span>',
				'link_after'  => '</span>',
			) );

			edit_post_link( __( 'Edit', 'zuki' ), '<span class="edit-link">', '</span>' );
		?>
	</div><!-- .entry-content -->

</article><!-- end post-<?php the_ID(); ?> -->

I also added a little styling: first to change the font of the breadcrumbs, and second as to make their linking function more visible, with a link style similar as it is designed in the sidebar. Here is what I added in my child theme style.css.

#breadcrumbs {
    font-family: 'Karla', Arial, sans-serif!important;
}

#breadcrumbs a:hover {
    color: #999;
    -webkit-transition: color linear 0.1s;
    -moz-transition: color linear 0.1s;
    -o-transition: color linear 0.1s;
    transition: color linear 0.1s;
}

And here is the outcome: