- This topic has 8 replies, 3 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 23, 2021 at 3:29 pm #1630839Vlidi
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!January 24, 2021 at 9:06 am #1631626VlidiJust 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!
January 24, 2021 at 9:50 am #1631679TomLead DeveloperLead DeveloperHi 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%; }
January 24, 2021 at 2:55 pm #1631889VlidiHey 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!
January 25, 2021 at 10:23 am #1633168TomLead DeveloperLead DeveloperNo problem! Feel free to let us know if you’re running into any specific roadblocks π
January 25, 2021 at 3:27 pm #1633383VlidiThank 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 toright:0
ortext-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>
January 26, 2021 at 9:23 am #1634517DavidStaffCustomer SupportHi 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; }
January 26, 2021 at 9:34 am #1634530VlidiHey 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 π
January 26, 2021 at 10:22 am #1634617DavidStaffCustomer SupportYou’re welcome – and thanks for sharing your solution π Great to see people adapting this
-
AuthorPosts
- You must be logged in to reply to this topic.