Docs

[pdopchev]

Hi guys,

Just noticed that navigation between posts in Ethos disappears when the theme is viewed in mobile. Is there a different way to navigate between posts?

p.s. check out screenshot to see what I am referring to
p.s.s. link: http://www.enjoycrestedbutte.com/sample-post/

[Paul R]

Hi,

Thanks for writing in!

To make it visible in mobile, you can add this under Custom > CSS in the Customizer.

@media (max-width: 767px) {
.single-post .x-nav-articles {
    margin: 0 0 20px;
    float: none;
    display: block;
    width: 100%;
    padding: 0 20px;
}
}

Hope that helps.

[pdopchev]

Great, appreciate your help!

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[pdopchev]

Hi guys,

Just ran the navigation option through the client and they said it was not clear enough “seems like the arrows could be for scrolling through a slider vs going to the next post, need a more obvious way to indicate where those arrows take you.”

Is it possible to add text (like next post / previous post) next to each arrow, or maybe below it – depending what looks cleaner on small screens?

Thank you!

[Paul R]

Hi,

To add Next and Previous text, you can add this in your child theme’s functions.php file.

function x_entry_navigation() {
  $stack = x_get_stack();
  if ( $stack == 'ethos' ) {
    $left_icon  = '<i class="x-icon-chevron-left" data-x-icon=""></i>';
    $right_icon = '<i class="x-icon-chevron-right" data-x-icon=""></i>';
  } else {
    $left_icon  = '<i class="x-icon-arrow-left" data-x-icon=""></i>';
    $right_icon = '<i class="x-icon-arrow-right" data-x-icon=""></i>';
  }
  $is_ltr    = ! is_rtl();
  $prev_post = get_adjacent_post( false, '', false );
  $next_post = get_adjacent_post( false, '', true );
  $prev_icon = ( $is_ltr ) ? $left_icon : $right_icon;
  $next_icon = ( $is_ltr ) ? $right_icon : $left_icon;
  ?>

  <div class="x-nav-articles">

    <?php if ( $prev_post ) : ?>
      <a href="<?php echo get_permalink( $prev_post ); ?>" title="<?php __( 'Previous Post', '__x__' ); ?>" class="prev">
        <?php echo $prev_icon; ?> Prev Post
      </a>
    <?php endif; ?>

    <?php if ( $next_post ) : ?>
      <a href="<?php echo get_permalink( $next_post ); ?>" title="<?php __( 'Next Post', '__x__' ); ?>" class="next">
        <?php echo $next_icon; ?> Next Post
      </a>
    <?php endif; ?>

  </div>

  <?php
  }

Then add this in Custom > Edit Global CSS in the Customizer

.x-nav-articles a {
    width:120px;
}

.x-nav-articles {
    width:260px;
}

You may change the width to adjust.

Hope that helps.

[pdopchev]

Yes, that’s exactly what I was looking for! You guys are awesome!

One more related question – in case the client decides to go with no navigation at all (both mobile and desktop screen) how could I disable it?

Thank you!

[Rue Nel]

Hello There,

Thanks for updating in! If in case your client decides to go with no navigation at all (both mobile and desktop screen), to disable it, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-nav-articles {
    display: none;
}

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

[pdopchev]

Perfect! Thank you for your help!

[Nabeel A]

Glad we could help.

Cheers!

[pdopchev]

Actually, one more thing: how could I hide the “/” tilted dash in the post meta info? Trying to hide the date so I added:

/* Hide Post Date in Meta */
.entry-date {display:none;}

but cannot figure out how to hide the extra “/” dash…

p.s. page is the same: http://www.enjoycrestedbutte.com/sample-post/

[Thai]

Hi There,

Please add the following CSS instead:

p.p-meta > span:nth-child(2){
    display: none;
}

Hope it helps 🙂

[pdopchev]

Thank you so much for your help! That worked great!

A couple of more things related to the meta in posts:

1) The client requested to hide the “In Popular” part of the meta info so it looks like “by author / 0 Comments”. Is that doable?

2) also, could the “b” in “by” be capitalized in that case?

link: http://www.enjoycrestedbutte.com/the-crested-butte-snow-report/

[Rue Nel]

Hello There,

Thanks for updating in! The “In Popular” was already hidden and the “b” in “by” is now capitalized. I have updated the post meta function code to be able to resolve the issue. I have added this code in your child theme’s functions.php file

if ( ! function_exists( 'x_ethos_entry_meta' ) ) :
  function x_ethos_entry_meta() {

    //
    // Author.
    //

    $author = sprintf( '<span> %1$s %2$s</span>',
      __( 'By', '__x__' ),
      get_the_author()
    );

    //
    // Date.
    //

    $date = sprintf( '<span><time class="entry-date" datetime="%1$s">%2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );

    //
    // Categories.
    //

    if ( get_post_type() == 'x-portfolio' ) {
      if ( has_term( '', 'portfolio-category', NULL ) ) {
        $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
        $separator         = ', ';
        $categories_output = '';
        foreach ( $categories as $category ) {
          $categories_output .= '<a href="'
                              . get_term_link( $category->slug, 'portfolio-category' )
                              . '" title="'
                              . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                              . '"> '
                              . $category->name
                              . '</a>'
                              . $separator;
        }

        $categories_list = sprintf( '<span>%1$s %2$s',
          __( 'In', '__x__' ),
          trim( $categories_output, $separator )
        );
      } else {
        $categories_list = '';
      }
    } else {
      $categories        = get_the_category();
      $separator         = ', ';
      $categories_output = '';
      foreach ( $categories as $category ) {
        $categories_output .= '<a href="'
                            . get_category_link( $category->term_id )
                            . '" title="'
                            . esc_attr( sprintf( __( "View all posts in: &ldquo;%s&rdquo;", '__x__' ), $category->name ) )
                            . '"> '
                            . $category->name
                            . '</a>'
                            . $separator;
      }

      $categories_list = sprintf( '<span>%1$s %2$s',
        __( 'In', '__x__' ),
        trim( $categories_output, $separator )
      );
    }

    //
    // Comments link.
    //

    if ( comments_open() ) {

      $title  = apply_filters( 'x_entry_meta_comments_title', get_the_title() );
      $link   = apply_filters( 'x_entry_meta_comments_link', get_comments_link() );
      $number = apply_filters( 'x_entry_meta_comments_number', get_comments_number() );
      
      $text = ( 0 === $number ) ? 'Leave a Comment' : sprintf( _n( '%s Comment', '%s Comments', $number, '__x__' ), $number );

      $comments = sprintf( '<span><a href="%1$s" title="%2$s" class="meta-comments">%3$s</a></span>',
        esc_url( $link ),
        esc_attr( sprintf( __( 'Leave a comment on: &ldquo;%s&rdquo;', '__x__' ), $title ) ),
        $text
      );

    } else {

      $comments = '';

    }

    //
    // Output.
    //

    if ( x_does_not_need_entry_meta() ) {
      return;
    } else {
      printf( '<p class="p-meta">%1$s%2$s</p>',
        //$categories_list,
        $author,
        //$date,
        $comments
      );
    }

  }
endif;

If you need anything else we can help you with, don’t hesitate to open another thread.

[pdopchev]

Thank you so much! You guys rock on!

[Author]

Posts