Docs

[ImpossibleDiG]

Can I get the description to appear on the tag pages, exactly like what we did with the category pages?

For category page, see: http://possiblegirls.wpengine.com/category/movies-tv/
For tag page, see: http://possiblegirls.wpengine.com/tag/doctor-who/

Thanks! dig

[Christopher]

Hi there,

Please update existing code in _landmark-header.php to :

<?php

// =============================================================================
// VIEWS/ETHOS/_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 );

?>

<?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>
        <?php echo category_description(); ?>
      </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>
        <?php echo $description = tag_description(); ?>
      </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; ?>

Hope it helps.

[ImpossibleDiG]

Success!

Thanks SO much!

dig

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[ImpossibleDiG]

A few more questions. 🙂

1. Is there a way to reduce the gap between the title and the text on a page. For an example, see: http://possiblegirls.wpengine.com/about/
2. At the bottom of that page, I inserted an author box using a shortcode. Is there a way to add the email icon to that box, much like the social media icon functionality?
3. Is there a way for me to increase the size of the image in the author box?

Thanks! DiG

[Paul R]

Hi DiG,

1. You can add this under Custom > Edit Global CSS in the Customizer.

.x-container>.offset {
    margin: 0 auto;
}

2. You can add this in your child theme’s functions.php file.

  function x_shortcode_author_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'title'     => '',
    'email'     => '',
    'author_id' => ''
  ), $atts, 'x_author' ) );

  $id        = ( $id        != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $email     = ( $email     != '' ) ? '<a href="mailto:' . esc_attr( $email ) . '">'. esc_attr( $email ) .'</a>' : '';
  $class     = ( $class     != '' ) ? 'x-author-box cf ' . esc_attr( $class ) : 'x-author-box cf';
  $style     = ( $style     != '' ) ? 'style="' . $style . '"' : '';
  $title     = ( $title     != '' ) ? $title : __( 'About the Author', 'cornerstone' );
  $author_id = ( $author_id != '' ) ? $author_id : get_the_author_meta( 'ID' );

  $description  = get_the_author_meta( 'description', $author_id );
  $display_name = get_the_author_meta( 'display_name', $author_id );
  $facebook     = get_the_author_meta( 'facebook', $author_id );
  $twitter      = get_the_author_meta( 'twitter', $author_id );
  $googleplus   = get_the_author_meta( 'googleplus', $author_id );

  $facebook_output   = ( $facebook )   ? "<a href=\"{$facebook}\" class=\"x-author-social\" title=\"Visit the Facebook Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i> Facebook</a>" : '';
  $twitter_output    = ( $twitter )    ? "<a href=\"{$twitter}\" class=\"x-author-social\" title=\"Visit the Twitter Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i> Twitter</a>" : '';
  $googleplus_output = ( $googleplus ) ? "<a href=\"{$googleplus}\" class=\"x-author-social\" title=\"Visit the Google+ Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i> Google+</a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . "<h6 class=\"h-about-the-author\">{$title}</h6>"
            . get_avatar( $author_id, 180 )
            . '<div class="x-author-info">'
              . "<h4 class=\"h-author mtn\">{$display_name}</h4>"
                . $facebook_output
                . $twitter_output
                . $googleplus_output
              . "<p class=\"p-author mbn\">{$description}</p>"
              . "Email: ".$email
            . '</div>'
          . '</div>';

  return $output;
}

add_action('wp_head', 'update_x_shortcode_author_to_v2');

function update_x_shortcode_author_to_v2() {
  remove_shortcode( 'x_author', 'x_shortcode_author' );
  add_shortcode( 'x_author', 'x_shortcode_author_v2' );
}

Then add email to your author shortcode.

eg. [author title=”About the Author” email=”[email protected]”]

3. You can add this under Custom > Edit Global CSS in the Customizer.

.page .x-author-box .avatar {
   width:150px;
}

.page .x-author-box .x-author-info {
    margin-left: 170px;
}

You may change 150px and 170px to adjust the size.

Hope that helps

[ImpossibleDiG]

Thanks again for all the help!

1. Had the unfortunate side effect of reducing the space between the title field on posts and the site header/navigation. What I would like to do is reduce space between the page title and the page text field that makes up the bulk of the page. Please note that I only want to do that on pages, not on the index or on posts.

2. This didn’t seem to work for me.

3. Worked great, except when I narrow the browser to the narrowest width (mobile view), then the image/text formatting is off. Also, is there a way to carry through the changes here and in #2 for the author’s page? See: http://possiblegirls.wpengine.com/author/dig/

thanks! dig

[Rad]

Hi there,

1. Please change the suggested CSS to this,

.page .x-header-landmark {
padding-bottom: 0px !important;
}

2. Have you tried clearing your site’s cache? It’s hosted at WPEngine which usually cache the content. I can check that if you’ll provide your FTP login credentials too.

3. You may change it to this,

@media ( min-width: 980px ) {
.x-author-box .avatar {
   width:150px;
}

.x-author-box .x-author-info {
    margin-left: 170px;
}
}

Hope this helps.

[ImpossibleDiG]

This reply has been marked as private.

