Breadcrumb like Battlefield 4 Website

I’m trying to avoid using a plugin of any kind for this. Basically I’m building a barebone theme that I can use as a base for further development, enhanced theming, etc, which I can use over and over again.

Didn’t realise how annoying programming can be, but I’ve done well on my own up to this point and would love to programme the site without the use of plugins just so I can learn everything I can really.

Oh, sorry I thought it was a plugin. Again, fairly new this sort of thing. I am developing in Chrome, I’m assuming it is also available for that?

Just did that and can’t possibly see how I can obtain the source code for it, especially for the functions.php file. I’ve basically written the thing already in the functions.php, but I’m not that good when it comes to css.

Ok, basically I’ve written a function controller in the function.php for the breadcrumb as instructed by other websites and people on the internet from various tutorials. Now what I need to do is basically style the breadcrumb in the style.css file to get it looking nicer than the standard view I currently have.

Wait, so I can just write a breadcrumb php file and include that using the css for view?

Any idea on how to get the code from the BF4 website so I can just basically steal theirs and then analyse it to understand it as I change the colours, font’s etc?

The one you’ve written there wouldn’t work in wordpress, surely.

it’s not pulling post names or page names, etc. The purpose I want the breadcrumb to work for is to pull Post Names, etc.

This is what I’ve written in the function.php

function get_breadcrumb_navigation() {
$delimiter = ' ';
$home = get_bloginfo('name');
$before = '<span>';
$after = '</span>';
echo '<div id="breadcrumb">';
global $post;
$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '">' . 'Home' . '</a> ' . $delimiter . ' ';
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $before . '' . single_cat_title('', false) . '' . $after;
} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $before . '' . get_the_time('d') . '' . $after;
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo $before . '' . get_the_time('F') . '' . $after;
} elseif ( is_year() ) {
echo $before . '' . get_the_time('Y') . '' . $after;
} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a>' . $delimiter . ' ';
echo $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
echo ' ' . get_category_parents($cat, TRUE, ' ' . $delimiter . ' ') . ' ';
echo $before . '' . get_the_title() . '' . $after;
}
} elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif ( is_attachment() ) {
$parent_id  = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id    = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ' ' . $crumb . ' ' . $delimiter . ' ';
echo $before . '' . get_the_title() . '' . $after;
} elseif ( is_page() && !$post->post_parent ) {
echo $before . '' . get_the_title() . '' . $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id  = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id    = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ' ' . $crumb . ' ' . $delimiter . ' ';
echo $before . '' . get_the_title() . '' . $after;
} elseif ( is_search() ) {
echo $before . 'Search results for "' . get_search_query() . '"' . $after;
} elseif ( is_tag() ) {
echo $before . '' . single_tag_title('', false) . '' . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . '' . $userdata->display_name . '' . $after;
} elseif ( is_404() ) {
echo $before . '' . 'Error 404 not Found' . '&nbsp;' . $after;
}
if ( get_query_var('paged') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo ('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
echo '</div>';
}

Now the css I’ve pulled from the Battlefield website is

#breadcrumb{margin:0 0 5px 0;padding:0;list-style:none; margin-top: 114px;}
#breadcrumb li{margin-right:5px;}
#breadcrumb a{font-size:12px;line-height:24px;height:24px;}
#breadcrumb a:before,
#breadcrumb a:after{border-width:12px 0 12px 7px;}
#breadcrumb a:before{left:-7px;}
#breadcrumb a:after{right:-7px;}
#breadcrumb li a{font-family:arial,sans-serif;}
#breadcrumb li{display:inline-block;margin:0 7px 0 0;}
#breadcrumb li a{display:block;position:relative;padding:0 12px 0 10px;cursor:pointer;background:rgba(0,0,0,0.5);text-decoration:none;}
#breadcrumb li a:before,
#breadcrumb li a:after{content:" ";position:absolute;top:0;background:transparent;border-style:solid;height:0;width:0;border-width:15px 0 15px 9px;}
#breadcrumb li a:before{left:-9px;border-color:rgba(0,0,0,0.5) transparent;}
#breadcrumb li a:after{right:-9px;border-color:transparent transparent transparent rgba(0,0,0,0.5);}
#breadcrumb li:first-of-type a{background:rgba(0,0,0,0.5);padding-left:16px;}
#breadcrumb li:first-of-type a:before{display:none;}
#breadcrumb li:first-of-type a:after{border-color:transparent transparent transparent rgba(0,0,0,0.5);}
#breadcrumb li:hover a,
#breadcrumb li:active a{background:rgba(0,0,0,0.7);}
#breadcrumb li:hover a:before,
#breadcrumb li:active a:before{border-color:rgba(0,0,0,0.7) transparent;}
#breadcrumb li:hover a:after,
#breadcrumb li:active a:after{border-color:transparent transparent transparent rgba(0,0,0,0.7);}
#breadcrumb li:hover:first-of-type a:before,
#breadcrumb li:active:first-of-type a:before{display:none;}
#breadcrumb li:hover:first-of-type a:after,
#breadcrumb li:active:first-of-type a:after{border-color:transparent transparent transparent rgba(0,0,0,0.7);}
#breadcrumb li:last-of-type a{cursor:default;background:rgba(0,0,0,0.6);}
#breadcrumb li:last-of-type a:before{border-color:rgba(0,0,0,0.6) transparent;}
#breadcrumb li:last-of-type a:after{border-color:transparent transparent transparent rgba(0,0,0,0.6);}
#breadcrumb li:last-of-type:first-of-type a:before{display:none;}
#breadcrumb li:last-of-type:first-of-type a:after{border-color:transparent transparent transparent rgba(0,0,0,0.6);}

For some reason it is not displaying as it does in the Battlefield Website.

Example of the breadcrumb in the battlefield website

that link shows you the breadcrumb that I’d like to use in the wordpress theme I’m building, but appears I’ve reached my limit in programming as I can’t figure the damned thing out.