Website At 100: Page

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

WORDPRESS CUSTOM REGISTRATION WITHOUT USING A PLUGIN

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="page-content content" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 40px;">
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
On past few days, I was posted an article about 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>Custom Login Page without Using a Plugin and on previous month I’ve posted another wordpress related article which is How to Create Custom Reset or Forget Password in <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>and to complete wordpress Meta I decided to create a new article “WordPress Custom Registration without Using a Plugin”, this sounds really interesting right? To add registration in your site you can find various wordpress plugins directly in <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>plugin directory but this tutorial might helpful to all web developer who are willing to learn in <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>.</div>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
In this tutorial we’re using <strong style="line-height: inherit;">wp_insert_user()</strong> function to insert a user into the database, this functions can update a current user or insert a new user based on whether the user’s ID is present.</div>
<h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Syntax</h3>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae9751daf79265752656" style="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-52ae9751daf79265752656-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-52ae9751daf79265752656-1">
<?php wp_insert_user( $userdata ) ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP code</h3>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
This contains <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 to validate and accept posted data from our <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>form.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae9751daf83255914285" style="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-52ae9751daf83255914285-1">
1</div>
<div data-line="crayon-52ae9751daf83255914285-2">
2</div>
<div data-line="crayon-52ae9751daf83255914285-3">
3</div>
<div data-line="crayon-52ae9751daf83255914285-4">
4</div>
<div data-line="crayon-52ae9751daf83255914285-5">
5</div>
<div data-line="crayon-52ae9751daf83255914285-6">
6</div>
<div data-line="crayon-52ae9751daf83255914285-7">
7</div>
<div data-line="crayon-52ae9751daf83255914285-8">
8</div>
<div data-line="crayon-52ae9751daf83255914285-9">
9</div>
<div data-line="crayon-52ae9751daf83255914285-10">
10</div>
<div data-line="crayon-52ae9751daf83255914285-11">
11</div>
<div data-line="crayon-52ae9751daf83255914285-12">
12</div>
<div data-line="crayon-52ae9751daf83255914285-13">
13</div>
<div data-line="crayon-52ae9751daf83255914285-14">
14</div>
<div data-line="crayon-52ae9751daf83255914285-15">
15</div>
<div data-line="crayon-52ae9751daf83255914285-16">
16</div>
<div data-line="crayon-52ae9751daf83255914285-17">
17</div>
<div data-line="crayon-52ae9751daf83255914285-18">
18</div>
<div data-line="crayon-52ae9751daf83255914285-19">
19</div>
<div data-line="crayon-52ae9751daf83255914285-20">
20</div>
<div data-line="crayon-52ae9751daf83255914285-21">
21</div>
<div data-line="crayon-52ae9751daf83255914285-22">
22</div>
<div data-line="crayon-52ae9751daf83255914285-23">
23</div>
<div data-line="crayon-52ae9751daf83255914285-24">
24</div>
<div data-line="crayon-52ae9751daf83255914285-25">
25</div>
<div data-line="crayon-52ae9751daf83255914285-26">
26</div>
<div data-line="crayon-52ae9751daf83255914285-27">
27</div>
<div data-line="crayon-52ae9751daf83255914285-28">
28</div>
<div data-line="crayon-52ae9751daf83255914285-29">
29</div>
<div data-line="crayon-52ae9751daf83255914285-30">
30</div>
<div data-line="crayon-52ae9751daf83255914285-31">
31</div>
<div data-line="crayon-52ae9751daf83255914285-32">
32</div>
<div data-line="crayon-52ae9751daf83255914285-33">
33</div>
<div data-line="crayon-52ae9751daf83255914285-34">
34</div>
<div data-line="crayon-52ae9751daf83255914285-35">
35</div>
<div data-line="crayon-52ae9751daf83255914285-36">
36</div>
<div data-line="crayon-52ae9751daf83255914285-37">
37</div>
<div data-line="crayon-52ae9751daf83255914285-38">
38</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae9751daf83255914285-1">
<?php</div>
<div id="crayon-52ae9751daf83255914285-2">
$err = ”;</div>
<div id="crayon-52ae9751daf83255914285-3">
$success = ”;</div>
<div id="crayon-52ae9751daf83255914285-4">
</div>
<div id="crayon-52ae9751daf83255914285-5">
global $wpdb, $PasswordHash, $current_user, $user_ID;</div>
<div id="crayon-52ae9751daf83255914285-6">
</div>
<div id="crayon-52ae9751daf83255914285-7">
if(isset($_POST['task']) && $_POST['task'] == ‘register’ ) {</div>
<div id="crayon-52ae9751daf83255914285-8">
    $pwd1 = $wpdb->escape(trim($_POST['pwd1']));</div>
<div id="crayon-52ae9751daf83255914285-9">
    $pwd2 = $wpdb->escape(trim($_POST['pwd2']));</div>
<div id="crayon-52ae9751daf83255914285-10">
    $first_name = $wpdb->escape(trim($_POST['first_name']));</div>
<div id="crayon-52ae9751daf83255914285-11">
    $last_name = $wpdb->escape(trim($_POST['last_name']));</div>
<div id="crayon-52ae9751daf83255914285-12">
    $email = $wpdb->escape(trim($_POST['email']));</div>
<div id="crayon-52ae9751daf83255914285-13">
    $username = $wpdb->escape(trim($_POST['username']));</div>
<div id="crayon-52ae9751daf83255914285-14">
</div>
<div id="crayon-52ae9751daf83255914285-15">
    if( $email == “” || $pwd1 == “” || $pwd2 == “” || $username == “” || $first_name == “” || $last_name == “”) {</div>
<div id="crayon-52ae9751daf83255914285-16">
        $err = ‘Please don\’t leave the required fields.’;</div>
<div id="crayon-52ae9751daf83255914285-17">
    } else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {</div>
<div id="crayon-52ae9751daf83255914285-18">
        $err = ‘Invalid email address.’;</div>
<div id="crayon-52ae9751daf83255914285-19">
    } else if(email_exists($email) ) {</div>
<div id="crayon-52ae9751daf83255914285-20">
        $err = ‘Email already exist.’;</div>
<div id="crayon-52ae9751daf83255914285-21">
    } else if($pwd1 <> $pwd2 ){</div>
<div id="crayon-52ae9751daf83255914285-22">
        $err = ‘Password do not match.’;</div>
<div id="crayon-52ae9751daf83255914285-23">
    } else {</div>
<div id="crayon-52ae9751daf83255914285-24">
</div>
<div id="crayon-52ae9751daf83255914285-25">
        $user_id = wp_insert_user( array (‘first_name’ => apply_filters(‘pre_user_first_name’, $first_name), ‘last_name’ => apply_filters(‘pre_user_last_name’, $last_name), ‘user_pass’ => apply_filters(‘pre_user_user_pass’, $pwd1), ‘user_login’ => apply_filters(‘pre_user_user_login’, $username), ‘user_email’ => apply_filters(‘pre_user_user_email’, $email), ‘role’ => ‘subscriber’ ) );</div>
<div id="crayon-52ae9751daf83255914285-26">
        if( is_wp_error($user_id) ) {</div>
<div id="crayon-52ae9751daf83255914285-27">
            $err = ‘Error on user creation.’;</div>
<div id="crayon-52ae9751daf83255914285-28">
        } else {</div>
<div id="crayon-52ae9751daf83255914285-29">
            do_action(‘user_register’, $user_id);</div>
<div id="crayon-52ae9751daf83255914285-30">
</div>
<div id="crayon-52ae9751daf83255914285-31">
            $success = ‘You\’re successfully register’;</div>
<div id="crayon-52ae9751daf83255914285-32">
        }</div>
<div id="crayon-52ae9751daf83255914285-33">
</div>
<div id="crayon-52ae9751daf83255914285-34">
    }</div>
<div id="crayon-52ae9751daf83255914285-35">
</div>
<div id="crayon-52ae9751daf83255914285-36">
}</div>
<div id="crayon-52ae9751daf83255914285-37">
</div>
<div id="crayon-52ae9751daf83255914285-38">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
Lets put in details the function we’re using in our code and its use.</div>
<ul style="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;">email_exists:</strong> To look if the user email already exist.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><strong style="line-height: inherit;">apply_filters:</strong> Calls filters for most of the <strong style="line-height: inherit;">$userdata</strong> fields with the prefix ‘pre_user’, where <strong style="line-height: inherit;">$userdata</strong> is the data contain to create user.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><strong style="line-height: inherit;">do_action:</strong> Calls ‘user_register’ hook when creating a new user giving the user’s ID.</li>
</ul>
<h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML code</h3>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae9751daf8b983190353" style="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-52ae9751daf8b983190353-1">
1</div>
<div data-line="crayon-52ae9751daf8b983190353-2">
2</div>
<div data-line="crayon-52ae9751daf8b983190353-3">
3</div>
<div data-line="crayon-52ae9751daf8b983190353-4">
4</div>
<div data-line="crayon-52ae9751daf8b983190353-5">
5</div>
<div data-line="crayon-52ae9751daf8b983190353-6">
6</div>
<div data-line="crayon-52ae9751daf8b983190353-7">
7</div>
<div data-line="crayon-52ae9751daf8b983190353-8">
8</div>
<div data-line="crayon-52ae9751daf8b983190353-9">
9</div>
<div data-line="crayon-52ae9751daf8b983190353-10">
10</div>
<div data-line="crayon-52ae9751daf8b983190353-11">
11</div>
<div data-line="crayon-52ae9751daf8b983190353-12">
12</div>
<div data-line="crayon-52ae9751daf8b983190353-13">
13</div>
<div data-line="crayon-52ae9751daf8b983190353-14">
14</div>
<div data-line="crayon-52ae9751daf8b983190353-15">
15</div>
<div data-line="crayon-52ae9751daf8b983190353-16">
16</div>
<div data-line="crayon-52ae9751daf8b983190353-17">
17</div>
<div data-line="crayon-52ae9751daf8b983190353-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-52ae9751daf8b983190353-1">
<form method=”post”></div>
<div id="crayon-52ae9751daf8b983190353-2">
<h3>Don’t have an account?<br/> Create one now.</h3></div>
<div id="crayon-52ae9751daf8b983190353-3">
<p><label>Last Name</label></p></div>
<div id="crayon-52ae9751daf8b983190353-4">
<p><input type=”text” value=”" name=”last_name” id=”last_name” /></p></div>
<div id="crayon-52ae9751daf8b983190353-5">
<p><label>First Name</label></p></div>
<div id="crayon-52ae9751daf8b983190353-6">
<p><input type=”text” value=”" name=”first_name” id=”first_name” /></p></div>
<div id="crayon-52ae9751daf8b983190353-7">
<p><label>Email</label></p></div>
<div id="crayon-52ae9751daf8b983190353-8">
<p><input type=”text” value=”" name=”email” id=”email” /></p></div>
<div id="crayon-52ae9751daf8b983190353-9">
<p><label>Username</label></p></div>
<div id="crayon-52ae9751daf8b983190353-10">
<p><input type=”text” value=”" name=”username” id=”username” /></p></div>
<div id="crayon-52ae9751daf8b983190353-11">
<p><label>Password</label></p></div>
<div id="crayon-52ae9751daf8b983190353-12">
<p><input type=”password” value=”" name=”pwd1″ id=”pwd1″ /></p></div>
<div id="crayon-52ae9751daf8b983190353-13">
<p><label>Password again</label></p></div>
<div id="crayon-52ae9751daf8b983190353-14">
<p><input type=”password” value=”" name=”pwd2″ id=”pwd2″ /></p></div>
<div id="crayon-52ae9751daf8b983190353-15">
<div class=”alignleft”><p><?php if($sucess != “”) { echo $sucess; } ?> <?php if($err != “”) { echo $err; } ?></p></div></div>
<div id="crayon-52ae9751daf8b983190353-16">
<button type=”submit” name=”btnregister” class=”button” >Submit</button></div>
<div id="crayon-52ae9751daf8b983190353-17">
<input type=”hidden” name=”task” value=”register” /></div>
<div id="crayon-52ae9751daf8b983190353-18">
</form></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
I’ve added one hidden field to validate if the submitted form is for registration.</div>
<h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Parameters</h3>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
<code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">$userdata</code> An array of user data.</div>
<h3 style="color: #333333; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Complete Source Code</h3>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
Below is the complete custom registration page source code, copy and paste the snippet below to test it yourself.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae9751daf91434913201" style="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-52ae9751daf91434913201-1">
1</div>
<div data-line="crayon-52ae9751daf91434913201-2">
2</div>
<div data-line="crayon-52ae9751daf91434913201-3">
3</div>
<div data-line="crayon-52ae9751daf91434913201-4">
4</div>
<div data-line="crayon-52ae9751daf91434913201-5">
5</div>
<div data-line="crayon-52ae9751daf91434913201-6">
6</div>
<div data-line="crayon-52ae9751daf91434913201-7">
7</div>
<div data-line="crayon-52ae9751daf91434913201-8">
8</div>
<div data-line="crayon-52ae9751daf91434913201-9">
9</div>
<div data-line="crayon-52ae9751daf91434913201-10">
10</div>
<div data-line="crayon-52ae9751daf91434913201-11">
11</div>
<div data-line="crayon-52ae9751daf91434913201-12">
12</div>
<div data-line="crayon-52ae9751daf91434913201-13">
13</div>
<div data-line="crayon-52ae9751daf91434913201-14">
14</div>
<div data-line="crayon-52ae9751daf91434913201-15">
15</div>
<div data-line="crayon-52ae9751daf91434913201-16">
16</div>
<div data-line="crayon-52ae9751daf91434913201-17">
17</div>
<div data-line="crayon-52ae9751daf91434913201-18">
18</div>
<div data-line="crayon-52ae9751daf91434913201-19">
19</div>
<div data-line="crayon-52ae9751daf91434913201-20">
20</div>
<div data-line="crayon-52ae9751daf91434913201-21">
21</div>
<div data-line="crayon-52ae9751daf91434913201-22">
22</div>
<div data-line="crayon-52ae9751daf91434913201-23">
23</div>
<div data-line="crayon-52ae9751daf91434913201-24">
24</div>
<div data-line="crayon-52ae9751daf91434913201-25">
25</div>
<div data-line="crayon-52ae9751daf91434913201-26">
26</div>
<div data-line="crayon-52ae9751daf91434913201-27">
27</div>
<div data-line="crayon-52ae9751daf91434913201-28">
28</div>
<div data-line="crayon-52ae9751daf91434913201-29">
29</div>
<div data-line="crayon-52ae9751daf91434913201-30">
30</div>
<div data-line="crayon-52ae9751daf91434913201-31">
31</div>
<div data-line="crayon-52ae9751daf91434913201-32">
32</div>
<div data-line="crayon-52ae9751daf91434913201-33">
33</div>
<div data-line="crayon-52ae9751daf91434913201-34">
34</div>
<div data-line="crayon-52ae9751daf91434913201-35">
35</div>
<div data-line="crayon-52ae9751daf91434913201-36">
36</div>
<div data-line="crayon-52ae9751daf91434913201-37">
37</div>
<div data-line="crayon-52ae9751daf91434913201-38">
38</div>
<div data-line="crayon-52ae9751daf91434913201-39">
39</div>
<div data-line="crayon-52ae9751daf91434913201-40">
40</div>
<div data-line="crayon-52ae9751daf91434913201-41">
41</div>
<div data-line="crayon-52ae9751daf91434913201-42">
42</div>
<div data-line="crayon-52ae9751daf91434913201-43">
43</div>
<div data-line="crayon-52ae9751daf91434913201-44">
44</div>
<div data-line="crayon-52ae9751daf91434913201-45">
45</div>
<div data-line="crayon-52ae9751daf91434913201-46">
46</div>
<div data-line="crayon-52ae9751daf91434913201-47">
47</div>
<div data-line="crayon-52ae9751daf91434913201-48">
48</div>
<div data-line="crayon-52ae9751daf91434913201-49">
49</div>
<div data-line="crayon-52ae9751daf91434913201-50">
50</div>
<div data-line="crayon-52ae9751daf91434913201-51">
51</div>
<div data-line="crayon-52ae9751daf91434913201-52">
52</div>
<div data-line="crayon-52ae9751daf91434913201-53">
53</div>
<div data-line="crayon-52ae9751daf91434913201-54">
54</div>
<div data-line="crayon-52ae9751daf91434913201-55">
55</div>
<div data-line="crayon-52ae9751daf91434913201-56">
56</div>
<div data-line="crayon-52ae9751daf91434913201-57">
57</div>
<div data-line="crayon-52ae9751daf91434913201-58">
58</div>
<div data-line="crayon-52ae9751daf91434913201-59">
59</div>
<div data-line="crayon-52ae9751daf91434913201-60">
60</div>
<div data-line="crayon-52ae9751daf91434913201-61">
61</div>
<div data-line="crayon-52ae9751daf91434913201-62">
62</div>
<div data-line="crayon-52ae9751daf91434913201-63">
63</div>
<div data-line="crayon-52ae9751daf91434913201-64">
64</div>
<div data-line="crayon-52ae9751daf91434913201-65">
65</div>
<div data-line="crayon-52ae9751daf91434913201-66">
66</div>
<div data-line="crayon-52ae9751daf91434913201-67">
67</div>
<div data-line="crayon-52ae9751daf91434913201-68">
68</div>
<div data-line="crayon-52ae9751daf91434913201-69">
69</div>
<div data-line="crayon-52ae9751daf91434913201-70">
70</div>
<div data-line="crayon-52ae9751daf91434913201-71">
71</div>
<div data-line="crayon-52ae9751daf91434913201-72">
72</div>
<div data-line="crayon-52ae9751daf91434913201-73">
73</div>
<div data-line="crayon-52ae9751daf91434913201-74">
74</div>
<div data-line="crayon-52ae9751daf91434913201-75">
75</div>
<div data-line="crayon-52ae9751daf91434913201-76">
76</div>
<div data-line="crayon-52ae9751daf91434913201-77">
77</div>
<div data-line="crayon-52ae9751daf91434913201-78">
78</div>
<div data-line="crayon-52ae9751daf91434913201-79">
79</div>
<div data-line="crayon-52ae9751daf91434913201-80">
80</div>
<div data-line="crayon-52ae9751daf91434913201-81">
81</div>
<div data-line="crayon-52ae9751daf91434913201-82">
82</div>
<div data-line="crayon-52ae9751daf91434913201-83">
83</div>
<div data-line="crayon-52ae9751daf91434913201-84">
84</div>
<div data-line="crayon-52ae9751daf91434913201-85">
85</div>
<div data-line="crayon-52ae9751daf91434913201-86">
86</div>
<div data-line="crayon-52ae9751daf91434913201-87">
87</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae9751daf91434913201-1">
<?php</div>
<div id="crayon-52ae9751daf91434913201-2">
/*</div>
<div id="crayon-52ae9751daf91434913201-3">
Template Name: Login Page</div>
<div id="crayon-52ae9751daf91434913201-4">
*/</div>
<div id="crayon-52ae9751daf91434913201-5">
</div>
<div id="crayon-52ae9751daf91434913201-6">
the_post()</div>
<div id="crayon-52ae9751daf91434913201-7">
get_header()</div>
<div id="crayon-52ae9751daf91434913201-8">
?></div>
<div id="crayon-52ae9751daf91434913201-9">
</div>
<div id="crayon-52ae9751daf91434913201-10">
<div class=”wrapper”></div>
<div id="crayon-52ae9751daf91434913201-11">
</div>
<div id="crayon-52ae9751daf91434913201-12">
    <?php</div>