[Rad]

Hi there,

1. They are spaces from multiple elements, this time, you will have to add this CSS to reduce it. It’s currently set to 35px.

.page .x-container>.offset {
    margin: 10px auto;
}

2. In that case, please provide your FTP login credentials as well 🙂

Thanks!

[ImpossibleDiG]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates!

To change the color of the author box like on this page: http://possiblegirls.wpengine.com/author/dig/, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-author-box,
.site .x-author-box .h-about-the-author {
    border-color: red;
}

.site .x-author-box .h-about-the-author {
  color: red;
}

.site .x-author-box .h-author,
.site .x-author-box .p-author,
.site .x-author-box .p-author a {
  color: red;
}

Feel free to change the color to match your site preference.

The code is not working because your code is [author] and the actual custom shortcode is [x_author]. I have fixed and I change the code to this:

// Custom Author box info
// =============================================================================
function x_shortcode_author_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'        => '',
    'class'     => '',
    'style'     => '',
    'title'     => '',
    'email'     => '',
    'author_id' => ''
  ), $atts, 'x_author' ) );

  $id        = ( $id        != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class     = ( $class     != '' ) ? 'x-author-box cf ' . esc_attr( $class ) : 'x-author-box cf';
  $style     = ( $style     != '' ) ? 'style="' . $style . '"' : '';
  $title     = ( $title     != '' ) ? $title : __( 'About the Author', 'cornerstone' );
  $author_id = ( $author_id != '' ) ? $author_id : get_the_author_meta( 'ID' );
  
  $user_email = get_the_author_meta( 'user_email' );
  $email     = ( $email     != '' ) ? '<a href="mailto:' . esc_attr( $user_email ) . '">'. esc_attr( $user_email ) .'</a>' : '';

  $description  = get_the_author_meta( 'description', $author_id );
  $display_name = get_the_author_meta( 'display_name', $author_id );
  $facebook     = get_the_author_meta( 'facebook', $author_id );
  $twitter      = get_the_author_meta( 'twitter', $author_id );
  $googleplus   = get_the_author_meta( 'googleplus', $author_id );

  $facebook_output   = ( $facebook )   ? "<a href=\"{$facebook}\" class=\"x-author-social\" title=\"Visit the Facebook Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-facebook-square\" data-x-icon=\"\"></i> Facebook</a>" : '';
  $twitter_output    = ( $twitter )    ? "<a href=\"{$twitter}\" class=\"x-author-social\" title=\"Visit the Twitter Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-twitter-square\" data-x-icon=\"\"></i> Twitter</a>" : '';
  $googleplus_output = ( $googleplus ) ? "<a href=\"{$googleplus}\" class=\"x-author-social\" title=\"Visit the Google+ Profile for {$display_name}\" target=\"_blank\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"\"></i> Google+</a>" : '';

  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . "<h6 class=\"h-about-the-author\">{$title}</h6>"
            . get_avatar( $author_id, 180 )
            . '<div class="x-author-info">'
              . "<h4 class=\"h-author mtn\">{$display_name}</h4>"
                . $facebook_output
                . $twitter_output
                . $googleplus_output
              . "<p class=\"p-author mbn\">{$description}</p>"
              . "<i class=\"x-icon-envelope-o\" data-x-icon=\"\"></i> Email: ".$email
            . '</div>'
          . '</div>';

  return $output;
}

add_action('wp_head', 'update_x_shortcode_author_to_v2');

function update_x_shortcode_author_to_v2() {
  remove_shortcode( 'x_author', 'x_shortcode_author' );
  add_shortcode( 'x_author', 'x_shortcode_author_v2' );
}

// Show Author Box on Author Page
// =============================================================================

function add_author_meta() {
  if ( is_author() ) {
    $id = get_the_author_meta( 'ID' );
    echo do_shortcode('[x_author id="'.$id.'" email="true"]');
  }
}

add_action('x_before_view_global__index', 'add_author_meta');

If you need anything else we can help you with, please let us know.

[ImpossibleDiG]

Thanks so much!

I tweaked the color change to exactly what I wanted.

A few questions on the author’s box…

1. Can the email also show up on the short code version on the About page? http://possiblegirls.wpengine.com/author/dig/

2. Is there a way to use the same font size for the main body of text on both the short code and the author’s page? http://possiblegirls.wpengine.com/author/dig/

Thanks so much — you all have been SO helpful!!!

dig

[Rad]

Hi there,

1. The email is already there unless you’re referring to different one. It’s also available from the custom code.

2. Yes, you can set your body text size in the customizer’s typography section. It’s currently set to 17px on both author/shortcode and body. Same font size is already applied.

If you have further questions, please don’t hesitate to start a new thread 🙂

Thanks!

[ImpossibleDiG]

Hmmm…

1. I don’t see the email link on this page: http://possiblegirls.wpengine.com/about/ — and I cleared cache. See attached screenshots.

2. The font on http://possiblegirls.wpengine.com/about/ appears to be slightly bigger than that on http://possiblegirls.wpengine.com/author/dig/ — as in the the line breaks are different.

Thanks! dig

[Author]

Posts