Breadcrumb like Battlefield 4 Website

Have you tried using Firebug or an equivalent tool?

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.

This isn’t programming, this is basically copying and pasting that can be achieved by using a browser developer tool like Firebug.

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?

It’s already build in, right click on the breadcrumband select “inspect element”.

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.

Sorry I don’t understand what it is you’re doing if you’re modifying a functions.php file.

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.

Just did that and can’t possibly see how I can obtain the source code for it, especially for the functions.php file.

So you don’t need to touch the functions.php file, you need to look at the CSS used on Battlefield and then apply it to your source code for your breadcrumb.

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?

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

Yes

so I can just basically steal theirs and then analyse it to understand it as I change the colours, font’s etc?

Well yes, they don’t own the CSS they use. It’s all publicly accessible too.

See I’ve just recreated their breadcrumb https://www.cssdesk.com/qgn47

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

For what reason?

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.

And what is the HTML outcome of your breadcrumb PHP code?