Vladimir MartonThere is many tutorials on how to change your front page posts post loop of your website in WordPress. Post loop is a way of displaying your latest posts on the homepage. All of the tutorials describe the way to create custom code as a new theme. Even though this might be the best approach, I’m sure many of you do not want to create a whole new theme. You might just want to change this one part of your current theme instead.
Also, there is a lot of people on the coding internet websites/forums who are asking about Stackoverflow-like design of the post loop. To make it easy and fast for you to realize – there is no plugin or theme with such functionality (to this day, I checked about 200 WordPress themes on https://themeforest.net/category/wordpress). In this tutorial, I will show you how to achieve a Stackoverflow look.
Read before you start
Each theme has its own layout, own CSS styles and own file structure. The first thing you should do is to inspect your webpage (by pressing F12 in Chrome – read more here: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/). Your post loop could be located in your wp-content/themes/your_theme/content.php file, although it could be located anywhere else, all based on your theme’s structure. For the purposes of this tutorial, I will show you the step-by-step guide by using a theme called Hooray. It’s a very nice, modern looking theme with a lot of available adjustments – highly recommended. I’m using it on this website and you can get it for $32 (as of date of this article), which I think is a very reasonable price. You either buy the theme from the link below, or continue with your current theme – the target files might differ though, hopefully not a lot.
Hooray WordPress theme – https://themeforest.net/item/hooray-premium-wordpress-blog-theme/6449280 (or google “hooray wordpress”)
Before & after the custom post loop
You can see what Hooray looks like in its preview page: http://themes.bdayh.com/?theme=Hooray. A photo below shows the way Hooray designs its post loop.
My original thought was that this design does not fit my articles very well. When you write a coding tutorial, it does not really matter how nice and big is your featured picture. Content is what matters the most, as well as giving your readers availability to browse your tutorials quickly. Hooray is not meant to be a codeblog theme, but we will make its post loop look like it is. The final result will look this way:
Important notes
- I’m adding CSS styles directly to HTML elements to make this as little complicated as possible. You can copy the styles to a .css file if you’re going for a clear result.
- The code is adjusted for Hooray theme. There will be elements which will not work in your time – try it out and remove blocks not related to your theme.
Stackoverflow front-page loop
The first thing to do is to find have_posts() function. In Hooray, it is located in wp-content/themes/hooray/framework/ajax/standard/normal.php. Hooray supports different page types, but as long as you set your WordPress front page to latest posts, a page type standard is chosen. This function finds all the posts and then uses them in the loop shown below.
<?php if ( have_posts() ) : ?>
<?php
// Start the loop.
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
// End the loop.
endwhile;
...
?>
File which you should look for is the one specified as a parameter to function get_template_part(). In case of Hooray, its the content(.php) file. This file is located in wp-content/themes/hooray/content.php. Open this file and get familiar with it. This file prints out each loop in the original theme as shown on one of the pictures above. What is also does is that it generates the layout for reading the actual post when clicking on it. This is the reason why you shouldn’t remove this file’s content.
All we want to do is to display Stackoverflow-like layout when either on front page of your website, or any category page. In the code below, you can see the piece of code that you should add to achieve this, as well as the location where to insert it in the file.
<?php
/**
* Post.
* ----------------------------------------------------------------------------- *
*/
global $post, $wp_query, $bd_data;
if (is_front_page() or is_category()) { ?>
<div style="margin-bottom: 1px; background: #fff;">
<div style="display:table; width: 100%;">
<div style="display: table-cell; width: 10%; padding: 10px; background: #fff; color: #8e8e8e; height: 100%; margin: 0 auto; text-align: center;">
<?php
$views = getPostViews(get_the_ID());
echo substr($views, 0, strrpos($views, ' '));
?>
<br/><p style="font-size: 0.65em">VIEWS</p>
</div>
<div style="display: table-cell; width: 70%; padding: 10px; background: #fff; height: 100%; margin: 0 auto;">
<a href="<?php echo get_permalink(); ?>" style="vertical-align: middle; font-family: 'Monserrat', sans-serif; font-weight: bold;"><?php the_title(); ?></a><br/>
<div class="bd-meta-cat" style="display: inline-block;">
<?php
foreach(get_the_category() as $cat) {
echo '<a class="bd-cat-link bd-cat-'.$cat->cat_ID.'" href="' . get_category_link( $cat->cat_ID ) . '" style="margin-right: 3px;">' . $cat->cat_name . '</a>';
}
?>
</div>
<span style="font-size: 0.75em;"><?php the_date(); ?> by <?php the_author(); ?></span>
</div>
<div style="display: table-cell; width: 10%; color: #fff; height: 100%; margin: 0 auto; text-align: center;">
<?php
$likes = get_post_meta( get_the_ID(), 'vortex_system_likes', true );
$dislikes = get_post_meta( get_the_ID(), 'vortex_system_dislikes', true );
$score = $likes - $dislikes;
if ($score == 0) {
echo "<div style='padding: 10px; margin: 5px; color: #6e6e6e; background: #fff;'>";
echo $score;
} else if ($score < 0) {
echo "<div style='border: 2px #631515 solid; background: #fff; color: #631515; margin: 5px; padding: 5px;'>";
echo "-" . $score;
} else {
echo "<div style='border: 2px #17A900 solid; background: #fff; color: #17A900; margin: 5px; padding: 5px;'>";
echo "+" . $score;
}
echo "<br/><p style='font-size: 0.65em'>score</p>";
echo "</div>";
?>
</div>
<div style="display: table-cell; width: 10%; color: #fff; height: 100%; margin: 0 auto; text-align: center;">
<?php
$comments = get_comments_number();
if ($comments == 0) {
echo "<div style='padding: 10px; margin: 5px; color: #6e6e6e; background: #fff;'>";
echo $comments;
} else {
echo "<div style='border: 2px #CC742D solid; background: #fff; color: #CC742D; margin: 5px; padding: 5px;'>";
echo $comments;
}
echo "<br/><p style='font-size: 0.65em'>comments</p>";
echo "</div>";
?>
</div>
</div>
<?php //the_content(); ?>
</div>
<hr style="margin: 0 !important; padding: 0 !important;">
<?php } else {
$bdCurrentID = get_the_ID();
$post_type = get_post_meta( $bdCurrentID, 'bd_post_type', true );
Description of the code:
- Functions is_front_page() and is_category() help us to display our custom design only on the homepage and any category page. Anywhere else, the original layout is displayed.
- Each row of the layout is a table-cell div. There is four of them and each is aligned to center both horizontally and vertically.
- Function getPostViews() returns a string with number of views and string “Views”, both in the same row. Because we want to split it, I use substr() and cut the result in half.
- Function get_permalink() returns the post’s URL for further reading.
- Hooray provides each category with a different color (you can set it up when creating each category). Line 24 is a native Hooray theme functionality which renders these category links with custom category color.
- vortex_system_likes and vortex_system_dislikes is a part of a plugin called Rating System, which you can get on this link: https://wordpress.org/plugins/rating-system/. The plugin adds voting to your desired positions in your webpage, for example posts. Each posts then has a separate rating, which you can get by retrieving post meta with these two parameters.
- Function get_comments_number() returns a number of comments in the native WordPress commenting system.
- Lines 37-46 and 54-60 are used to display different styles based on the score of article and number of comments.
- Function the_content() is commented out, because we do not want the short description/summary of the post in the post loop.
- On line 70, you can see an else statement. Make sure to include it in the code. If the current URL of your website is not a front page or category page, you want to display the original theme’s content.
The layout is pretty responsive as it is. Of course, you can rewrite the styles, or add additional styles to make it fully responsive.
Additional styling
To add some spacing, title “Latest tutorials” and a horizontal line, we need to go back to wp-content/themes/hooray/framework/ajax/standard/normal.php and add following piece of code above the have_posts() function (don’t forget to add the </div> below the ending of PHP tag too).
<div class="widget" style="padding-top: 30px;">
<div class="widget-title box-title" style="display: table; margin: 0 auto;">
<h2><b style="font-size: 25px;">
Latest tutorials
</b></h2>
</div>
<hr style="margin-top: 10px;">
<?php if ( have_posts() ) : ?>
...
endif;
?>
</div>
Conclusion
You should now be able to see approximately what I have on my homepage too. Of course, different themes have different settings, so you might have to play with it a bit. Also, I’m writing this tutorial one day after I worked on the design, which is unusual for me, I usually write tutorials right after, so I can remember every step. So if there is something that is not working, please leave a comment and we can take a look at it. Good luck!
PS: To get a very nice comment snippet highlighting in WordPress, click here.
