Website At 100: Post

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

HOW TO DISPLAY CATEGORY POST ON WORDPRESS BLOG HOMEPAGE

<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;">
We do have a set of categories in which we classify the posts, and by default, all the new posts recently posted from all the categories appear on the home page of 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>blog. If you wish to show to your home page visitors only the new posts from some specified categories, that you specialize writing on, this is how you can do that.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
In the wp-admin section of 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>blog, go to the <em style="line-height: inherit;">Appearance=> Editor => home.php</em> (if exists) or index.php (if home.php does not exist). You would get the Appearance tab on the left hand side of the admin panel and the template files on the right hand side.</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 can also use FTP to open home.php or index.php inside the theme that you are selected. (Recommended for advance user or developer)</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
In the <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">home.php</code> or <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">index.php</code> code, search this line of code or <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>loop.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52afe859240b1866070416" 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-52afe859240b1866070416-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-52afe859240b1866070416-1">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?></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;">
Before the start of the <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> loop, add the code below</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52afe859240bb993836362" 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-52afe859240bb993836362-1">
1</div>
<div data-line="crayon-52afe859240bb993836362-2">
2</div>
<div data-line="crayon-52afe859240bb993836362-3">
3</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52afe859240bb993836362-1">
<?php if (!is_paged() and is_home()) {</div>
<div id="crayon-52afe859240bb993836362-2">
      query_posts(‘cat=1’);</div>
<div id="crayon-52afe859240bb993836362-3">
} ?></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;">
Note:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
where 1 is the category ID to be displayed or the category ID you want to show on blog homepage.</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 can find the category IDs of the required categories by going to the <strong style="line-height: inherit;">Posts => Categories </strong>panel of the admin screen. Hover on any categoryname appearing on the right hand side of the panel, and you would see the Category ID in the link of the category in the browser status bar.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Below is the screenshot of the browser status bar showing the <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>category ID.</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 can tweak all categories to be displayed on the homepage by replacing the query_posts() code above in the code below.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Display posts that have these categories, using category id:</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52afe859240c2168000237" 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-52afe859240c2168000237-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-52afe859240c2168000237-1">
query_posts( ‘cat=2,6,17,38′ );</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;">
Display posts that have these categories, using category slug:</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52afe859240c7366507929" 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-52afe859240c7366507929-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-52afe859240c7366507929-1">
query_posts( ‘category_name=staff,news’ );</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;">
Display all posts except those from a category by prefixing its id with a ‘-’ (minus) sign.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52afe859240cc727860834" 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-52afe859240cc727860834-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-52afe859240cc727860834-1">
query_posts( ‘cat=-3′ );</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;">
Display posts that are in multiple categories. This shows posts that are in both categories 2 and 6:</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52afe859240d0915436724" 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-52afe859240d0915436724-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-52afe859240d0915436724-1">
query_posts( array( ‘category__and’ => array( 2, 6 ) ) );</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

HOW TO DISPLAY CATEGORY POST ON WORDPRESS BLOG HOMEPAGE

We do have a set of categories in which we classify the posts, and by default, all the new posts recently posted from all the categories a...

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

HOW TO GET CATEGORY SLUG IN WORDPRESS

HOW TO GET CATEGORY SLUG IN WORDPRESS

Using category slug is the best way to use in wordpress custom query code as the category name does not always work. Rather use ‘categor...

RS SLIDER

RS SLIDER

RS Slider is a simple Joomla Module Slider that rotate images in a given time, it support an unlimited number of images and customizable...

TRACK AND DISPLAY POST VIEWS WITHOUT USING A PLUGIN – WORDPRESS

