Move breadcrumb above main

Hello, I want to move the breadcrumb above the main element.

Inside my functions.php:

// Move breadcrumb above main
beans_add_smart_action( 'beans_header_after_markup', 'j0e_move_breadcrumb' );

function j0e_move_breadcrumb() {
 echo beans_open_markup( 'j0e_fullwidth', 'div', array( 'class' => 'j0e_fullwidth' ) );
    echo beans_open_markup( 'j0e_before_breadcrumb', 'div', array( 'class' => 'uk-container j0e_breadcrumb' ) );
      beans_modify_action_hook( 'beans_breadcrumb', 'j0e_before_breadcrumb_append_markup' );
    echo beans_close_markup( 'j0e_before_breadcrumb', 'div' );
  echo beans_close_markup( 'j0e_fullwidth', 'div' );
}

Inside my style.less:

.j0e_fullwidth {
  background-color: #FCFCFC;
  border-top: 1px solid #EDEDED;
  border-bottom: 1px solid #EDEDED;
}
.j0e_breadcrumb {
 margin-top: 15px;
 margin-left: auto;
    margin-right: auto;
}

Its working and looking like I want. (see https://test.j0e.org/?p=1) But I like to know now, if it was the right way, or if there is a better way? And is it possbile to set a string inside the breadcrumb for the homepage? That would be a good idea, because the standard theme misses a H1 on the homepage.

thanks

Hi Jochen,

Great to see you are starting to understand Beans well, great job on that 🙂 I think there is an easier approach which is the following:

beans_modify_action( 'beans_breadcrumb', 'beans_header_after_markup', 'example_breadcrumb' );

function example_breadcrumb() {

  ?>
  <div class="j0e-breadcrumb">
    <div class="uk-container uk-container-center">
      <?php echo beans_breadcrumb(); ?>
   </div>
  </div>
  <?php

}

Then style it as such:

.j0e-breadcrumb {
    padding-top: 15px;
    background-color: #FCFCFC;
    border-top: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
}

If you look at the PHP, we use the function beans_modify_action which allows us to modify the hook and the callback in the same time. Then since we override the default callback, we add our wrapping divs and call beans_breadcrumb() which outputs the breadcrumb. Cool huh?

I would like to take this opportunity to show another method using beans_wrap_markup(). Here we go:

// Move the breadcrumb below the header.
beans_modify_action_hook( 'beans_breadcrumb', 'beans_header_after_markup' );

// Wrap the breadcrumb, the order matters here.
beans_wrap_markup( 'j0e-breadcrumb-container', 'j0e-breadcrumb', 'div', array( 'class' => 'j0e-breadcrumb' ) );
beans_wrap_markup( 'beans_breadcrumb', 'j0e-breadcrumb-container', 'div', array( 'class' => 'uk-container uk-container-center' ) );

The order matters here so you have to be careful with that. The last line wraps the breadcrumb and adds the container. The second last line use the added container and add the extra wrapping div.

Hope that helps,

Ahh, I was sure that there is a more elegant way 🙂

I have the next question. How can I add a vertical line/divider in the middle between content and sidebar? Is there an easyer way as to change all margins and paddings?

Again about the H1 tag on the homepage. For propper SEO, there should be a H1 on the homepage, with the blog title or the main keyword for the blog.

Hey Jochen,

For your divider, border don't work well in this case because it isn't very flexible if other elements are added on the page. Here is the approach I would take (snippet below goes in your child theme functions.php:

beans_add_attribute( 'beans_main', 'class', 'uk-nbfc' );
beans_add_attribute( 'beans_primary', 'class', 'uk-position-relative' );

add_action( 'beans_primary_append_markup', 'example_vertical_divider' );

function example_vertical_divider() {

 ?><div class="example-vertical-divider uk-hidden-small"></div><?php

}

Then in your child theme style.less you can add the following snippet:

.example-vertical-divider {
 background-color: #bbb;
 position: absolute;
 right: -(@grid-gutter-large-horizontal / 2 );
 width: 1px;
 height: 10000px;
  display: block;
 top: -500px;
}

@media (max-width: @breakpoint-xlarge) {

 .example-vertical-divider {
   right: -(@grid-gutter-horizontal / 2 );
 }

}

Regarding the markup In the blog index, post title are h2 on the blog index and h1 on the single view. You can modify any markup on the page using the beans_modify_markup() function.

For example if you wanted to make the site branding an h1 you could do it as such:

beans_modify_markup( 'beans_site_branding', 'h1' );

Hope that helps,