<div id="crayon-52ae9751daf91434913201-13">
    $err = ”;</div>
<div id="crayon-52ae9751daf91434913201-14">
    $success = ”;</div>
<div id="crayon-52ae9751daf91434913201-15">
</div>
<div id="crayon-52ae9751daf91434913201-16">
    global $wpdb, $PasswordHash, $current_user, $user_ID;</div>
<div id="crayon-52ae9751daf91434913201-17">
</div>
<div id="crayon-52ae9751daf91434913201-18">
    if(isset($_POST['task']) && $_POST['task'] == ‘register’ ) {</div>
<div id="crayon-52ae9751daf91434913201-19">
</div>
<div id="crayon-52ae9751daf91434913201-20">
</div>
<div id="crayon-52ae9751daf91434913201-21">
        $pwd1 = $wpdb->escape(trim($_POST['pwd1']));</div>
<div id="crayon-52ae9751daf91434913201-22">
        $pwd2 = $wpdb->escape(trim($_POST['pwd2']));</div>
<div id="crayon-52ae9751daf91434913201-23">
        $first_name = $wpdb->escape(trim($_POST['first_name']));</div>
<div id="crayon-52ae9751daf91434913201-24">
        $last_name = $wpdb->escape(trim($_POST['last_name']));</div>
<div id="crayon-52ae9751daf91434913201-25">
        $email = $wpdb->escape(trim($_POST['email']));</div>
<div id="crayon-52ae9751daf91434913201-26">
        $username = $wpdb->escape(trim($_POST['username']));</div>
<div id="crayon-52ae9751daf91434913201-27">
</div>
<div id="crayon-52ae9751daf91434913201-28">
        if( $email == “” || $pwd1 == “” || $pwd2 == “” || $username == “” || $first_name == “” || $last_name == “”) {</div>
<div id="crayon-52ae9751daf91434913201-29">
            $err = ‘Please don\’t leave the required fields.’;</div>
<div id="crayon-52ae9751daf91434913201-30">
        } else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {</div>
<div id="crayon-52ae9751daf91434913201-31">
            $err = ‘Invalid email address.’;</div>
<div id="crayon-52ae9751daf91434913201-32">
        } else if(email_exists($email) ) {</div>
<div id="crayon-52ae9751daf91434913201-33">
            $err = ‘Email already exist.’;</div>
<div id="crayon-52ae9751daf91434913201-34">
        } else if($pwd1 <> $pwd2 ){</div>
<div id="crayon-52ae9751daf91434913201-35">
            $err = ‘Password do not match.’;</div>
<div id="crayon-52ae9751daf91434913201-36">
        } else {</div>
<div id="crayon-52ae9751daf91434913201-37">
</div>
<div id="crayon-52ae9751daf91434913201-38">
            $user_id = wp_insert_user( array (‘first_name’ => apply_filters(‘pre_user_first_name’, $first_name), ‘last_name’ => apply_filters(‘pre_user_last_name’, $last_name), ‘user_pass’ => apply_filters(‘pre_user_user_pass’, $pwd1), ‘user_login’ => apply_filters(‘pre_user_user_login’, $username), ‘user_email’ => apply_filters(‘pre_user_user_email’, $email), ‘role’ => ‘subscriber’ ) );</div>
<div id="crayon-52ae9751daf91434913201-39">
            if( is_wp_error($user_id) ) {</div>
<div id="crayon-52ae9751daf91434913201-40">
                $err = ‘Error on user creation.’;</div>
<div id="crayon-52ae9751daf91434913201-41">
            } else {</div>
<div id="crayon-52ae9751daf91434913201-42">
                do_action(‘user_register’, $user_id);</div>
<div id="crayon-52ae9751daf91434913201-43">
</div>
<div id="crayon-52ae9751daf91434913201-44">
                $success = ‘You\’re successfully register’;</div>
<div id="crayon-52ae9751daf91434913201-45">
            }</div>
<div id="crayon-52ae9751daf91434913201-46">
</div>
<div id="crayon-52ae9751daf91434913201-47">
        }</div>
<div id="crayon-52ae9751daf91434913201-48">
</div>
<div id="crayon-52ae9751daf91434913201-49">
    }</div>
