How to set-up a custom home page with links to latest posts

January 22, 2011

The first of my tutorials on customising the Thematic Gallery child theme is the most common question people email me about. How did I get my home page to look the way it does?

The first thing you need to do is set a static page as your home page. The WordPress Codex describes this process in detail. Basically you can do this by going to: Administration > Settings > Reading panel.

The next step is to create a custom page template. You can also read about about this in the WordPress documentation.

So create a new php page named homepagetemplate.php and add the following few lines of code to the start the new template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
/*
Template Name: Native Noise Home
Author: Paul Seele
Author URI: http://www.nativenoise.co.za
*/
?>
<?php get_header() ?>

My custom home page has a list of the latest posts on the left hand side. I wrote my own WP_Query to display the latest entries using the same css styles and formatting that Chris set-up for the index and archive pages of the gallery theme. The following block of code retrieves the last 16 posts and displays the thumbnail images for them, with the jQuery rollover states enabled. You can change the number of posts to retrieve by changing the line that says: $recentPosts->query('showposts=16');
I’ll share the css you need to style this at the end of this post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!-- create a box to display recent posts -->
              <div class="recent-posts">
              <h3 align="center">LATEST POSTS</h3>
			  <?php
                  $recentPosts = new WP_Query();
                  $recentPosts->query('showposts=16');
              ?>
              <?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
          <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class(); ?>">
				<div class="entry-content">
					<?php childtheme_post_header() ?>
                    <a href="<?php echo the_permalink() ?>" title="<?php echo the_title(); ?>"><span class="slide-title"><?php echo the_title(); ?></span>
                    <img class="thumbnail" src="<?php if(get_post_meta($post->ID, 'thumbnail', $single = true)){echo get_post_meta($post->ID, 'thumbnail', $single = true);} else{bloginfo('url'); echo "/wp-content/themes/gallery/images/thumbnail-default.jpg";} ?>" width="170" height="170" title="<?php echo the_title(); ?>" alt="<?php echo the_title() ?>" /></a>
			</div><!-- .entry-content -->
            </div><!-- .post -->
              <?php endwhile ?>
              <div class="moreposts"><a href="<?php echo bloginfo('url') ?>/all-posts/" title="View all posts by Paul Seele on Native Noise">VIEW ALL POSTS</a></div>
              </div> <!-- close recent posts -->

In the right hand column I created a banner zone for the Ad-minister plugin. This is followed by the actual page content that can be entered in the WordPress dashboard. I’ve marked these sections with html comments below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="home-entry-content">
              <!-- create ad-minister banner zone -->
              <?php
  $args = array('position' => 'Home Page Top banner', 'description' => 'A banner ad on the home page. No wider than 530px', 'before' => ' 	<div class="ads-homepage">', 'after' => '</div>');
  do_action('ad-minister', $args); ?><!-- close ad-minister banner zone -->
  <!-- Add the page content -->
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class(); ?>">
<?php the_content(''.__('Read More <span class="meta-nav">&raquo;</span>', 'thematic').''); ?>
</div> <!-- Closes page content -->
<?php endwhile; ?>
			</div>

Finally I have an area that displays links to three posts that I always want displayed on the home page. I created a category called ‘Home Posts’ and added those three posts to it. Then I ran a query to retrieve posts in that category and display them.

The page template is finished off with the get_footer() function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- Show the three posts that are set to always display on the home page -->
  <div class="home-posts">
			 <?php query_posts('category_name=home-posts&showposts=0'); ?>
   <?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
				<div class="entry-content">
				<?php childtheme_post_header() ?>
	        	<a href="<?php echo the_permalink() ?>"><span class="slide-title"><?php echo the_title(); ?></span><img class="thumbnail" src="<?php if(get_post_meta($post->ID, 'thumbnail')){echo get_post_meta($post->ID, 'thumbnail', $single = true);} else{bloginfo('url'); echo "/wp-content/themes/gallery/images/thumbnail-default.jpg";} ?>" width="170" height="170" title="<?php echo the_title() ?>" alt="<?php echo the_title() ?>" /></a>
				</div>
			</div>
  <?php endwhile;?>
              </div> <!-- close home posts -->

