Docs

[uptownenergy]

I’m wondering if it’s possible to insert additional links within the same <div> as the breadcrumbs?

For example, if I wanted to put a link to the shopping cart on the far right side of the page while the breadcrumbs stay on the far left.

[uptownenergy]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! It’s not usually possible but I can give you a tricky solution.
You can add this under Custom > CSS in the Customizer.

jQuery(document).ready(function($) {
  var html = '<div class="my-links"><a href="#">Your Link here</a></div>>';
  $( html ).appendTo('.x-breadcrumb-wrap > .x-container');
});

You can add the content within the div and style with the .my-links class.

Cheers!

[uptownenergy]

Hi Rupok,

Thanks for the code, but it doesn’t seem to be working. I copy/paste-ed it into my Global CSS Customizer but I don’t see the link. I’m assuming that the code “as-is” should at least create the text “Your Link here” with a hyperlink that doesn’t go anywhere, but I don’t see the text on the page.

-Mike

[Friech]

Hi Mike,

Lets do a different approach, please navigate to your child theme’s \x-child\framework\views\integrity\ directory. There create a file named _breadcrumbs.php and paste the code below on it.

<?php

// =============================================================================
// VIEWS/INTEGRITY/_BREADCRUMBS.PHP
// -----------------------------------------------------------------------------
// Breadcrumb output for Integrity.
// =============================================================================

?>

<?php if ( ! is_front_page() ) : ?>
  <?php if ( x_get_option( 'x_breadcrumb_display' ) == '1' ) : ?>

    <div class="x-breadcrumb-wrap">
      <div class="x-container max width">

        <?php x_breadcrumbs(); ?>

        <div class="custom-links right"><a href="#">Your Link here</a></div>

        <?php if ( is_single() || x_is_portfolio_item() ) : ?>
          <?php x_entry_navigation(); ?>
        <?php endif; ?>

      </div>
    </div>

  <?php endif; ?>
<?php endif; ?>

Replace the # with your actual link URL, and the text Your Link here with your actual text.

Hope it helps, Cheers!

[uptownenergy]

Hi Friech,

Thanks for the code, it worked like a charm and I can now put a text link next to the breadcrumb div.

Is there a way for me to use icons in the new custom link? I tried the [x_icon] shortcode, but it doesn’t seem to be interpreting that.

Thanks,
Mike

[Rue Nel]

Hello Mike,

Thanks for updating in! If you want to add a shortcode icon, please use this code instead:

<div class="custom-links right"><a href="#"><?php do_shortcode('[x_icon type="globe"]'); ?> Your Link here</a></div>

Hope this helps. Kindly let us know.

[uptownenergy]

Hi Rue Nel,

Unfortunately that code did not work. It is not displaying the icon.

-Mike

[Rupok]

Hi Mike,

Thanks for writing back. It should work fine. Can you make sure your whole code looks like this? :

<?php

// =============================================================================
// VIEWS/INTEGRITY/_BREADCRUMBS.PHP
// -----------------------------------------------------------------------------
// Breadcrumb output for Integrity.
// =============================================================================

?>

<?php if ( ! is_front_page() ) : ?>
  <?php if ( x_get_option( 'x_breadcrumb_display' ) == '1' ) : ?>

    <div class="x-breadcrumb-wrap">
      <div class="x-container max width">

        <?php x_breadcrumbs(); ?>
        <div class="custom-links right"><a href="#"><?php do_shortcode('[x_icon type="globe"]'); ?> Your Link here</a></div>

        <?php if ( is_single() || x_is_portfolio_item() ) : ?>
          <?php x_entry_navigation(); ?>
        <?php endif; ?>

      </div>
    </div>

  <?php endif; ?>
<?php endif; ?>

If it still doesn’t work, you can try this? :

<?php

// =============================================================================
// VIEWS/INTEGRITY/_BREADCRUMBS.PHP
// -----------------------------------------------------------------------------
// Breadcrumb output for Integrity.
// =============================================================================

?>

<?php if ( ! is_front_page() ) : ?>
  <?php if ( x_get_option( 'x_breadcrumb_display' ) == '1' ) : ?>

    <div class="x-breadcrumb-wrap">
      <div class="x-container max width">

        <?php x_breadcrumbs(); ?>
        <div class="custom-links right"><a href="#"><i class="x-icon x-icon-globe" data-x-icon="" aria-hidden="true"></i> Your Link here</a></div>

        <?php if ( is_single() || x_is_portfolio_item() ) : ?>
          <?php x_entry_navigation(); ?>
        <?php endif; ?>

      </div>
    </div>

  <?php endif; ?>
<?php endif; ?>

Let us know how it goes.

[uptownenergy]

Hi Rupok,

The second piece of code did the trick! How do I change the icon though? I tried changing x-icon-globe to x-icon-shopping_cart, but the globe icon remains.

Thanks,
Mike

[Rupok]

Hi Mike,

Glad to hear that. Let’s use this to use shopping cart icon :

<i class="x-icon x-icon-shopping-cart" data-x-icon="" aria-hidden="true"></i>

Cheers!

[uptownenergy]

Hi Rupok,

That new entry did the job. Is there some data in the little square icon? Whenever I tried just modifying the icon name (as mentioned before) it didn’t seem to change on its own.

Either way, I’m satisfied with the results. Thanks again for the help.

-Mike

[Rupok]

Hi Mike,

Yes that’s attribute and it’s necessary. For your future reference, here’s how I did it. Go to the Icons shortcode page – http://demo.theme.co/integrity-1/shortcodes/icons/

Then right click on the icon you want and click “Inspect Element”. Then “Copy HTML” – http://prntscr.com/dzddzu

Cheers!

[Author]

Posts