<div id="crayon-52ae9751daf91434913201-50">
    ?></div>
<div id="crayon-52ae9751daf91434913201-51">
</div>
<div id="crayon-52ae9751daf91434913201-52">
        <!–display error/success message–></div>
<div id="crayon-52ae9751daf91434913201-53">
    <div id=”message”></div>
<div id="crayon-52ae9751daf91434913201-54">
        <?php</div>
<div id="crayon-52ae9751daf91434913201-55">
            if(! empty($err) ) :</div>
<div id="crayon-52ae9751daf91434913201-56">
                echo ‘<p>’.$err.’</p>’;</div>
<div id="crayon-52ae9751daf91434913201-57">
            endif;</div>
<div id="crayon-52ae9751daf91434913201-58">
        ?></div>
<div id="crayon-52ae9751daf91434913201-59">
</div>
<div id="crayon-52ae9751daf91434913201-60">
        <?php</div>
<div id="crayon-52ae9751daf91434913201-61">
            if(! empty($success) ) :</div>
<div id="crayon-52ae9751daf91434913201-62">
                echo ‘<p>’.$success.’</p>’;</div>
<div id="crayon-52ae9751daf91434913201-63">
            endif;</div>
<div id="crayon-52ae9751daf91434913201-64">
        ?></div>
