Website At 100: Thumbnail

HOW TO CREATE OR DISPLAY WORDPRESS POST IN THUMBNAIL GRID VIEW DESIGN

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
When creating <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>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 <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>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 <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>development theme or for your personal site then might this tutorial help you, I’ll show you <strong style="line-height: inherit;">How to Create or Display WordPress Post in Thumbnail Grid View Design</strong> in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>theme.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML and PHP code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>and <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>code display thumbnail post under Gallery category</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5941e13b173124393" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5941e13b173124393-1">
1</div>
<div data-line="crayon-52aff5941e13b173124393-2">
2</div>
<div data-line="crayon-52aff5941e13b173124393-3">
3</div>
<div data-line="crayon-52aff5941e13b173124393-4">
4</div>
<div data-line="crayon-52aff5941e13b173124393-5">
5</div>
<div data-line="crayon-52aff5941e13b173124393-6">
6</div>
<div data-line="crayon-52aff5941e13b173124393-7">
7</div>
<div data-line="crayon-52aff5941e13b173124393-8">
8</div>
<div data-line="crayon-52aff5941e13b173124393-9">
9</div>
<div data-line="crayon-52aff5941e13b173124393-10">
10</div>
<div data-line="crayon-52aff5941e13b173124393-11">
11</div>
<div data-line="crayon-52aff5941e13b173124393-12">
12</div>
<div data-line="crayon-52aff5941e13b173124393-13">
13</div>
<div data-line="crayon-52aff5941e13b173124393-14">
14</div>
<div data-line="crayon-52aff5941e13b173124393-15">
15</div>
<div data-line="crayon-52aff5941e13b173124393-16">
16</div>
<div data-line="crayon-52aff5941e13b173124393-17">
17</div>
<div data-line="crayon-52aff5941e13b173124393-18">
18</div>
<div data-line="crayon-52aff5941e13b173124393-19">
19</div>
<div data-line="crayon-52aff5941e13b173124393-20">
20</div>
<div data-line="crayon-52aff5941e13b173124393-21">
21</div>
<div data-line="crayon-52aff5941e13b173124393-22">
22</div>
<div data-line="crayon-52aff5941e13b173124393-23">
23</div>
<div data-line="crayon-52aff5941e13b173124393-24">
24</div>
<div data-line="crayon-52aff5941e13b173124393-25">
25</div>
<div data-line="crayon-52aff5941e13b173124393-26">
26</div>
<div data-line="crayon-52aff5941e13b173124393-27">
27</div>
<div data-line="crayon-52aff5941e13b173124393-28">
28</div>
<div data-line="crayon-52aff5941e13b173124393-29">
29</div>
<div data-line="crayon-52aff5941e13b173124393-30">
30</div>
<div data-line="crayon-52aff5941e13b173124393-31">
31</div>
<div data-line="crayon-52aff5941e13b173124393-32">
32</div>
<div data-line="crayon-52aff5941e13b173124393-33">
33</div>
<div data-line="crayon-52aff5941e13b173124393-34">
34</div>
<div data-line="crayon-52aff5941e13b173124393-35">
35</div>
<div data-line="crayon-52aff5941e13b173124393-36">
36</div>
<div data-line="crayon-52aff5941e13b173124393-37">
37</div>
<div data-line="crayon-52aff5941e13b173124393-38">
38</div>
<div data-line="crayon-52aff5941e13b173124393-39">
39</div>
<div data-line="crayon-52aff5941e13b173124393-40">
40</div>
<div data-line="crayon-52aff5941e13b173124393-41">
41</div>
<div data-line="crayon-52aff5941e13b173124393-42">
42</div>
<div data-line="crayon-52aff5941e13b173124393-43">
43</div>
<div data-line="crayon-52aff5941e13b173124393-44">
44</div>
<div data-line="crayon-52aff5941e13b173124393-45">
45</div>
<div data-line="crayon-52aff5941e13b173124393-46">
46</div>
<div data-line="crayon-52aff5941e13b173124393-47">
47</div>
<div data-line="crayon-52aff5941e13b173124393-48">
48</div>
<div data-line="crayon-52aff5941e13b173124393-49">
49</div>
<div data-line="crayon-52aff5941e13b173124393-50">
50</div>
<div data-line="crayon-52aff5941e13b173124393-51">
51</div>
<div data-line="crayon-52aff5941e13b173124393-52">
52</div>
<div data-line="crayon-52aff5941e13b173124393-53">
53</div>
<div data-line="crayon-52aff5941e13b173124393-54">
54</div>
<div data-line="crayon-52aff5941e13b173124393-55">
55</div>
<div data-line="crayon-52aff5941e13b173124393-56">
56</div>
<div data-line="crayon-52aff5941e13b173124393-57">
57</div>
<div data-line="crayon-52aff5941e13b173124393-58">
58</div>
<div data-line="crayon-52aff5941e13b173124393-59">
59</div>
<div data-line="crayon-52aff5941e13b173124393-60">
60</div>
<div data-line="crayon-52aff5941e13b173124393-61">
61</div>
<div data-line="crayon-52aff5941e13b173124393-62">
62</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5941e13b173124393-1">
    <div class=”gridBox”></div>
