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; }
Inspiration:
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/
Hello! I do not speak English, if you excuse me. I have a question:
How to add a new span tag and automatic class for span like screenshot. Thank you.
Screenshot: https://media.wpwow.ru/wp-content/uploads/2015/07/ffsdfdsf.jpg
Hi
If you can post directly at the StudioPress forums: https://www.studiopress.com/forums/ that would help.
Good luck!