How I added breadcrumbs to this site.
There are a lot of really good resources to find when creating a web site with using a Genesis WordPress theme. The following is the code and sites I followed to create the breadcrumbs that I use on this site.
Here is code that I added to the child theme functions file:
/* Breadcrumbs
*************************/
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {
$args['home'] = 'Home';
$args['sep'] = ' ';
$args['list_sep'] = ', '; // Genesis 1.5 and later
$args['prefix'] = '<div class="breadcrumb">';
$args['suffix'] = '</div>';
$args['heirarchial_attachments'] = true; // Genesis 1.5 and later
$args['heirarchial_categories'] = true; // Genesis 1.5 and later
$args['display'] = true;
$args['labels']['prefix'] = ' ';
$args['labels']['author'] = 'Archives for ';
$args['labels']['category'] = 'Section for '; // Genesis 1.6 and later
$args['labels']['tag'] = 'Archives for ';
$args['labels']['date'] = 'Archives for ';
$args['labels']['search'] = 'Search for ';
$args['labels']['tax'] = 'Archives for ';
$args['labels']['post_type'] = 'Archives for ';
$args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later
return $args;
}
//* Replace breadcrumbs "Home" with Dashicons Home Icon
add_filter ( 'genesis_home_crumb', 'youruniqueprefix_breadcrumb_home_link' ); // Genesis >= 1.5
function youruniqueprefix_breadcrumb_home_link( $crumb ) {
$crumb = '<a href="' . home_url() . '" title="' . get_bloginfo('name') . '"><i class="dashicons dashicons-admin-home"></i></a>';
return $crumb;
}
//* Loading Dashicons
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}In my style.css file I added the following code:
/* Breadcrumbs - Inspiration from:
https://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation
*/
/* Breadcrumb area */
.breadcrumb {
display: box;
overflow: hidden;
border: 1px thin #ccc;
/* box-shadow: 0 0 3px 1px #ccc; */
border-radius: 7px;
padding: 3px;
line-height: 30px;
margin: 7px 0 50px 0;
}
/* Dashicons css */
.dashicons-admin-home {
padding: 4px 0 0 5px;
}
.dashicons-facebook,
.menu-item-2430,
.dashicons-facebook:hover{
font-size: 25px;
color: #fff;
background: none !important;
}
/* Font awesome social icons */
#menu-item-2429 a:before{
color: #fff;
content: "\f082";
font-family: FontAwesome;
font-size: 22px;
padding-right: 5px;
}
/* Font awesome social icons */
#menu-item-2427 a:before{
color: #fff;
content: "\f082";
font-size: 16px;
font-family: FontAwesome;
padding-right: 10px;
}
/* Breadcrumb buttons */
.breadcrumb a {
color: white;
text-decoration: none;
display: block;
float: left;
position: relative;
line-height: 30px;
padding: 0 19px 0 40px;
background: #a3630e;
border-radius: 4px;
font-size: 0.85em;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 10px;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
border-radius: 0 5px 5px 0;
margin-right: 25px;
}
/* hover/active styles */
.breadcrumb a.active, .breadcrumb a:hover{
background: #f89a16;
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background: #f89a16;
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px; /*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 30px;
height: 30px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background: #a3630e;
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px #fff, 3px -3px 0 2px #ccc;
/* 5px - for rounded arrows and 50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
margin: 0 5px 1px 30px;
}
/*we dont need an arrow after the last link -- But I want it in anyway */
.breadcrumb a:last-child:after {
content: ;
box-shadow: 2px -4px 0 2px #fff, 3px -4px 0 2px #ccc;
margin: 0 5px 1px 30px;
}Resources:
https://clarknikdelpowell.com/blog/3-ways-to-use-icon-fonts-in-your-wordpress-theme-admin/
https://wpsites.net/web-design/change-breadcrumbs-in-genesis/
https://wpsites.net/web-design/adding-dashicons-in-wordpress/
https://melchoyce.github.io/dashicons/
