Category and Events archive page and post customization

Support
#1

Category and Events archive page and post customization…

I’m read a number of articles related to being able to customize archive/news pages and I wonder if you could synopsize.

What I want to do is to be able to add a blue header with page title like on http://03fca07.netsolhost.com/wordpress1/contact/
Also maybe a header image like above.

Currently archive page is: http://03fca07.netsolhost.com/wordpress1/category/outside-careers-news/

What is the best way to go about this? thank you.

Mike

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up.

For support, all questions are to be posted in the Themeco category or by clicking + Support. The other categories are for discussion with fellow Apex members. Please keep this in mind in the future. Thank-you!

How support works.

#3

Hello Mike,

Thanks for writing in! What you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/INTEGRITY/_LANDMARK-HEADER.PHP
// -----------------------------------------------------------------------------
// Handles content output of large headers for key pages such as the blog or
// search results.
// =============================================================================

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

?>

<?php if ( is_home() && x_get_option( 'x_integrity_blog_header_enable' ) == '1' ) : ?>

  <header class="x-header-landmark x-container max width">
    <h1 class="h-landmark"><span><?php echo x_get_option( 'x_integrity_blog_title' ); ?></span></h1>
    <p class="p-landmark-sub"><span><?php echo x_get_option( 'x_integrity_blog_subtitle' ); ?></span></p>
  </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>
    <p class="p-landmark-sub"><span><?php _e( "Below you'll see everything we could locate for your search of ", '__x__' ); echo '<strong>&ldquo;'; the_search_query(); echo '&rdquo;</strong>'; ?></span></p>
  </header>

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

  <?php

  $meta     = x_get_taxonomy_meta();
  $title    = ( $meta['archive-title']    != '' ) ? $meta['archive-title']    : __( 'Category Archive', '__x__' );
  $subtitle = ( $meta['archive-subtitle'] != '' ) ? $meta['archive-subtitle'] : __( "Below you'll find a list of all posts that have been categorized as ", '__x__' ) . '<strong>&ldquo;' . single_cat_title( '', false ) . '&rdquo;</strong>';

  ?>

  <div id="x-section-1" class="x-section bg-image" style="margin: 0px;padding: 380px 0px 0px; background-image: url(http://03fca07.netsolhost.com/wordpress1/wp-content/uploads/2017/05/treeback-lo.jpg); background-color: transparent;" data-x-element="section" data-x-params="{&quot;type&quot;:&quot;image&quot;,&quot;parallax&quot;:false}">
    <div class="x-container max width" style="margin: 0px auto;padding: 0px;">
      <div class="x-column x-sm x-1-1" style="padding: 0px;">&nbsp;</div>
    </div>
  </div>

  <div id="x-section-2" class="x-section" style="margin: 0px;padding: 0px 0px 15px;border-bottom: 1px #666 solid;border-top: 1px #666 solid; background-color: hsl(219, 63%, 68%);">
    <div class="x-container max width" style="margin: 0px auto;padding: 0px;">
      <div class="x-column x-sm x-1-1" style="padding: 0px;">
        <h1 class="h-custom-headline cs-ta-center h1" style="color: hsl(0, 0%, 100%);margin-top:20px;"><span><?php echo $title ?></span></h1>
      </div>
    </div>
  </div>


  <header class="x-header-landmark x-container max width">
    <p class="p-landmark-sub"><span><?php echo $subtitle ?></span></p>
  </header>

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

  <?php

  $meta     = x_get_taxonomy_meta();
  $title    = ( $meta['archive-title']    != '' ) ? $meta['archive-title']    : __( 'Category Archive', '__x__' );
  $subtitle = ( $meta['archive-subtitle'] != '' ) ? $meta['archive-subtitle'] : __( "Below you'll find a list of all items that have been categorized as ", '__x__' ) . '<strong>&ldquo;' . single_cat_title( '', false ) . '&rdquo;</strong>';

  ?>

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

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

  <?php

  $meta     = x_get_taxonomy_meta();
  $title    = ( $meta['archive-title']    != '' ) ? $meta['archive-title']    : __( 'Tag Archive', '__x__' );
  $subtitle = ( $meta['archive-subtitle'] != '' ) ? $meta['archive-subtitle'] : __( "Below you'll find a list of all posts that have been tagged as ", '__x__' ) . '<strong>&ldquo;' . single_tag_title( '', false ) . '&rdquo;</strong>';

  ?>

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

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

  <?php

  $meta     = x_get_taxonomy_meta();
  $title    = ( $meta['archive-title']    != '' ) ? $meta['archive-title']    : __( 'Tag Archive', '__x__' );
  $subtitle = ( $meta['archive-subtitle'] != '' ) ? $meta['archive-subtitle'] : __( "Below you'll find a list of all items that have been tagged as ", '__x__' ) . '<strong>&ldquo;' . single_tag_title( '', false ) . '&rdquo;</strong>';

  ?>

  <header class="x-header-landmark x-container max width">
    <h1 class="h-landmark"><span><?php echo $title; ?></span></h1>
    <p class="p-landmark-sub"><span><?php echo $subtitle; ?></span></p>
  </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>
    <p class="p-landmark-sub"><span><?php _e( "You blew up the Internet. ", '__x__' ); ?></span></p>
  </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>
    <p class="p-landmark-sub"><span><?php _e( "Below you'll find a list of all posts from ", '__x__' ); echo '<strong>'; echo get_the_date( 'Y' ); echo '</strong>'; ?></span></p>
  </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>
    <p class="p-landmark-sub"><span><?php _e( "Below you'll find a list of all posts from ", '__x__' ); echo '<strong>'; echo get_the_date( 'F, Y' ); echo '</strong>'; ?></span></p>
  </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>
    <p class="p-landmark-sub"><span><?php _e( "Below you'll find a list of all posts from ", '__x__' ); echo '<strong>'; echo get_the_date( 'F j, Y' ); echo '</strong>'; ?></span></p>
  </header>

