Add H1 title to archive pages

team4animation · October 25, 2017, 7:51am

Hi There,

I want to add a <h1> tag to all archive pages. For example the author name or the category name. How could I do this?

Thanks a lot!

thai · October 18, 2017, 2:06pm

Hi There,

There is a landmark header in the archive pages:

You can change that title and subtitle by editing your categories:

Regards!

team4animation · October 23, 2017, 8:20pm

Hi there,

Thanks for your help. I don’t see the effect (https://www.zomerjobs.nl/blog/category/2014/). Could hou see what’s going wrong?

Thanks a lot!

christopher · October 25, 2017, 8:01am

Hi there,

If you are using the Icon stack you do not have that option at hand. You will need to change the stack to something else.

Adding the title to the Blog pages of the icon stack is considered as a customization task and outside of our support scope. But we will give the suggestion on how to do so, but the implementation will be on your shoulders.

You will need to install the child theme for this task.

Then you will need to use the X hook system in the functions.php file of your child theme to add the h1 tag as a title on blog pages:

// Adding Landmark header to Icon Stack Blog Page
// =============================================================================

add_action('x_after_view_icon_wp-header', 'header_landmark_icon');

function header_landmark_icon() {
  if ( is_home() ) : ?>
    <header class="x-header-landmark x-container max width">
      <h1 class="h-landmark"><span>THE BLOG</span></h1>
      <p class="p-landmark-sub"><span>Welcome to our little corner of the Internet. Kick your feet up and stay a while.</span></p>
    </header>
  <?php endif;
}

After that you will need to add additional CSS code to X > Launch > Options > CSS to make the title look like decent:

.x-header-landmark {
  margin: 34px auto 0;
  text-align: center;
}

.h-landmark {
  overflow: hidden;
  margin: 0;
  padding-bottom: 8px;
  letter-spacing: -3px;
  line-height: 1;
}

.h-landmark span {
  display: inline-block;
  position: relative;
}

.h-landmark span:before, .h-landmark span:after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: 275%;
  display: block;
  background-color: #e1e1e1;
  background-color: rgba(0,0,0,0.1);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.795);
}

.h-landmark span:before {
  right: 100%;
  margin-right: 0.5em;
}

.h-landmark span:after {
  left: 100%;
  margin-left: 0.5em;
}

.p-landmark-sub {
  margin: 5px 0 0;
  padding: 0 5%;
  font-size: 24px;
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing: -1px;
  line-height: 1.3;
}

You are welcomed to read further regarding the customization of the theme:

https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208

Thank you.

team4animation · October 25, 2017, 11:36am

Hi There,

Thanks for your answer. I’m not using the Icon stack, but the ETHOS stack. Could you help me with that?

Thanks a lot!

rad · October 27, 2017, 1:28am

Hi there,

You’re on pro and there is no landmark there. You’ll have to create a header in the builder and assign it globally. Example, please add this code to your child theme’s functions.php

add_shortcode('ethos_landmark_display', 'ethos_landmark_display');

function ethos_landmark_display( $atts, $content ) {

$disable_page_title = get_post_meta( get_the_ID(), '_x_entry_disable_page_title', true );

?>

<?php if ( ! x_is_blank( 1 ) && ! x_is_blank( 2 ) && ! x_is_blank( 4 ) && ! x_is_blank( 5 ) ) : ?>
  <?php if ( is_page() && $disable_page_title == 'on' ) : ?>
  <?php else : ?>

    <?php if ( x_is_shop() || x_is_product() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo x_get_option( 'x_ethos_shop_title' ); ?></span></h1>
      </header>

    <?php elseif ( x_is_bbpress() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo get_the_title(); ?></span></h1>
      </header>

    <?php elseif ( x_is_buddypress() ) : ?>
      <?php if ( x_buddypress_is_component_with_landmark_header() ) : ?>

        <header class="x-header-landmark x-container max width">
          <h1 class="h-landmark"><span><?php echo x_buddypress_get_the_title(); ?></span></h1>
        </header>

      <?php endif; ?>
    <?php elseif ( is_page() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark entry-title"><span><?php the_title(); ?></span></h1>
      </header>

    <?php elseif ( x_is_portfolio_item() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php the_title(); ?></span></h1>
      </header>

    <?php elseif ( is_search() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Search Results', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : ?>

      <?php

      $meta  = x_get_taxonomy_meta();
      $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' );

      ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>
      </header>

    <?php elseif ( is_tag() || x_is_portfolio_tag() || x_is_product_tag() ) : ?>

      <?php

      $meta  = x_get_taxonomy_meta();
      $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Tag Archive', '__x__' );

      ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo $title ?></span></h1>
      </header>

    <?php elseif ( is_404() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Oops!', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_year() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Post Archive by Year', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_month() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Post Archive by Month', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( is_day() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php _e( 'Post Archive by Day', '__x__' ); ?></span></h1>
      </header>

    <?php elseif ( x_is_portfolio() ) : ?>

      <header class="x-header-landmark x-container max width">
        <h1 class="h-landmark"><span><?php echo x_get_option( 'x_portfolio_title' ); ?></span></h1>
      </header>

    <?php endif; ?>

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

}

Then in your header builder and add text element, then within text element add [ethos_landmark_display]. It will then display the landmark. A full-width header bar is fit to this landmark.

Thanks!

team4animation · October 30, 2017, 6:44pm

Hi there,

Okay, it works… But this is not really beautifull on the other pages (http://prntscr.com/h410z0)

Do you have a workaround for that?

nabeel · October 31, 2017, 4:02am

Hi again,

Regretfully I am not entirely certain what it is you would like to accomplish based on the information given in your above post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

team4animation · October 31, 2017, 6:57am

Hi there,

What I want is just a landmark header above archive pages. Just a title of for example a blog category in h1 tags.

Like:

<?php elseif ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : ?>

  <?php

  $meta  = x_get_taxonomy_meta();
  $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' );

  ?>
  <header class="x-header-landmark x-container max width">
    <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>
  </header>

I don’t want to include a shortcode in the header in the builder, because it will return an empty box on normal pages. I just want to give archive pages a landmark / title.

Thanks!

rad · November 1, 2017, 11:33pm

Hi there,

You can simply hide that bar for other pages, example, let’s say you added the shortcode in your header then simply add header-bar-landmark to your header bar’s Class input under Customize section. Then add this CSS to your header’s custom CSS section.

body:not(.archive) .header-bar-landmark {
display: none;
}

If you still wish to do it through template, then simply clone your /x/framework/views/{SELECTED STACK}/wp-index.php to your child theme (eg. /x-child/framework/views/{SELECTED STACK}/wp-index.php)

Then add your code just below the line <?php get_header(); ?>

<?php 

  if ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : 
 
  $meta  = x_get_taxonomy_meta();
  $title = ( $meta['archive-title'] != '' ) ? $meta['archive-title'] : __( 'Category Archive', '__x__' );

 ?>
  <header class="x-header-landmark x-container max width">
    <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>
  </header>

<?php endif; ?>

Hope this helps.

system · November 11, 2017, 11:32pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.