When creating WordPress site design, have you ever had the urge to create a grid display of posts or pages? The Grid View layout works great for media centric sites such as our WordPress Gallery, Portfolio or another showcase type site, many premium wordpress site has already a built in functionality for this, however if you’re trying to create same functionality in your wordpress development theme or for your personal site then might this tutorial help you, I’ll show you How to Create or Display WordPress Post in Thumbnail Grid View Design in your WordPress theme.
HTML and PHP code
PHP
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
|
<div class=”gridBox”>
<h2 class=”grid-header”><?php _e(‘Gallery Page’, ‘rys’); ?></h2>
<div class=”boxes-container”>
<?php
$args = array(
’post_type’ => ‘post’, // replace “post” if you want to display different post-type
’category_name’ => ‘gallery’, // category slug
’posts_per_page’ => -1 // show all posts
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
$c = 1; // counter
$bpr = 4; // number of column in each row
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class=”grid-boxes <?php echo (($c != $bpr) ? ‘margin_right’ : ”); ?>”>
<div class=”grid-thumbnail”>
<?php if ( has_post_thumbnail()) { ?>
<div class=”alignleft”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” >
<?php the_post_thumbnail(); ?>
</a>
</div>
<?php } else { ?>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/no-thumbnail.jpg” alt=”No Thumbnail” />
<?php } ?>
</div>
<p class=”grid-title”>
<a href=”<?php the_permalink() ?>” title=”<?php printf(__(‘Permanent Link to %s’,'rys’), get_the_title()) ?>” rel=”bookmark”><?php the_title(); ?></a>
</p>
</div>
<?php
// we add a condition here to see if counter is equal to the number of column.
if( $c == $bpr ) {
echo ‘<div></div>’;
$c = 0; // back the counter to 0 if the condition above is true.
}
$c++; // increment counter of 1 until it hits the limit of column of every row.
endwhile;
} else {
// no posts found
_e( ‘<h2>Oops!</h2>’, ‘rys’ );
_e( ‘<p>Sorry, seems there are no post at the moment.</p>’, ‘rys’ );
}
/* Restore original Post Data */
wp_reset_postdata();
?>
</div>
<div class=”clear”></div>
</div>
</div>
|
Confuse?
Look at below for all function description.
has_post_thumbnail():Returns a boolean if a post has a Post Thumbnail attached (true) or not (false).the_post_thumbnail():This display Post Thumbnail as set in post’s edit screen- Others are self explanatory, and I also included comments.
HTML Output
Here’s an HTML output that looks like.
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class=”gridBox”>
<h2 class=”grid-header”>Gallery Page</h2>
<div class=”boxes-container”>
<div class=”grid-boxes”>
<div class=”grid-thumbnail”>
<div class=”alignleft”> Gallery Image </div>
<p>Gallery Title</p>
</div>
<div class=”grid-thumbnail”>
<div class=”alignleft”> Gallery Image </div>
<p>Gallery Title</p>
</div>
<div class=”clear”></div>
</div>
<div class=”clear”></div>
</div>
</div>
|
CSS
Here are CSS codes to make our post grid display professional and elegant.
CSS
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
|
.margin_right{ margin: 0 10px 20px 0;}
.gridBox {
margin: 20px auto 16px auto;
width: 975px;
}
.gridBox .grid-header{
border-bottom: 1px solid #DFDDD5;
margin-bottom: 20px;
padding-bottom: 10px;
}
.gridBox .boxes-container{ }
.gridBox .boxes-container .grid-boxes{
float: left;
background: #fff;
padding: 6px;
width: 222px;
border: 1px solid #DFDDD5;
}
.gridBox .boxes-container .grid-boxes .grid-thumbnail{ }
.gridBox .boxes-container .grid-boxes .grid-title{
text-align: center;
margin-bottom: 0 !important;
padding: 8px 0 6px 0;
font-size: 14px;
}
|
That’s it hope you find this tutorial helpful.
0 comments:
Post a Comment