<div id="crayon-52aff5941e13b173124393-2">
        <h2 class=”grid-header”><?php _e(‘Gallery Page’, ‘rys’); ?></h2></div>
<div id="crayon-52aff5941e13b173124393-3">
        <div class=”boxes-container”></div>
<div id="crayon-52aff5941e13b173124393-4">
            <?php</div>
<div id="crayon-52aff5941e13b173124393-5">
                $args = array(</div>
<div id="crayon-52aff5941e13b173124393-6">
                    ’post_type’         => ‘post’,         // replace “post” if you want to display different post-type</div>
<div id="crayon-52aff5941e13b173124393-7">
                    ’category_name’        => ‘gallery’,    // category slug</div>
<div id="crayon-52aff5941e13b173124393-8">
                    ’posts_per_page’    => -1            //  show all posts</div>
<div id="crayon-52aff5941e13b173124393-9">
                );</div>
<div id="crayon-52aff5941e13b173124393-10">
</div>
<div id="crayon-52aff5941e13b173124393-11">
                // The Query</div>
<div id="crayon-52aff5941e13b173124393-12">
                $the_query = new WP_Query( $args );</div>
<div id="crayon-52aff5941e13b173124393-13">
</div>
<div id="crayon-52aff5941e13b173124393-14">
                // The Loop</div>