<?php elseif ( x_is_portfolio() ) : ?>
  <?php if ( $disable_page_title != 'on' || $disable_filters != 'on' ) : ?>

    <header class="x-header-landmark x-container max width">
      <?php if ( $disable_page_title != 'on' ) : ?>
        <h1 class="h-landmark"><span><?php the_title(); ?></span></h1>
      <?php endif; ?>
      <?php x_portfolio_filters(); ?>
    </header>

  <?php endif; ?>
<?php elseif ( x_is_shop() && x_get_option( 'x_integrity_shop_header_enable' ) == '1' ) : ?>

  <header class="x-header-landmark x-container max width">
    <h1 class="h-landmark"><span><?php echo x_get_option( 'x_integrity_shop_title' ); ?></span></h1>
    <p class="p-landmark-sub"><span><?php echo x_get_option( 'x_integrity_shop_subtitle' ); ?></span></p>
  </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>
      <p class="p-landmark-sub"><span><?php echo x_buddypress_get_the_subtitle(); ?></span></p>
    </header>

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

3] Save the file named as _landmark-header.php
4] Upload this file to your server in the child theme’s folder /wp-content/themes/x-child/framework/legacy/cranium/headers/views/integrity/

Please let us know if this works out for you.

#4

Thank you for your help. The code you sent me works far as the “News” page but not the individual posts.

So yes to: http://03fca07.netsolhost.com/wordpress1/category/outside-careers-news/

but no to:

http://03fca07.netsolhost.com/wordpress1/2017/04/19/second-news-title/

suggestions? and again, thank you for your help.

Mike

#5

Hi there,

The code is working only for archive pages as you asked for on your original question.

For the single Posts, you already have Cornerstone at hand to add the image and title on each post item.

Simply go to X > Cornerstone and make sure it is available for Posts:

Then, go to the Posts and go to edit page of each post and add the code below using the Raw Content Element:

  <div class="x-section bg-image" style="margin: 0px;padding: 380px 0px 0px; background-image: url(http://03fca07.netsolhost.com/wordpress1/wp-content/uploads/2017/05/treeback-lo.jpg); background-color: transparent;" data-x-element="section" data-x-params="{&quot;type&quot;:&quot;image&quot;,&quot;parallax&quot;:false}">
    <div class="x-container max width" style="margin: 0px auto;padding: 0px;">
      <div class="x-column x-sm x-1-1" style="padding: 0px;">&nbsp;</div>
    </div>
  </div>

  <div  class="x-section" style="margin: 0px;padding: 0px 0px 15px;border-bottom: 1px #666 solid;border-top: 1px #666 solid; background-color: hsl(219, 63%, 68%);">
    <div class="x-container max width" style="margin: 0px auto;padding: 0px;">
      <div class="x-column x-sm x-1-1" style="padding: 0px;">
        <h1 class="h-custom-headline cs-ta-center h1" style="color: hsl(0, 0%, 100%);margin-top:20px;"><span>Title</span></h1>
      </div>
    </div>
  </div>

Thank you.

#6

Thank you very much for your help…

Getting close but some tweaks are needed. I could use some suggestions.

I added in that code you sent and page looks like this now:

http://03fca07.netsolhost.com/wordpress1/2017/04/19/second-news-title/

What do I need to do in order to get the heading to stretch across the entire page?

And post title ends up above the heading. Suggestions? I could make it static and add it to the header but I do need to have the title not be seen as it is.

Thank you,

Mike

#7

Hi Mike,

To stretch it accross the entire page, you need to select a No Container template under page attributes.

With regards to your title, you can add the code below in Customizer > Custom> Edit Global CSS to remove it.

.single-post .entry-header {
    dispaly:none;
}

Hope that helps.

#8

Hi Paul,

Thanks for getting back to me. These are posts so I am unable to set Page Attributes in Wordpress so full width is not going to work in this way. Suggestions?

Mike

#9

Hi There,

Please also add this CSS:

.single-post .x-container.max.width.offset {
    width: 100%;
    max-width: 100%;
}
#10

hi,

Thank you for helping me. I added the code in but it didn’t quite work. I pulled the raw code from above and just added a section but with same results. http://03fca07.netsolhost.com/wordpress1/2017/04/19/second-news-title/

What the issue seems to be in the container as in margins/padding. I can pass on the header image but would like the “News” title blue bar. How do I get that section to lose the margins and pull it up without having huge neg margins in the css? I have the section settings to marginless columns and the “Column container” setting is off.

If you need to have the user/pass to get into the site let me know if that will help. thanks

Mike

#11

Hello There,

Thanks for updating in! The section and row settings has no longer any padding or margins. The main container however is having a default top margin. To resolve this, you can make use of this code:

.x-container.offset,
.single .entry-content {
    margin-top: 0;
}

After adding that, you can totally ditch the negative margin in your section.

Hope this helps. Please let us know how it goes.

#12

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