Since I started writing tutorials I´ve talked with a few people about them, mainly most of my tutorials are what others wanted to see. This time I got a mail asking how I had added my latest post section on the front page of Showcase Pro.
As I wrote a couple months ago I choose the wonderful Showcase Pro(affiliate link) by the awesome JT Grauke as my base theme. The one thing I just had to add was a “Latest from me” section which shows the latest posts I´ve written.
This is quite a easy fix. It´s three steps
Step 1: Add one line of code to front-page.php
Step 2: Write what happens and how to display the posts on the front page.
Step 3: Add needed CSS to get it looking good.
Step 1: Adding a specific file where we place all the code
I like to do it like this since it gives me a better controll over where my code might go wrong. What this line of code does is to check if there is any file or template called front-latest.php in the root directory of the theme. If there is such a file then WordPress checks into it and sees what instructions or stuff there is inside. If you want to learn more about this I can recommend the WordPress Codex about get_template_part. I really enjoy this function.
Step 2: Creating front-latest.php
Since step one checks to see if there is a file called front-latest.php we have to create this file. Here is what I used for it´s contents:
If you´ve bought the theme then it should look familiar. What I did was use JT Grauke´s code from the widget for displaying the “Meet the Team” area of the front page but instead of counting to four I simply changed it to two. Otherwise it´s the same code. I removed the output of “view member” for the teammember and simply choose to display the title of the post.
Step 3: Changing some CSS for better display on mobile
When I first launched this theme my posts were just as they are on desktop. In the Genesis facebook group one member mentioned to me how bad this was for readability since you can´t really hover on mobile. A valid point and I spent some time writing css code to make it better on mobile and the result is when the width of the browser is lower than 800px the title is displayed with a nice background color and above 800px we have the hover effect in place. This was made possible by moving the original css code and placing it in a media query min-width 800px. Then I changed some of the code for how the title was displayed and it´s font size to better work for me.
You can see my code form my css file here:
And with these three steps done everything is done. This is how I added my “Latest from me” section on the frontpage.