Wordpress : Create breadcrumb style link using get_post_type_archive_link

1
votes

I am trying to create a breadcrumb style link back to the archive/feed page for each of my custom post types, for a magazine style website, preferably without having to make a separate template for each post type as there are a few. (I'm also hoping to be able to use the same breadcrumb style link on my main feed in a featured posts kind of way. EG above each H1 of each featured post, so that if somebody clicked fashion instead of the H1 it would take them through to that archive page, as another way of browsing the site as opposed to having to use the top level menu nav.)

Using the following:

$postType = get_post_type_object(get_post_type()); 
if ($postType) { echo ''; echo esc_html($postType->labels->name); echo ''; } 
the_title('', '');

Stackoverflow has stripped the HTML parts from the above code, not sure what I'm doing wrong there

It is correctly pulling and displaying the name of the post type, eg 'Fashion', however the link returned is for the current post, not the feed page.

has_archive and hierarchical are both set to true when creating post type and I've updated permalinks. Anybody have a solution?

2
wordpresswordpress-themingcustom-post-typebreadcrumbs

2 Answers

1
votes

So I had a related problem while back and because I despise plugins I decided to make my own breadcrumb.

Instead of going full on php, I went the js road. The breadcrumb is automatically generated based on the user current url. Which is way more efficient than building it the other way around.

Container to add to your theme, wherever:

<ol id="bread"></ol>

Script to enqueue:

var pathname = location.pathname;
if (((bread = []), pathname.endsWith("/"))) var crumbs = pathname.split("/").slice(1, -1);
else crumbs = pathname.split("/").slice(1);
for (crumb = 0; crumb < crumbs.length; crumb++) {
    var url = location.href.split(crumbs[crumb])[0];
    if (crumbs[crumb].length > 35) var short = crumbs[crumb].replace(/-/g, " ").substring(0, 35) + "[...]";
    else short = crumbs[crumb].replace(/-/g, " ");
    bread.push('<li style="display:inline;padding:0 5px;"><a href="' + url + crumbs[crumb] + '">' + short + "</a></li>");
}
(document.getElementById("bread").innerHTML = bread.join(">")),
    (document.getElementById("bread").lastChild.style.pointerEvents = "none"),
    (document.getElementById("bread").lastChild.firstElementChild.style.textDecoration = "none"),
    (document.getElementById("bread").lastChild.firstElementChild.style.color = "inherit");

The breadcrumb is unstyled beside display:inline;padding:0 5px; which display the list inline and can be easily modified.

You could probably also achieve the same behaviour in php.

0
votes

The way I achieved with PHP was

$postType = get_post_type_object(get_post_type());
if($postType) {
esc_html($postType->labels->link); echo esc_html($postType->labels->name);
}

I created an extra label within custom post types replicating the slug in order to spit out the URL correctly. I'm not sure why, but when I tried to echo the slug this way I got a critical error.

When originally searching for the answer I found quite a few posts about this, so while I'm not sure its the perfect solution to this problem, I hope this is helpful for anybody else looking.