Updating Your Static Home Page Automatically
In my last post, I described how I created a static home page for my dog blog.
Today I will tell you how I got the box with the latest posts on this static page to update automatically when I post to the blog.
Updating the Static Home Page Automatically
First, I’ll show you the code that I used. Then I will comment on specific aspects of the code.
Here is how I coded that section:
<!– Latest Articles –>
<div style=”float:left;width:265px;border:1px solid #000;”>
<div style=”padding:10px”> <!– Inside –>
<h2 class=”storytitle”><a href=”http://mydomain.com/posts/”>Latest Articles</a></h2>
<?php
global $post;
$myposts = get_posts(’numberposts=1′);
foreach($myposts as $post) :
setup_postdata($post);
?>
<a style=”text-decoration:none” href=”<?php the_permalink(); ?>”><?php the_title(’<h3>’, ‘</h3>’); ?></a>
<br /><?php the_excerpt(); ?><a href=”<?php the_permalink(); ?>”>Read more…</a>
<?php endforeach; ?>
<br /><br />
<?php
global $post;
$myposts = get_posts(’numberposts=4&offset=1′);
foreach($myposts as $post) :
setup_postdata($post);
?>
<a style=”text-decoration:none” href=”<?php the_permalink(); ?>”><?php the_title(’<h3>’, ‘</h3>’); ?></a>
<?php endforeach; ?>
<a href=”http://mydomain.com/posts/”>All the latest articles…</a>
</div> <!– Inside –>
</div> <!– End Latest Articles –>
Notes on the Code:
- Creating a box.
The code that creates the box is:
<div style=”float:left;width:265px;border:1px solid #000;”>
<div style=”padding:10px”>– Box content goes here. –
</div>
</div>It’s pretty easy - just give it the width, a border, and specify whether you want it to float right or left.
The inside div controls the padding inside the box (so the words don’t run right up to the border). I could have put the padding on the outside box, but there is something strange about how certain browsers handle padding (whether it gets added to the total width or not), so I thought it was safer to do that inside the main box, so that I am certain of the width of the outside box.
- Getting the latest post.
I used the template tag of get_posts to get the latest post. You can read about it here: get_posts Template Tag.
In fact, you should bookmark the following page, if you are ever going to play around with your WordPress templates: Template Tags.
This page shows you all the template tags you can use in WordPress and gives you links to the pages describing each one. This is definitely my most used page at wordpress.org.
Note: I did not create all that code myself. I just copied it directly from the get_posts template tag page, and just made small modifications to fit my needs. I’m not a great php coder, but I’m a great copier and paster.
- Getting the previous four posts.
This again uses the get_posts template tag.
Again, I stole the code right from the get_posts template tag page.
- Getting the photo and excerpt to look good.
When you write a post in WordPress, there is a space to enter an Optional Excerpt. If you don’t enter one, then the excerpt will just be the first part of your post, and it will not be formatted very nicely.
In order to get the excerpt and photo formatted nicely, I copied the first part of the post and put it into the Optional Excerpt box. This preserves the formatting.
- Photo size.
I think the photo gives a nice touch to the excerpt. I am going to try to use a photo for all future posts, so there will always be a photo showing in this box on the home page. Luckily, this is the size of photo I have been using anyway, because it fits great next to my AdSense block.
Here’s what the photo looks like in the actual post:
See my previous post to see how it looks on the home page.
So, I hope you enjoyed this little series on creating a static home page for your blog. I hope it did not get too technical with all the code. Like I said, it’s not too bad if you just copy what you need from the reference material at wordpress.org.
Have any of you experimented with a static home page?
- Pat Doyle
![[Post to Twitter]](http://www.patdoyle.com/wp-content/plugins/tweet-this/icons/tt-twitter-big4.png){kind=icon}
RSS Feed
This looks very much like something that I want to be able to do, so I’ll be looking at it later. Thanks so much!
Thanks Pat,
Very useful infos.
Fab
You’re welcome!
[...] In my next post, I will tell you how I got this box to update automatically. [...]
I haven’t set up a static home page as I did not really understand the benefits. Now that you have explained and demonstrated the concept with an example, I am convinced that there is merit in this approach. However, most of the bloggers I am reading do not use static homes pages, it seems. Do you have any thoughts on that Pat?
Brendan.
Hi Brendan,
I don’t think every blog needs a static home page. If their current posts are the most important, then these will show up on the home page of a normal blog.
I think the static home page is good if you have some content that you want to really highlight, other than your current posts. It would work well for sites that are not really “blogs” but just use WordPress as a content management system. I don’t update the dog blog very regularly, so this way, it looks more active and alive, and it pulls in more content than just the current posts.
I don’t think that a blog that is updated often really needs a static home page.
Hi Pat,
I followed your instruction on this post to create a new website : http://newtomontreal.com/
Thanks. Fab
Hi Fab,
It looks great! Nice template, too.