Wordpress is huge. There are over 60 million websites and blog sites that use Wordpress at this writing. That’s big. A lot of the websites that use Wordpress have Static front pages and of course the rest of the pages are dynamic. You have probably noticed in your admin dashboard => Settings => Reading “Front Page Displays” then just below it “A static page”. You are probably not different if you have a website using Wordpress.
Here at IG Webs, we custom design a theme for clients and if they choose to have blog as well, we pull the 3 most recent posts to the front page as part of our SEO package. Not all website designers provide that.
So here you are with a beautiful website and a nicely formatted blog page with lots of posts. Now let’s say you would like to display a few of those posts on your front page just above the footer for SEO and other purposes. Let’s say you want to use the latest 3 posts’ excerpts with title, read more link where just like your blog, the title is linked to the full page post. Maybe very similar to your blog page if you are using excerpts. That part of the page is not widgetized so a widget won’t do. You don’t want to manually add each post’s excerpt because you would have to do that each time you have a new post. And for it to be useful as a SEO tool, it needs to be pretty much like your blog page but shorter, only 5 or less of the latest posts.
Some themes provide a bottom widget but it appears at the bottom of every page and that’s just too cumbersome to have. Basically you only want to have it on the home page which is the most important page. However, since you are already using Wordpress, all you have to do is to use some of the code from Wordpress itself to achieve this. Put the following in your theme’s page.php just before the footer code <?php get_footer(); ?>:
| <?php if (is_front_page()) {$args = array( ‘numberposts’ => 3, ‘post_status’=>”publish”,’post_type’=>”post”,’orderby’=>”post_date”); $postslist = get_posts( $args ); foreach ($postslist as $post) : setup_postdata($post); ?> <div class=”blogPosts”> <p><strong><?php the_date(); ?></strong></p><br /> <p><h2 class=”postcontent”><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2></p><br /> <p><?php the_excerpt(); ?></p> <a href=”<?php echo get_permalink(); ?>”> Read More…</a> <p align=”right”><?php echo get_the_post_thumbnail($post->ID, array(150,100), ‘thumbnail’); ?></p> </div> <?php endforeach; } ?> |
Here is what this code does. From the first line it says use this only if its the front page (home page) and use only 3 posts. you can change this if you want more or less. The rest is the well know Wordpress loop to fetch the post excerpt, its permalink and add a “read more” link and any thumbnails the post is using.
At first this may not look as good as you would expect but a little CSS can go a long way to remedy that. So go to your theme’s style.css file and add this anywhere, but my suggestion is to add it at the top just after all the comments because its easier to find if you have to make any changes to it later:
| .blogPosts { margin: 0px auto 20px; padding: 20px; width: 93%; border: 1px solid #535F59; border-radius: 10px; } |
This will add styling to the blogPost div used in the code above by giving it a top margin of 20px and a padding of 20px and a nice rounded corner border but you can change any of it to suit your needs or to match your theme styling, you can even give it a background color to match your homepage.
