Breadcrumbs element in header for CPT without archive pages

[designerken]

I have 3 CPTs that I have created and they have been setup with no archive page. I have created a landing page for each of them using Pro.

I have a breadcrumb element in my header, and when I land on a specific CPT single page, I see the title of the single CPT and the Home icon. I would like to inject the page title as well for the landing page that the CPT belongs to.

In the past I have overwriten the x_breadcrumbs function. But that plays no effect on this new element. Can you point me in a direction to add a custom link in the chain for the crumbs?

[ruenel]

Hello @designerken,

Thanks for writing in! Only the category or taxonomy can appear in the breadcrumb since you are using a custom post type. By default, you only have a Home -> single custom post type title. If you override the breadcrumb, you can display the taxonomy or category like this, Home > Taxonomy/Category > Single custom post type title.

Regretfully if you have created a landing page for each custom post type, you will have to modify the breadcrumb override and use a custom link. Perhaps, you can have a condition is_singular({CPT}) in your override function that determines if the page is a single custom post type or not. Something like this:

If  Is Singular CPT 1
      Then add your custom link 1
EndIf

If  Is Singular CPT 2
      Then add your custom link 2
EndIf

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[designerken]

@ruenel

Yes this is what I am trying to accomplish. Since we are not using the CPTs with an archive page it wont show it. We created a page that uses looper/consumer to show those. but we want to have that page in the crumbs visible.

I started as you said using if/then statements. This below will output the link before the HOME icon in the crumbs. How do I get it to output between the icon and the singular page title I am on?

function my_custom_breadcrumbs( $crumbs, $args ) {
$home_link      = home_url();
$page_title     = get_the_title();
  
// Custom Post Type Attorneys  
if ( is_singular( 'attorneys' ) ) {
$attorney_url   = $home_link .'/attorneys';
$attorney_title = 'Attorneys' ;
$attorney_link  = '<a href="'. $attorney_url . '">' . $attorney_title . '</a>';

echo $attorney_link;
 
// Custom Post Type Practice Areas   
} elseif ( is_singular( 'practice_areas' ) ) {
$practicearea_url   = $home_link .'/practice-areas';
$practicearea_title = 'Practice Areas' ;
$practicearea_link  = '<a href="'. $practicearea_url .'">' . $practicearea_title . '</a>';

echo $practicearea_link;
}    

return $crumbs;

}

add_filter( 'x_breadcrumbs_data', 'my_custom_breadcrumbs', 10, 2 );

[tristup]

Hi @designerken,

I have checked your code and didn’t find any problem in it. Can you please share the URL of your website along with the following details for further investigations.

– WordPress Site URL & Login URL
– Any of the Single CPT URL where you are having this issue.
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[designerken]

@tristup

Thanks for confirming there is nothing wrong with the code necessarily.

Before I share any credentials maybe you can confirm a couple things and that by adding the code it will place the link inline with the breadcrumbs? I think that $crumbs in and array() correct? If so then doing it this way wont add the link inline it will just output it before like it is now.

As you can see the link is output on the front end. However it is before the Home icon. See example, the link “Practice Area” needs to go after the home icon.

