[Resolved] Post Navigation, Volume-based: Adding meta & border

Home Forums Support [Resolved] Post Navigation, Volume-based: Adding meta & border

Home Forums Support Post Navigation, Volume-based: Adding meta & border

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1630839
    Vlidi

    Hello dear GP team,
    I am trying to customize David’s amazing Volume Post Navigation.

    So far I managed to get quite close to what I want, but now encountered several problems.

    I adjusted the Hook code from Volume – pls see the HTML tab of this Pen.

    And adjusted the CSS the best I could (the same Pen, CSS tab).
    (I have the feeling that there is the surplus of CSS here, but could not merge further, please advice if there is more elegant way to do this.)

    I am trying to have it look like this.

    It should stack on tablet and mobile.

    But I eventually got stuck with the following:

    1. How to include the Author & Date below the post title (in a single line if possible)?

    2. I can’t seem to change the font of PREV/NEXT and the Post Titles using CSS and !important.
    Surely I am missing something here, as the same CSS can change sizes and colors.
    What selector should I use?

    3. The 1px lines above and below the Post Navigation are made as the borders of h3 title.
    But if titles are shorter, the lines don’t go all the way to the right.
    How can I make the lines fixed length and independent of the length of the title?
    (I guess not to attach them to h3 to start with, but had no better idea how to get to this layout.)

    I would appreciate any help with this.
    Thanks!

    #1631626
    Vlidi

    Just to update, the No 2 above is solved.

    I need help with the following:

    1. How to include Author & Date below the post title (in a single line if possible)?

    2. How to make the top and bottom line borders full and fixed width and independent of the length of the title?

    Thanks!

    #1631679
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Since you have your $post variable, you can use the following core functions to get the author and date:
    https://developer.wordpress.org/reference/functions/get_the_author/
    https://developer.wordpress.org/reference/functions/get_the_date/

    In get_the_date(), you’ll want to use your $post variable as the second parameter.

    For the border, try this:

    h3.post-nav-title {
        width: 100%;
    }
    #1631889
    Vlidi

    Hey Tom, thanks!

    Still trying to make the functions work within a Hook, will post the final code here once done.
    (I always hesitated to mess with PHP, but it was about time, and this is one good excercise πŸ™‚ )

    The CSS works exactly what it should.

    Thank you and everybody @GP team for such a great support!

    #1633168
    Tom
    Lead Developer
    Lead Developer

    No problem! Feel free to let us know if you’re running into any specific roadblocks πŸ™‚

    #1633383
    Vlidi

    Thank you Tom!
    I managed – with some help – to output the Author & Date, quite happy with it.

    I have two questions now:

    1. How can I give this Postnav Meta the absolute position (above the 1px bottom border) so that they don’t move up and down depending on the length of the title?

    2. When the PostNav stacks for tablet and mobile views, the Postnav Meta below the lower (Next) remains on the left.
    It has a separate selector, but won’t respond to right:0 or text-align: right.
    How to move it to the right?

    Thanks for the fantastic support!

    And for whoever wants to use the great Volume Post Navigation (minus images, plus Author & Date), the Hook is below:

    <div id="post-nav">
    	<?php global $post;
        $prevPost = get_previous_post(false);
            if($prevPost) {
                $args = array(
                    'posts_per_page' => 1,
                    'include' => $prevPost->ID
                );
                $prevPost = get_posts($args);
                foreach ($prevPost as $post) {
                    setup_postdata($post);
        ?>
            <a class="post-previous" href="<?php the_permalink(); ?>">
    				<div class="post-nav-wrap">
                <div class="post-nav">PREVIOUS</div>
                <h3 class="post-nav-title"><?php the_title(); ?></h3>
    					<div class="post-info">
    						<div class="post-author">
    							<?php echo get_the_author(); ?>
    						</div>
    						<div class="post-date">
    							<?php echo get_the_date(); ?>
    						</div>
    					</div>
    				</div>
    			</a>
        <?php
                    wp_reset_postdata();
                } //end foreach
            } // end if
    
            $nextPost = get_next_post(false);
            if($nextPost) {
                $args = array(
                    'posts_per_page' => 1,
                    'include' => $nextPost->ID
                );
                $nextPost = get_posts($args);
                foreach ($nextPost as $post) {
                    setup_postdata($post);
        ?>
            <a class="post-next" href="<?php the_permalink(); ?>">
            <div class="post-nav-wrap">
                <h3 class="post-nav-title"><?php the_title(); ?></h3>
                <div class="post-nav">NEXT</div>
    					<div class="post-info">
    						<div class="post-author-next">
    							<?php echo get_the_author(); ?>
    						</div>
    						<div class="post-date-next">
    							<?php echo get_the_date(); ?>
    						</div>
    					</div>
            </div></a>
        <?php
                    wp_reset_postdata();
                } //end foreach
            } // end if
        ?>
    </div>
    #1634517
    David
    Staff
    Customer Support

    Hi there,

    1. Edit this CSS to include the two lines i have commented:

    .post-info {
      font-family: "Roboto Mono", sans-serif;
      text-transform: uppercase;
      font-weight: 400;
      font-size: 15px;
      display: flex;
      border-bottom: 1px solid #3a3a3a;
      padding-top: 0px;
      margin-top: 0px;
      margin-top: auto; /* add this property */
      padding-bottom: 10px; /* add this property */
    }

    2. within your mobile media query add this rule:

    .post-next .post-info {
      justify-content: flex-end;
    }
    #1634530
    Vlidi

    Hey David, thanks, this works beautifully.
    And thank you for this great PostNav thing, it is a style of its own.

    What else to say but thanks once again for the fantastic support πŸ™‚

    #1634617
    David
    Staff
    Customer Support

    You’re welcome – and thanks for sharing your solution πŸ™‚ Great to see people adapting this

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.