Categories

A sample text widget

Etiam pulvinar consectetur dolor sed malesuada. Ut convallis euismod dolor nec pretium. Nunc ut tristique massa.

Nam sodales mi vitae dolor ullamcorper et vulputate enim accumsan. Morbi orci magna, tincidunt vitae molestie nec, molestie at mi. Nulla nulla lorem, suscipit in posuere in, interdum non magna.

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