How to Add CSS Styles to WordPress Breadcrumbs

How to Add CSS Styles to WordPress Breadcrumbs

functions.php

function get_page_parents( $id=0, $separator="/" ){
	$itisme=get_post($id);
	$lineage = '<span>'.$itisme->post_title.'</span>';
	$parentID=$itisme->post_parent;
	while( $parentID != 0 ){
		$parent=get_post($parentID);
		$lineage='<a href="' . get_permalink($parent->ID) . '">' . $parent->post_title . '</a>'.$separator.$lineage;
		$parentID=$parent->post_parent;
	}
	return $lineage;
}

include 'includes/breadcrumb-styles.php';
add_action('wp_head', 'add_breadcrumb_styles');

page.php

<?php get_template_part( 'nav', 'above-page' ); ?>

nav-above-page.php

<div id="page-bread-crumbs">
<a class="home" href="/">Home</a> &gt; <?php echo get_page_parents( $post->ID, " &gt; " ) ?>
</div>

includes/breadcrumb-styles.php

<?php

global $eia_parents;

$eia_parents = array();

function build_menu_style( $menu_name, $color, $locations ) {

	global $eia_parents;

	$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );

	$menu_items = wp_get_nav_menu_items($menu->term_id);

	$page_ids = array();

	foreach ( (array) $menu_items as $key => $menu_item ) {

		$page_id = $menu_item->object_id;

		echo '/* ' . $menu_item->title . ' */' . PHP_EOL;
		echo '.page-id-'.$page_id.' #page-bread-crumbs a,' . PHP_EOL;
		echo '.page-id-'.$page_id.' #page-bread-crumbs span {color:'.$color.';}' . PHP_EOL;

		if( $menu_item->post_parent && !array_key_exists( 'post_parent_id_'.$menu_item->post_parent, $eia_parents ) ) {
			array_push( $eia_parents, array( 'post_parent_id_'.$menu_item->post_parent => array('ID' => $menu_item, 'color' => $color ) ) );
		}
	}

	$page_ids = null;
}

function add_breadcrumb_styles() { ?><style type="text/css"><?php

global $eia_parents;

echo PHP_EOL;

$color1 = '#A08A42 /* book a flight (tan) */'; // tan /* book a flight */
$color2 = '#4AAAD6 /* check a flight (blue) */'; // blue /* check a flight */
$color3 = '#B25029 /* at the airport (burnt) */'; // burnt /* at the airport */
$color4 = '#40847A /* about the airport (green) */'; // green /* about the airport */

// update this array with the menus you wish to add styles from

$menu_locations = array(
	"home-subnav-1" => $color1,
	"home-subnav-2" => $color2,
	"home-subnav-3" => $color3,
	"home-subnav-4" => $color4
);

$locations = get_nav_menu_locations();

foreach( $menu_locations as $menu_name => $color ):
	if ( ( $locations ) && isset( $locations[ $menu_name ] ) ) {
		build_menu_style( $menu_name, $color, $locations );
	}
endforeach;

foreach ($eia_parents as $parent):
	echo PHP_EOL . '/* ' . get_the_title( $parent_id ) . ' */' . PHP_EOL;
	echo '.parent-pageid-'.$parent['ID'].' #page-bread-crumbs a,' . PHP_EOL;
	echo '.parent-pageid-'.$parent['ID'].' #page-bread-crumbs span {color:'.$parent['color'].';}' . PHP_EOL. PHP_EOL;
endforeach;

?></style><?php } ?>

Leave a Reply

Skip to toolbar