Adding spaces between blog posts
-
I’m using the categories shortcode to add certain posts to different pages on my blog.
Unfortunately, it looks a bit ugly, because the posts sort of run into each other. EG https://brightlightsofamerica.com/expat-life/getting-started/
Is there a way that I can put a space between the “comments” etc part and the title of the next blog post?
-
Howdy @katherinefenech,
Thanks for the question. In short, you’d want to edit the output template of Posts in Page to match your current theme’s markup so it’ll inherit all of the pre-made styles in your theme.
So, I took a quick look and could see that the output of your posts on a normal blog category page look like this:
<div class="blog-post-repeat"> <article id="post-21" class="post-21 post type-post status-publish format-standard hentry category-america category-travel"> <header class="entry-header"> <h2 class="entry-title"><a href="https://brightlightsofamerica.com/2017/01/san-francisco-botanical-garden-in-pictures/" rel="bookmark">San Francisco Botanical Garden in Pictures</a></h2> <div class="postmeta"> <div class="post-date">January 29, 2017</div><!-- post-date --> <div class="post-comment"> | <a href="https://brightlightsofamerica.com/2017/01/san-francisco-botanical-garden-in-pictures/#comments">37 Comments</a></div> <div class="post-categories"> | <a href="https://brightlightsofamerica.com/category/travel/america/" title="View all posts in The Americas">The Americas</a>, <a href="https://brightlightsofamerica.com/category/travel/" title="View all posts in Travel">Travel</a></div> <div class="clear"></div> </div><!-- postmeta --> <div class="post-thumb"> </div><!-- post-thumb --> </header><!-- .entry-header --> <div class="entry-summary"> <p>The San Francisco Botanical Garden staff LOVE New Zealand. There are a few subtle hints pointing to this fact and I’m here to blow this conspiracy wide open. The public garden, which costs $8 for adults, less for children and residents, is situated so that it offers a range of climates perfect for plants from… </p> <p class="read-more"><a href="https://brightlightsofamerica.com/2017/01/san-francisco-botanical-garden-in-pictures/">Read More ?</a></p> </div><!-- .entry-summary --> <footer class="entry-meta" style="display:none;"> <span class="cat-links"> Posted in <a href="https://brightlightsofamerica.com/category/travel/america/" rel="category tag">The Americas</a>, <a href="https://brightlightsofamerica.com/category/travel/" rel="category tag">Travel</a> </span> <span class="comments-link"><a href="https://brightlightsofamerica.com/2017/01/san-francisco-botanical-garden-in-pictures/#comments">37 Comments</a></span> </footer><!-- .entry-meta --> </article><!-- #post-## --> <div class="spacer20"></div> </div>
I’ve quickly adapted the code in the posts_loop_template.php file for you. This is a quick and dirty first pass, but it should get you close.
Make sure to copy your posts_loop_template.php file from your Posts in Page plugin directory to the root of your theme directory first.
Then, open the file and replace what’s between the
<!-- Post Wrap Start--> and <!-- //Post Wrap End -->
tags with:<!-- NEW Post Wrap Start--> <div class="blog-post-repeat"> <article id="post-<?php the_ID(); ?>" class="post-<?php the_ID(); ?> <?php post_class(); ?>"> <header class="entry-header"> <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="postmeta"> <div class="post-date"><?php the_date(); ?></div><!-- post-date --> <div class="post-comment"> | <?php comments_popup_link( __( 'Leave a comment', 'posts-in-page' ), __( '1 Comment', 'posts-in-page' ), __( '% Comments', 'posts-in-page' ) ); ?></div> <div class="post-categories"> | <?php if ( count( get_the_category() ) ) : ?> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'posts-in-page' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> \ <?php endif; ?></div> <div class="clear"></div> </div><!-- postmeta --> <div class="post-thumb"> </div><!-- post-thumb --> </header><!-- .entry-header --> <div class="entry-summary"> <?php the_excerpt(); ?> <p class="read-more"><a href="<?php the_permalink(); ?>">Read More ?</a></p> </div><!-- .entry-summary --> <footer class="entry-meta" style="display:none;"> <span class="cat-links"> <?php if ( count( get_the_category() ) ) : ?> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'posts-in-page' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?> <?php endif; ?> </span> <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'posts-in-page' ), __( '1 Comment', 'posts-in-page' ), __( '% Comments', 'posts-in-page' ) ); ?></span> </footer><!-- .entry-meta --> </article><!-- #post-## --> <div class="spacer20"></div> </div> <!-- // NEW Post Wrap End -->
I hope that helps!
Cheers,
EricAlso, cool birds!
- The topic ‘Adding spaces between blog posts’ is closed to new replies.