Docs

[Eric]

Hey sorry another quick question. I’m trying to fix my previous/next navigational buttons within my blog posts but I’m having a lot of trouble. Basically there’s three things that I’m trying to achieve.

#1 – First off I’d like to drop the previous/next buttons to the bottom of the blog post (after the content). I tried a few different methods, one of which came from this thread: https://community.theme.co/forums/topic/ethos-post-nextback-arrows-font-size-of-post-heading/

However nothing I’ve done seems to work. Is there another method that could work for me, perhaps by adding some code to my functions.php file?

#2 – Then secondly I’d also like to have the buttons staying within a particular category (instead of them being applied to all posts). To achieve this I tried adding some code to my functions.php file, using these two threads:
https://community.theme.co/forums/topic/ethos-nav-article-next-and-previous-button-controls/
https://community.theme.co/forums/topic/next-previous-post-buttons-on-mobile/

However both of them caused my website to crash. So any guidelines on how to do that would also be very helpful.

#3 – And then finally I’d also like to know if it’s possible to add a line of CSS that would make the previous/next navigational buttons smaller (about half the size would be ideal). Again I consulted the forum, but nothing has worked.

Thanks!

[Eric]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

1. Would you mind providing a mockup design of how it should? It always depends on your design, that thread’s recommendation is only applicable for his requirement.

2. What do you mean? Prev and Next are only applicable for posts. Do you mean that it should only navigate to the same category where the current post is? If yes, then the code provided on that thread is correct. All you need to change is these lines,

$prev_post = get_adjacent_post( true, '', false );
  $next_post = get_adjacent_post( true, '', true);

to these

$prev_post = get_adjacent_post( true, '', false, 'category' );
  $next_post = get_adjacent_post( true, '', true, 'category');

Though, I’m not really sure why it would crash your site when it works on my end and for the users that tried it. Please implement that code and if crashes then please provide the error it will throw.

To enable error reporting, please edit your site’s wp-config.php and set WP_DEBUG to true.

3. Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

/* reduce in half */
.x-nav-articles a {
    width: 19px;
    height: 21px;
    font-size: 10px;
    line-height: 21px;
}

Hope this helps.

[Eric]

Hey thanks for the reply! Regarding question 1, I’d really like to recreate the mockup in screenshot 1, which displays the Prev/Next buttons just below my share buttons. So if it’s possible to add a similar code to achieve this, then that would be my absolute best case scenario. However if for whatever reason it’s not possible then I suppose just dropping the arrows to the bottom of the blog post would be fine.

And regarding question 2, you understood correctly and I tried modifying the code with your recommendation but unfortunately it created another parsing error (which I’ll include in the private reply).

So anyway if you can let me know if my mockup is possible and if there’s anything else I could do to get this category code to work, then that would be very much appreciated.

Thanks a lot!

[Eric]

This reply has been marked as private.

[Christopher]

Hi there,

Please update the code in _content-post-header.php file to :

    <?php

// =============================================================================
// VIEWS/ETHOS/_CONTENT-POST-HEADER.PHP
// -----------------------------------------------------------------------------
// Standard <header> output for various posts.
// =============================================================================

?>

<header class="entry-header">
  <?php if ( is_single() ) : ?>
    <h1 class="entry-title"><?php the_title(); ?></h1>
  <?php else : ?>
    <h2 class="entry-title">
      <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
    </h2>
  <?php endif; ?>
  <?php x_ethos_entry_meta(); ?>
</header>

Copy _content.php from framework/views/ethos and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_ethos_featured_index(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php if ( ! is_single() ) : ?>
          <?php x_ethos_featured_index(); ?>
        <?php else : ?>
          <?php x_featured_image(); ?>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
          <?php x_entry_navigation(); ?>

    </div>
  <?php endif; ?>
</article>

Hope that helps.

[Eric]

Hey thanks a lot, that worked perfectly! So right now it looks like this (see screenshot 1). I’m just wondering, would it be possible to put ‘Prev/Next’ right above the nav buttons, exactly the same way it says ‘share this post’?

And also, would it be possible to add a line of code that removes the spacing between the nav buttons? Ideally I’d like for them to be side by side.

Thanks again!

[Christopher]

Hi there,

Please update the code inside content.php file to :

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout',  true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_ethos_featured_index(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php if ( ! is_single() ) : ?>
          <?php x_ethos_featured_index(); ?>
        <?php else : ?>
          <?php x_featured_image(); ?>
        <?php endif; ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
       <?php if (  is_single() ) : ?>
          <?php x_entry_navigation(); ?>
        <?php endif; ?>

    </div>
  <?php endif; ?>
</article>

Please add following code in Customize -> Custom -> JavaScript :

jQuery("<span class="nav-text">Next</span>").insertBefore("a.next");
jQuery("<span class="nav-text">Prev</span>").insertBefore("a.prev");

Please add following code in Customize -> Custom -> CSS :

.x-nav-articles .next {
    left: -16px;
}
.x-nav-articles .prev {
    right: -16px;
}

Hope it helps.

[Eric]

Thanks for the reply! The CSS worked but unfortunately I didn’t notice any difference after updating content.php file, and adding the JavaScript.

Right now it’s perfectly centered but it still doesn’t say ‘Prev/Next’ and when I click through the buttons it still goes through all the categories.

Any ideas?

[Rad]

Hi there,

Would you mind providing your FTP login credentials? I’ll try to apply the changes recommended at #1138883 #2

Thanks!

[Eric]

This reply has been marked as private.

[Rad]

Hi there,

It’s not working, not connecting at all.

But I can confirm that the code suggested in #1138883 #2 is not implemented to your child theme’s functions.php. I checked that through admin. It’s discussed on these threads https://community.theme.co/forums/topic/ethos-nav-article-next-and-previous-button-controls/#post-752298 and https://community.theme.co/forums/topic/next-previous-post-buttons-on-mobile/. Which you also said that you tried. Please implement them then follow the #1138883 #2

Thanks!

[Eric]

Well as I stated earlier, when I add the codes from the old threads it gives me a parsing error and crashes my website, so I was forced to remove them. I just tried again but they still don’t work (I’ll attach the error messages in a private reply).

[Eric]

This reply has been marked as private.

[Eric]

I’ll try to recap where we’re at just to make sure I’m not being unclear.

So right now here’s what I’ve done:
1) I updated the code in _content-post-header.php (with the code you gave me)
2) Then I copied _content.php from framework/views/ethos, put it in the same path inside child theme, and updated the code (with the code you gave me).
3) Then I updated the content.php file in the child theme (with the code you gave me)
4) Then I added the two lines of Javascript (which are still there)
5) Then I added the Custom CSS (which is still there)

Now the result of all this is that the nav arrows are now situated perfectly at the bottom of my posts (and they’re perfectly sized and centered). The only remaining issues is that the Prev/Next text still doesn’t appear above the arrows (which if I understood correctly should have been solved by #3 & #4). And the other issue is the when you click on the nav arrows it still clicks through all of my posts as opposed to all the posts within that particular category (which is what I want).

And as of now nothing has been added to the functions.php file, because as I mentioned just before, every code combination that I tried created a parsing error.

So with all that being said, if there’s anything else that could be done to fix these two issues, please let me know.

And sorry again if I made it more confusing than it had to be.

As always your help is very much appreciated.

[Author]

Posts