<div id="crayon-52ae9751daf91434913201-65">
    </div></div>
<div id="crayon-52ae9751daf91434913201-66">
</div>
<div id="crayon-52ae9751daf91434913201-67">
    <form method=”post”></div>
<div id="crayon-52ae9751daf91434913201-68">
        <h3>Don’t have an account?<br/> Create one now.</h3></div>
<div id="crayon-52ae9751daf91434913201-69">
        <p><label>Last Name</label></p></div>
<div id="crayon-52ae9751daf91434913201-70">
        <p><input type=”text” value=”" name=”last_name” id=”last_name” /></p></div>
<div id="crayon-52ae9751daf91434913201-71">
        <p><label>First Name</label></p></div>
<div id="crayon-52ae9751daf91434913201-72">
        <p><input type=”text” value=”" name=”first_name” id=”first_name” /></p></div>
<div id="crayon-52ae9751daf91434913201-73">
        <p><label>Email</label></p></div>
<div id="crayon-52ae9751daf91434913201-74">
        <p><input type=”text” value=”" name=”email” id=”email” /></p></div>
<div id="crayon-52ae9751daf91434913201-75">
        <p><label>Username</label></p></div>
<div id="crayon-52ae9751daf91434913201-76">
        <p><input type=”text” value=”" name=”username” id=”username” /></p></div>