Here is the HTML output (Yes I realize I will need to edit my original code to output as a <li> list item to match the rest of the code.

So the question is how do I insert this link to my Cornerstone Page if the CPT is not using an archive page.
Home > Cornerstone Page > Single CPT Page

[marc_a]

Hi @designerken,

Base on your given code and result, it will just add a new item but not really override the default one. Customizing breadcrumbs is a complex coding but if you want to have a simple solution, please follow the steps below.

First Solution:
Instead of inserting the CPT title after the home icon, I suggest that you hide the default breadcrumbs by using display: none; in CSS. Then create your own breadcrumbs, so you need to re-structure your HTML to have the same output with the breadcrumbs.

Second Solution:
If you don’t want to hide the breadcrumbs due to HTML DOM issues, I suggest instead create your own breadcrumbs using a shortcode. See the example code below:

Note: This will require a layout builder to make it work because you are going to add the shortcode inside the text element.

function my_custom_breadcrumbs() {
$home_link      = home_url();
$page_title     = get_the_title();
  
// Custom Post Type Practice Area
if ( is_singular( 'practice-areas' ) ) {
$attorney_url   = $home_link .'/practice-areas';
$attorney_title = 'Practice Areas' ;
$attorney_link  = '<a href="'. $attorney_url . '">' . $attorney_title . '</a>';

echo $attorney_link.'<span class="x-crumbs-delimiter">→</span>'. $page_title;
	
}
}

add_shortcode( 'x_breadcrumbs_data', 'my_custom_breadcrumbs')

Then in your layout builder, you should call this function [x_breadcrumbs_data]

Please note that providing custom code is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[designerken]

@marc_a

Thanks for those suggestions. I do think I might have a slightly better one.
In the past we were not using the header builder but modified the integrity stack and overwrote the breadcrumbs.php file with the x_breadcrumbs() function in our functions.php file.

/pro/framework/functions/global/breadcrumbs.php

What if I create a shortcode that simply outputs this content?

// Shortcode to add breadcrumbs to Header Builder
function my_breadcrumbs( ) {
    $breadcrumbs_on = x_get_option( 'x_breadcrumb_display' );
    if ( $breadcrumbs_on == '1' ) :
        $breadcrumbs = x_breadcrumbs();
    endif;
    return $breadcrumbs;
}
add_shortcode( 'breadcrumbs', 'my_breadcrumbs');

So I did this…And the output on the front end is correct in terms of the correct links and overrides for the links to the pages.

However now the output is not in the Raw Content area for the Row setup to contain the breadcrumbs. Instead it is placing the breadcrumbs at the top of the page. Is that do to the echo commands in x_breadcrumbs() function?

On the front end it is not redering in the correct location…

In the builder is looks like it will work…

[ruenel]

Hello @designerken,

Please take this old thread as a guide:

• Pro-Child: Breadcrumbs with category -> Where is breadcrumbs.php?

This means that your code should be something like:

function my_custom_breadcrumbs( $crumbs, $args ) {
   $home_link      = home_url();
   $page_title     = get_the_title();
     
   // Custom Post Type Attorneys  
   if ( is_singular( 'attorneys' ) ) {
   	$crumbs[]['url']   = $home_link .'/attorneys';
   	$crumbs[]['label'] = 'Attorneys' ;
    
   // Custom Post Type Practice Areas   
   } elseif ( is_singular( 'practice_areas' ) ) {
   	$crumbs[]['url']   = $home_link .'/practice-areas';
   	$crumbs[]['label'] = 'Practice Areas' ;

   }    

   return $crumbs;

}

add_filter( 'x_breadcrumbs_data', 'my_custom_breadcrumbs', 10, 2 );

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Kindly let us know how it goes.

[designerken]

@ruenel

Thanks for you post. I believe you are on to something with the code but there are issues.

As you can see from the screen shot below, The words “Practice Areas” are at the end and still not after the Home link. There is an odd space added that looks like a missing link between the delineators. A look at the HTML code adds an additional <li> element in that spot.

[ruenel]

Hello @designerken,

You can also check this thread to swap the placements of the breadcrumb items:

• Breadcrumbs adding category and blog page home plus more

Then you’ll be having something like this:

If  Is Singular CPT 1
      Declare a CPT array
      Set the URL for CPT 1 in the array
      Set the URL for CPT 1 in the array
      Remove a portion of the breadcrumbs array and replace it with the CPT array using the array_splice() function
EndIf

The array_splice() function is needed to modify the order of the breadcrumbs array. The resulting modified code based on your original code would like be:

function my_custom_breadcrumbs( $crumbs, $args ) {
   $home_link      = home_url();
   $page_title     = get_the_title();

  if ( is_singular( 'attorneys' ) ) {

	$home_link      = home_url();
   	$page_title     = get_the_title();
	
	$cpt_array = array();
	$cpt_array[1]['label'] = 'Attorneys' ;
	$cpt_array[1]['url'] = $home_link .'/attorneys/';

	array_splice($crumbs, 1, 0, $cpt_array);

  }
   return $crumbs;

}

add_filter( 'x_breadcrumbs_data', 'my_custom_breadcrumbs', 10, 2 );

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this makes sense.

[designerken]

@ruenel

That makes more sense now array_splice() was the key. I have tweaked the code to be less repetitive, and believe I have a working version now.

function my_custom_breadcrumbs( $crumbs, $args ) {
   $home_link   = home_url();
   $cpt_array   = array();
     
  // Custom Post Type Attorneys  
  if ( is_singular( 'attorneys' ) ) {
    $cpt_array[1]['url'] = $home_link .'/attorneys/';
    $cpt_array[1]['label'] = 'Attorneys' ;

    array_splice($crumbs, 1, 0, $cpt_array);
}
 return $crumbs;
}
add_filter( 'x_breadcrumbs_data', 'my_custom_breadcrumbs', 10, 2 );

Thanks for helping get this sorted out.

[ruenel]

You are most welcome, @designerken!
If you need anything else we can help you with, don’t hesitate to open another thread.