<div id="crayon-52aff5941e13b173124393-15">
                if ( $the_query->have_posts() ) {</div>
<div id="crayon-52aff5941e13b173124393-16">
</div>
<div id="crayon-52aff5941e13b173124393-17">
                    $c = 1;     // counter</div>
<div id="crayon-52aff5941e13b173124393-18">
                    $bpr = 4;     // number of column in each row</div>
<div id="crayon-52aff5941e13b173124393-19">
</div>
<div id="crayon-52aff5941e13b173124393-20">
                    while ( $the_query->have_posts() ) : $the_query->the_post();</div>
<div id="crayon-52aff5941e13b173124393-21">
                        ?></div>
<div id="crayon-52aff5941e13b173124393-22">
                            <div class=”grid-boxes <?php echo (($c != $bpr) ? ‘margin_right’ : ”); ?>”></div>
<div id="crayon-52aff5941e13b173124393-23">
                                <div class=”grid-thumbnail”></div>
<div id="crayon-52aff5941e13b173124393-24">
                                    <?php if ( has_post_thumbnail()) { ?></div>
<div id="crayon-52aff5941e13b173124393-25">
                                        <div class=”alignleft”></div>
<div id="crayon-52aff5941e13b173124393-26">
                                            <a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” ></div>
<div id="crayon-52aff5941e13b173124393-27">
                                            <?php the_post_thumbnail(); ?></div>
<div id="crayon-52aff5941e13b173124393-28">
                                            </a></div>
<div id="crayon-52aff5941e13b173124393-29">
                                        </div></div>
<div id="crayon-52aff5941e13b173124393-30">
                                    <?php } else { ?></div>
<div id="crayon-52aff5941e13b173124393-31">
                                        <img src=”<?php bloginfo(‘template_directory’); ?>/images/no-thumbnail.jpg” alt=”No Thumbnail” /></div>
<div id="crayon-52aff5941e13b173124393-32">
                                    <?php } ?></div>
<div id="crayon-52aff5941e13b173124393-33">
                                </div></div>
<div id="crayon-52aff5941e13b173124393-34">
                                <p class=”grid-title”></div>
<div id="crayon-52aff5941e13b173124393-35">
                                    <a href=”<?php the_permalink() ?>” title=”<?php printf(__(‘Permanent Link to %s’,'rys’), get_the_title()) ?>” rel=”bookmark”><?php the_title(); ?></a></div>
<div id="crayon-52aff5941e13b173124393-36">
                                </p></div>
<div id="crayon-52aff5941e13b173124393-37">
                            </div></div>
<div id="crayon-52aff5941e13b173124393-38">
                        <?php</div>
<div id="crayon-52aff5941e13b173124393-39">
</div>
<div id="crayon-52aff5941e13b173124393-40">
                        // we add a condition here to see if counter is equal to the number of column.</div>
<div id="crayon-52aff5941e13b173124393-41">
                        if( $c == $bpr ) {</div>
<div id="crayon-52aff5941e13b173124393-42">
                            echo ‘<div></div>’;</div>
<div id="crayon-52aff5941e13b173124393-43">
                            $c = 0;     // back the counter to 0 if the condition above is true.</div>
<div id="crayon-52aff5941e13b173124393-44">
                        }</div>
<div id="crayon-52aff5941e13b173124393-45">
                        $c++;             // increment counter of 1 until it hits the limit of column of every row.</div>
<div id="crayon-52aff5941e13b173124393-46">
</div>
<div id="crayon-52aff5941e13b173124393-47">
                    endwhile;</div>
<div id="crayon-52aff5941e13b173124393-48">
                } else {</div>
<div id="crayon-52aff5941e13b173124393-49">
</div>
<div id="crayon-52aff5941e13b173124393-50">
                    // no posts found</div>
<div id="crayon-52aff5941e13b173124393-51">
                    _e( ‘<h2>Oops!</h2>’, ‘rys’ );</div>
<div id="crayon-52aff5941e13b173124393-52">
                    _e( ‘<p>Sorry, seems there are no post at the moment.</p>’, ‘rys’ );</div>
<div id="crayon-52aff5941e13b173124393-53">
</div>
<div id="crayon-52aff5941e13b173124393-54">
                }</div>
<div id="crayon-52aff5941e13b173124393-55">
</div>
<div id="crayon-52aff5941e13b173124393-56">
                /* Restore original Post Data */</div>
<div id="crayon-52aff5941e13b173124393-57">
                wp_reset_postdata();</div>
<div id="crayon-52aff5941e13b173124393-58">
            ?></div>
<div id="crayon-52aff5941e13b173124393-59">
        </div></div>
<div id="crayon-52aff5941e13b173124393-60">
        <div class=”clear”></div></div>
<div id="crayon-52aff5941e13b173124393-61">
    </div></div>
<div id="crayon-52aff5941e13b173124393-62">
    </div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Confuse?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Look at below for all function description.</div>
<ul style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; list-style: square outside; margin: 20px 0px 20px 40px; padding: 0px; text-align: justify;">
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">has_post_thumbnail():</code> Returns a boolean if a post has a Post Thumbnail attached (true) or not (false).</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">the_post_thumbnail():</code> This display Post Thumbnail as set in post’s edit screen</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Others are self explanatory, and I also included comments.</li>
</ul>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
So now our <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>code is ready, lets create some <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>classes to make it look elegant.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML Output</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Here’s an <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>output that looks like.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5941e148547309683" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5941e148547309683-1">
1</div>
<div data-line="crayon-52aff5941e148547309683-2">
2</div>
<div data-line="crayon-52aff5941e148547309683-3">
3</div>
<div data-line="crayon-52aff5941e148547309683-4">
4</div>
<div data-line="crayon-52aff5941e148547309683-5">
5</div>
<div data-line="crayon-52aff5941e148547309683-6">
6</div>
<div data-line="crayon-52aff5941e148547309683-7">
7</div>
<div data-line="crayon-52aff5941e148547309683-8">
8</div>
<div data-line="crayon-52aff5941e148547309683-9">
9</div>
<div data-line="crayon-52aff5941e148547309683-10">
10</div>
<div data-line="crayon-52aff5941e148547309683-11">
11</div>
<div data-line="crayon-52aff5941e148547309683-12">
12</div>
<div data-line="crayon-52aff5941e148547309683-13">
13</div>
<div data-line="crayon-52aff5941e148547309683-14">
14</div>
<div data-line="crayon-52aff5941e148547309683-15">
15</div>
<div data-line="crayon-52aff5941e148547309683-16">
16</div>
<div data-line="crayon-52aff5941e148547309683-17">
17</div>
<div data-line="crayon-52aff5941e148547309683-18">
18</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5941e148547309683-1">
<div class=”gridBox”></div>
<div id="crayon-52aff5941e148547309683-2">
<h2 class=”grid-header”>Gallery Page</h2></div>
<div id="crayon-52aff5941e148547309683-3">
<div class=”boxes-container”></div>
<div id="crayon-52aff5941e148547309683-4">
</div>
<div id="crayon-52aff5941e148547309683-5">
<div class=”grid-boxes”></div>
<div id="crayon-52aff5941e148547309683-6">
    <div class=”grid-thumbnail”></div>
<div id="crayon-52aff5941e148547309683-7">
        <div class=”alignleft”> Gallery Image </div></div>
<div id="crayon-52aff5941e148547309683-8">
        <p>Gallery Title</p></div>
<div id="crayon-52aff5941e148547309683-9">
    </div></div>
<div id="crayon-52aff5941e148547309683-10">
    <div class=”grid-thumbnail”></div>
<div id="crayon-52aff5941e148547309683-11">
        <div class=”alignleft”> Gallery Image </div></div>
<div id="crayon-52aff5941e148547309683-12">
        <p>Gallery Title</p></div>
<div id="crayon-52aff5941e148547309683-13">
    </div></div>
<div id="crayon-52aff5941e148547309683-14">
    <div class=”clear”></div></div>
<div id="crayon-52aff5941e148547309683-15">
</div></div>
<div id="crayon-52aff5941e148547309683-16">
<div class=”clear”></div></div>
<div id="crayon-52aff5941e148547309683-17">
</div></div>
<div id="crayon-52aff5941e148547309683-18">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Here are <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>codes to make our post grid display professional and elegant.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5941e14d795030475" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5941e14d795030475-1">
1</div>
<div data-line="crayon-52aff5941e14d795030475-2">
2</div>
<div data-line="crayon-52aff5941e14d795030475-3">
3</div>
<div data-line="crayon-52aff5941e14d795030475-4">
4</div>
<div data-line="crayon-52aff5941e14d795030475-5">
5</div>
<div data-line="crayon-52aff5941e14d795030475-6">
6</div>
<div data-line="crayon-52aff5941e14d795030475-7">
7</div>
<div data-line="crayon-52aff5941e14d795030475-8">
8</div>
<div data-line="crayon-52aff5941e14d795030475-9">
9</div>
<div data-line="crayon-52aff5941e14d795030475-10">
10</div>
<div data-line="crayon-52aff5941e14d795030475-11">
11</div>
<div data-line="crayon-52aff5941e14d795030475-12">
12</div>
<div data-line="crayon-52aff5941e14d795030475-13">
13</div>
<div data-line="crayon-52aff5941e14d795030475-14">
14</div>
<div data-line="crayon-52aff5941e14d795030475-15">
15</div>
<div data-line="crayon-52aff5941e14d795030475-16">
16</div>
<div data-line="crayon-52aff5941e14d795030475-17">
17</div>
<div data-line="crayon-52aff5941e14d795030475-18">
18</div>
<div data-line="crayon-52aff5941e14d795030475-19">
19</div>
<div data-line="crayon-52aff5941e14d795030475-20">
20</div>
<div data-line="crayon-52aff5941e14d795030475-21">
21</div>
<div data-line="crayon-52aff5941e14d795030475-22">
22</div>
<div data-line="crayon-52aff5941e14d795030475-23">
23</div>
<div data-line="crayon-52aff5941e14d795030475-24">
24</div>
<div data-line="crayon-52aff5941e14d795030475-25">
25</div>
<div data-line="crayon-52aff5941e14d795030475-26">
26</div>
<div data-line="crayon-52aff5941e14d795030475-27">
27</div>
<div data-line="crayon-52aff5941e14d795030475-28">
28</div>
<div data-line="crayon-52aff5941e14d795030475-29">
29</div>
<div data-line="crayon-52aff5941e14d795030475-30">
30</div>
<div data-line="crayon-52aff5941e14d795030475-31">
31</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5941e14d795030475-1">
.margin_right{ margin: 0 10px 20px 0;}</div>
<div id="crayon-52aff5941e14d795030475-2">
</div>
<div id="crayon-52aff5941e14d795030475-3">
.gridBox {</div>
<div id="crayon-52aff5941e14d795030475-4">
   margin: 20px auto 16px auto;</div>
<div id="crayon-52aff5941e14d795030475-5">
   width: 975px;</div>
<div id="crayon-52aff5941e14d795030475-6">
}</div>
<div id="crayon-52aff5941e14d795030475-7">
</div>
<div id="crayon-52aff5941e14d795030475-8">
.gridBox .grid-header{</div>
<div id="crayon-52aff5941e14d795030475-9">
   border-bottom: 1px solid #DFDDD5;</div>
<div id="crayon-52aff5941e14d795030475-10">
   margin-bottom: 20px;</div>
<div id="crayon-52aff5941e14d795030475-11">
   padding-bottom: 10px;</div>
<div id="crayon-52aff5941e14d795030475-12">
}</div>
<div id="crayon-52aff5941e14d795030475-13">
</div>
<div id="crayon-52aff5941e14d795030475-14">
.gridBox .boxes-container{ }</div>
<div id="crayon-52aff5941e14d795030475-15">
</div>
<div id="crayon-52aff5941e14d795030475-16">
.gridBox .boxes-container .grid-boxes{</div>
<div id="crayon-52aff5941e14d795030475-17">
   float: left;</div>
<div id="crayon-52aff5941e14d795030475-18">
   background: #fff;</div>
<div id="crayon-52aff5941e14d795030475-19">
   padding: 6px;</div>
<div id="crayon-52aff5941e14d795030475-20">
   width: 222px;</div>
<div id="crayon-52aff5941e14d795030475-21">
   border: 1px solid #DFDDD5;</div>
<div id="crayon-52aff5941e14d795030475-22">
}</div>
<div id="crayon-52aff5941e14d795030475-23">
</div>
<div id="crayon-52aff5941e14d795030475-24">
.gridBox .boxes-container .grid-boxes .grid-thumbnail{ }</div>
<div id="crayon-52aff5941e14d795030475-25">
</div>
<div id="crayon-52aff5941e14d795030475-26">
.gridBox .boxes-container .grid-boxes .grid-title{</div>
<div id="crayon-52aff5941e14d795030475-27">
   text-align: center;</div>
<div id="crayon-52aff5941e14d795030475-28">
   margin-bottom: 0 !important;</div>
<div id="crayon-52aff5941e14d795030475-29">
   padding: 8px 0 6px 0;</div>
<div id="crayon-52aff5941e14d795030475-30">
   font-size: 14px;</div>
<div id="crayon-52aff5941e14d795030475-31">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That’s it hope you find this tutorial helpful.</div>
</div>

HOW TO CREATE OR DISPLAY WORDPRESS POST IN THUMBNAIL GRID VIEW DESIGN

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 g...

AUTOMATIC WORDPRESS THUMBNAIL WITHOUT CUSTOM FIELD AND FEATURED IMAGE

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Let’s say you want to show thumbnails in your blog’s front page or eitheir in your all articles. A lot of blogs do that now and it’s a good way of making the page look more alive.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
The only problem though is that using custom fields can be complicated and time-wasting. There is another way also to post a thumbnail on your post using featured image but it take time to do so.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
First, paste this function on your functions.php file.</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This code will automatically get the first image of your post to set as a thumbnail image.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a495003442343529" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
<a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a></div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a495003442343529-1">
1</div>
<div data-line="crayon-52aff5a495003442343529-2">
2</div>
<div data-line="crayon-52aff5a495003442343529-3">
3</div>
<div data-line="crayon-52aff5a495003442343529-4">
4</div>
<div data-line="crayon-52aff5a495003442343529-5">
5</div>
<div data-line="crayon-52aff5a495003442343529-6">
6</div>
<div data-line="crayon-52aff5a495003442343529-7">
7</div>
<div data-line="crayon-52aff5a495003442343529-8">
8</div>
<div data-line="crayon-52aff5a495003442343529-9">
9</div>
<div data-line="crayon-52aff5a495003442343529-10">
10</div>
<div data-line="crayon-52aff5a495003442343529-11">
11</div>
<div data-line="crayon-52aff5a495003442343529-12">
12</div>
<div data-line="crayon-52aff5a495003442343529-13">
13</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a495003442343529-1">
function get_image() {</div>
<div id="crayon-52aff5a495003442343529-2">
  global $post, $posts;</div>
<div id="crayon-52aff5a495003442343529-3">
  $first_img = ”;</div>
<div id="crayon-52aff5a495003442343529-4">
  ob_start();</div>
<div id="crayon-52aff5a495003442343529-5">
  ob_end_clean();</div>
<div id="crayon-52aff5a495003442343529-6">
  $output = preg_match_all(‘/<img.+src=[\'"]([^\'"]+)[\'"].*>/i’, $post->post_content, $matches);</div>
<div id="crayon-52aff5a495003442343529-7">
  $first_img = $matches [1] [0];</div>
<div id="crayon-52aff5a495003442343529-8">
</div>
<div id="crayon-52aff5a495003442343529-9">
  if(empty($first_img)){ //Defines a default image</div>
<div id="crayon-52aff5a495003442343529-10">
    $first_img = “/images/default.jpg”;</div>
<div id="crayon-52aff5a495003442343529-11">
  }</div>
<div id="crayon-52aff5a495003442343529-12">
  return $first_img;</div>
<div id="crayon-52aff5a495003442343529-13">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Once done, you can simply call the function within the loop to display the first image from the post:</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a49500f617721222" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a49500f617721222-1">
1</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a49500f617721222-1">
<?php echo get_image() ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Second, Add the thumbnail code in your index.php, home.php and single.php</h3>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a495015563074667" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a495015563074667-1">
1</div>
<div data-line="crayon-52aff5a495015563074667-2">
2</div>
<div data-line="crayon-52aff5a495015563074667-3">
3</div>
<div data-line="crayon-52aff5a495015563074667-4">
4</div>
<div data-line="crayon-52aff5a495015563074667-5">
5</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a495015563074667-1">
<div class=”thumbnail-post”></div>
<div id="crayon-52aff5a495015563074667-2">
   <a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”></div>
<div id="crayon-52aff5a495015563074667-3">
<img src=”<?php echo get_image() ?>” alt=”<?php the_title_attribute();  ?>” title=”" /></div>
<div id="crayon-52aff5a495015563074667-4">
</a></div>
<div id="crayon-52aff5a495015563074667-5">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Third, Add CSS code in your style.css.</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
You can style your thumbnail what ever you want to look more alive and good looking here is my <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>code, this are the codes that I am using in the above sample post.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5a49501a729224983" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5a49501a729224983-1">
1</div>
<div data-line="crayon-52aff5a49501a729224983-2">
2</div>
<div data-line="crayon-52aff5a49501a729224983-3">
3</div>
<div data-line="crayon-52aff5a49501a729224983-4">
4</div>
<div data-line="crayon-52aff5a49501a729224983-5">
5</div>
<div data-line="crayon-52aff5a49501a729224983-6">
6</div>
<div data-line="crayon-52aff5a49501a729224983-7">
7</div>
<div data-line="crayon-52aff5a49501a729224983-8">
8</div>
<div data-line="crayon-52aff5a49501a729224983-9">
9</div>
<div data-line="crayon-52aff5a49501a729224983-10">
10</div>
<div data-line="crayon-52aff5a49501a729224983-11">
11</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5a49501a729224983-1">
   .thumbnail-post img{</div>
<div id="crayon-52aff5a49501a729224983-2">
   float:right; width:140px;</div>
<div id="crayon-52aff5a49501a729224983-3">
   height:140px;</div>
<div id="crayon-52aff5a49501a729224983-4">
   border: 8px solid #f8f7f2;</div>
<div id="crayon-52aff5a49501a729224983-5">
   box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);</div>
<div id="crayon-52aff5a49501a729224983-6">
   -moz-box-shadow:3px 6px 8px 1px rgba(0, 0, 0, 0.3);</div>
<div id="crayon-52aff5a49501a729224983-7">
   -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3);</div>
<div id="crayon-52aff5a49501a729224983-8">
   margin-left: 23px;</div>
<div id="crayon-52aff5a49501a729224983-9">
   margin-bottom: 17px;</div>
<div id="crayon-52aff5a49501a729224983-10">
   margin-top: 7px;</div>
<div id="crayon-52aff5a49501a729224983-11">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
you don’t need to take your time editing croping for your thumbnail post, What do you think? Is the time saved worth it?</div>
</div>

AUTOMATIC WORDPRESS THUMBNAIL WITHOUT CUSTOM FIELD AND FEATURED IMAGE

Let’s say you want to show thumbnails in your blog’s front page or eitheir in your all articles. A lot of blogs do that now and it’s a goo...