<div id="crayon-52ae9751daf91434913201-77">
        <p><label>Password</label></p></div>
<div id="crayon-52ae9751daf91434913201-78">
        <p><input type=”password” value=”" name=”pwd1″ id=”pwd1″ /></p></div>
<div id="crayon-52ae9751daf91434913201-79">
        <p><label>Password again</label></p></div>
<div id="crayon-52ae9751daf91434913201-80">
        <p><input type=”password” value=”" name=”pwd2″ id=”pwd2″ /></p></div>
<div id="crayon-52ae9751daf91434913201-81">
        <div class=”alignleft”><p><?php if($sucess != “”) { echo $sucess; } ?> <?php if($err != “”) { echo $err; } ?></p></div></div>
<div id="crayon-52ae9751daf91434913201-82">
        <button type=”submit” name=”btnregister” class=”button” >Submit</button></div>
<div id="crayon-52ae9751daf91434913201-83">
        <input type=”hidden” name=”task” value=”register” /></div>
<div id="crayon-52ae9751daf91434913201-84">
    </form></div>
<div id="crayon-52ae9751daf91434913201-85">
</div>
<div id="crayon-52ae9751daf91434913201-86">
</div></div>
<div id="crayon-52ae9751daf91434913201-87">
<?php get_footer() ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
The detailed basic tutorial on how to create custom pate template can be found at WP Codex.</div>
<div style="line-height: inherit; margin-bottom: 18px; text-align: justify;">
That’s it happy coding, if you have question, clarification just use the comment below or contact me directly.</div>
</div>
</div>

WORDPRESS CUSTOM REGISTRATION WITHOUT USING A PLUGIN

On past few days, I was posted an article about creating WordPress Custom Login Page without Using a Plugin and on previous month I’ve ...