<?php get_footer() ?>

That’s everything that goes into my custom home page. You can use each of the sections as you see fit. Feel free to download the actual php file and edit it to suit your needs: NativeNoiseHomeTemplate.php

You’ll need to make sure the page uses all the correct css styles. You can see my live css file here.

I’ve listed the bits of css relevant to home page below

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

.home-entry-content{
  margin: 0px 10px 10px 10px;
  float: left;
  width: 530px;
  padding: 0px 10px 10px 10px;
}

/* Recent Posts formatting */
.home-posts {
  margin: 0px 10px 10px 10px;
  float: left;
  width: 538px;
  padding: 0px 10px 10px 10px;
  background-color: #191919;
  border: 1px solid #333;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 5px;}

.home-posts .entry-content{
  float: left;
  width: 179px;
  margin: 0 0 5px 0;
}
.home-posts .entry-content a{
  border: 3px solid #191919;
  display: block;
  height:170px;
  width:170px;
  overflow: hidden;
  position: relative;
  background-color: #191919;
}
.home-posts .entry-content a img{
  position: absolute;
  z-index: 5
}
.home-posts .entry-content a span.slide-title{
  position: absolute;
  top: 153px;
  left: 3px;
  width: 390px;
  line-height: 1em;
  color: white !important;
  font-size: .8em;
  z-index: 0
}
.home-posts .entry-content{
  position: relative
}
.home-posts .entry-content .new{
  display: block;
	position: absolute;
	top: -3px;
	right: 10px;
	width: 42px;
	height: 22px;
	background: url("images/ico-new-trans.png") no-repeat top left;
	z-index: 200
}

/* Recent Posts formatting */
.recent-posts {	width:358px; float:left;
margin-top: 20px;
  background-color: #191919;
  border: 1px solid #333;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 5px;}

.recent-posts .entry-content{
  float: left;
  width: 179px;
  margin: 0 0 5px 0;
}
.recent-posts .entry-content a{
  border: 3px solid #191919;
  display: block;
  height:170px;
  width:170px;
  overflow: hidden;
  position: relative;
  background-color: #191919;
}
 .recent-posts .entry-content a img{
  position: absolute;
  z-index: 5
}
.recent-posts .entry-content a span.slide-title{
  position: absolute;
  top: 153px;
  left: 3px;
  width: 390px;
  line-height: 1em;
  color: white !important;
  font-size: .8em;
  z-index: 0
}
.recent-posts .entry-content{
  position: relative
}
.recent-posts .entry-content .new{
  display: block;
	position: absolute;
	top: -3px;
	right: 10px;
	width: 42px;
	height: 22px;
	background: url("images/ico-new-trans.png") no-repeat top left;
	z-index: 200
}
.recent-posts .moreposts {
	margin:0 auto;
	text-align:center;
}

That should cover it. I always find that Firebug is the best way to find out what you need to do with your css styles. I hope this quick run-through helps you get your own custom home page to behave the way you envisioned it.

This post is filed under:
Tutorials

Tags: , , , , , , , , ,

3 Comments

  1. Chrissy
    Posted January 23, 2011 at 11:04 pm | Permalink

    Omg, Thanks so much, I was bashing my head against the wall about this…

    Now to figure out how in the hell you got a full width post page without the image… #SOB#

    x

  2. Chrissy
    Posted January 24, 2011 at 12:21 am | Permalink

    Yay!!!

    I figured it out at last!!! You are a GOD

  3. Paul Harold Seele
    Posted January 26, 2011 at 1:27 pm | Permalink

    Hey Chrissy. Glad the post helped. I’ve got a few more customisations I’ll post about as soon as I have the time.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>