<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;">
This simple snippet simply <strong style="line-height: inherit;">display and track post or page view in your site</strong>, this is helpful when you want to track post views of your site page and I want to share you how easy to do and apply in your site.</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;">
PHP</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Add 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>script in your functions.php file of your theme, or if you don’t have one, please create and copy and paste the script bellow.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aabad9060cf935659389" 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-52aabad9060cf935659389-1">
1</div>
<div data-line="crayon-52aabad9060cf935659389-2">
2</div>
<div data-line="crayon-52aabad9060cf935659389-3">
3</div>
<div data-line="crayon-52aabad9060cf935659389-4">
4</div>
<div data-line="crayon-52aabad9060cf935659389-5">
5</div>
<div data-line="crayon-52aabad9060cf935659389-6">
6</div>
<div data-line="crayon-52aabad9060cf935659389-7">
7</div>
<div data-line="crayon-52aabad9060cf935659389-8">
8</div>
<div data-line="crayon-52aabad9060cf935659389-9">
9</div>
<div data-line="crayon-52aabad9060cf935659389-10">
10</div>
<div data-line="crayon-52aabad9060cf935659389-11">
11</div>
<div data-line="crayon-52aabad9060cf935659389-12">
12</div>
<div data-line="crayon-52aabad9060cf935659389-13">
13</div>
<div data-line="crayon-52aabad9060cf935659389-14">
14</div>
<div data-line="crayon-52aabad9060cf935659389-15">
15</div>
<div data-line="crayon-52aabad9060cf935659389-16">
16</div>
<div data-line="crayon-52aabad9060cf935659389-17">
17</div>
<div data-line="crayon-52aabad9060cf935659389-18">
18</div>
<div data-line="crayon-52aabad9060cf935659389-19">
19</div>
<div data-line="crayon-52aabad9060cf935659389-20">
20</div>
<div data-line="crayon-52aabad9060cf935659389-21">
21</div>
<div data-line="crayon-52aabad9060cf935659389-22">
22</div>
<div data-line="crayon-52aabad9060cf935659389-23">
23</div>
<div data-line="crayon-52aabad9060cf935659389-24">
24</div>
<div data-line="crayon-52aabad9060cf935659389-25">
25</div>
<div data-line="crayon-52aabad9060cf935659389-26">
26</div>
<div data-line="crayon-52aabad9060cf935659389-27">
27</div>
<div data-line="crayon-52aabad9060cf935659389-28">
28</div>
<div data-line="crayon-52aabad9060cf935659389-29">
29</div>
<div data-line="crayon-52aabad9060cf935659389-30">
30</div>
<div data-line="crayon-52aabad9060cf935659389-31">
31</div>
<div data-line="crayon-52aabad9060cf935659389-32">
32</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aabad9060cf935659389-1">
function set_post_views( $postID )</div>
<div id="crayon-52aabad9060cf935659389-2">
{</div>
<div id="crayon-52aabad9060cf935659389-3">
    $count_key = ‘post_views_count’;</div>
<div id="crayon-52aabad9060cf935659389-4">
    $count = get_post_meta($postID, $count_key, true);</div>
<div id="crayon-52aabad9060cf935659389-5">
    if($count==”){</div>
<div id="crayon-52aabad9060cf935659389-6">
        $count = 0;</div>
<div id="crayon-52aabad9060cf935659389-7">
        // delete old ‘post_views_count’ value.</div>
<div id="crayon-52aabad9060cf935659389-8">
        delete_post_meta( $postID, $count_key );</div>
<div id="crayon-52aabad9060cf935659389-9">
        // add new ‘post_views_count’ value.</div>
<div id="crayon-52aabad9060cf935659389-10">
        add_post_meta( $postID, $count_key, ’0′ );</div>
<div id="crayon-52aabad9060cf935659389-11">
    } else {</div>
<div id="crayon-52aabad9060cf935659389-12">
        $count++;</div>
<div id="crayon-52aabad9060cf935659389-13">
        // update old ‘post_views_count’ value.</div>
<div id="crayon-52aabad9060cf935659389-14">
        update_post_meta( $postID, $count_key, $count );</div>
<div id="crayon-52aabad9060cf935659389-15">
    }</div>
<div id="crayon-52aabad9060cf935659389-16">
}</div>
<div id="crayon-52aabad9060cf935659389-17">
</div>
<div id="crayon-52aabad9060cf935659389-18">
function get_post_views( $postID )</div>
<div id="crayon-52aabad9060cf935659389-19">
{</div>
<div id="crayon-52aabad9060cf935659389-20">
    $count_key = ‘post_views_count’;</div>
<div id="crayon-52aabad9060cf935659389-21">
    $count = get_post_meta( $postID, $count_key, true );</div>
<div id="crayon-52aabad9060cf935659389-22">
    if($count==”) {</div>
<div id="crayon-52aabad9060cf935659389-23">
        // delete old ‘post_views_count’ value.</div>
<div id="crayon-52aabad9060cf935659389-24">
        delete_post_meta( $postID, $count_key );</div>
<div id="crayon-52aabad9060cf935659389-25">
        // add new ‘post_views_count’ value.</div>
<div id="crayon-52aabad9060cf935659389-26">
        add_post_meta( $postID, $count_key, ’0′ );</div>
<div id="crayon-52aabad9060cf935659389-27">
</div>
<div id="crayon-52aabad9060cf935659389-28">
        return “0 View”;</div>
<div id="crayon-52aabad9060cf935659389-29">
    }</div>
<div id="crayon-52aabad9060cf935659389-30">
</div>
<div id="crayon-52aabad9060cf935659389-31">
    return $count.’ Views’;</div>
<div id="crayon-52aabad9060cf935659389-32">
}</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;">
Ok let’s enumerate further the two functions above.</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;"><strong style="line-height: inherit;">set_post_views:</strong> This function set or create number of post view into post meta of your post.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><strong style="line-height: inherit;">get_post_views:</strong> This function simply gets the number of post we set in set_post_views and return or display the result.</li>
</ul>
<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;">
How to use the function?</h3>
<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;">
Step 1:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Place this snippet within your single.php file inside the loop.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aabad9060db322079151" 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-52aabad9060db322079151-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-52aabad9060db322079151-1">
set_post_views (get_the_ID());</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;">
Step 2:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Just place this snippet below <strong style="line-height: inherit;">set_post_views()</strong> in your single.php file of your theme, where you want the post views to display.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aabad9060e0186290672" 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-52aabad9060e0186290672-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-52aabad9060e0186290672-1">
echo get_post_views (get_the_ID());</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 like this tutorial.</div>
</div>

TRACK AND DISPLAY POST VIEWS WITHOUT USING A PLUGIN – WORDPRESS

This simple snippet simply display and track post or page view in your site , this is helpful when you want to track post views of your s...