Neon Emmanuel Neon Emmanuel - 2 months ago 12
PHP Question

How to design blog layout on wordpress

i am kinda stocked in a project, had designed and created a WordPress theme, had made it install-able had done the widget sidebars and menu aspect , but my problem is designing the blog layout i mean getting the

foreach()
parameter to display all blog post, if possible with pagination and thumbnail my bootstrap code looks like this.

<div class="pc-version">
<div class="media">
<div class="media-left">
<div class="hovereffect">


<a href="#">
<img class="media-object" src="img/1.jpg" alt="..."></a>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>

</div>
</div>
<div class="media-body">
<h4 class="media-heading">5 marketing strategy that Would "freak you out.</h4>
<p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio.
Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
</div>
</div>

<div class="media">
<div class="media-left">
<div class="hovereffect">


<a href="#">
<img class="media-object" src="img/2.jpg" alt="..."></a>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>

</div>
</div>
<div class="media-body">
<h4 class="media-heading">6 resons we all love Califonia</h4>
<p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio.
Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
</div>
</div>

<div class="media">
<div class="media-left">
<div class="hovereffect">


<a href="#">
<img class="media-object" src="img/3.jpg" alt="..."></a>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>

</div>
</div>
<div class="media-body">
<h4 class="media-heading">Vacation vs' Home coming :-) </h4>
<p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio.
Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
</div>
</div>

<div class="media">
<div class="media-left">
<div class="hovereffect">


<a href="#">
<img class="media-object" src="img/4.jpg" alt="..."></a>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>

</div>
</div>
<div class="media-body">
<h4 class="media-heading">the real way to eat pancakes</h4>
<p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio.
Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
</div>
</div>

<div class="media">
<div class="media-left">
<div class="hovereffect">


<a href="#">
<img class="media-object" src="img/5.jpg" alt="..."></a>
<div class="overlay">
<h2>Share</h2>
<p class="icon-links">
<a href="#">
<span class="fa fa-twitter"></span>
</a>
<a href="#">
<span class="fa fa-facebook"></span>
</a>
<a href="#">
<span class="fa fa-instagram"></span>
</a>
</p>
</div>

</div>
</div>
<div class="media-body">
<h4 class="media-heading">Sklic , slim tall and skiny Girls - "my Source of joy" at Miama</h4>
<p class="media-author"><b>Neon Emmanuel</b> - Sept 28, 2016</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in nisi vitae nisi consequat hendrerit ac non odio.
Maecenas mattis iaculis mi, vitae lacinia massa fringilla ut. Vestibulum in dapibus lectus, suscipit imperdiet leo.
Sed tristique, nibh eget feugiat fringilla, mauris libero scelerisque enim, vitae ullamcorper eros tortor eu ex.
</div>
</div>
</div>


please anyone to place the thumbnail code and WordPress display all post code where it is supposed to be, would be very grateful.

Answer

To get thumbnails in wordpress you use the_post_thumbnail();

To get all the posts you can use wp_query or get_posts() and then use a loop with have_posts.

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array('post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged);
    $query = new WP_Query($args);
    if( $query->have_posts() ) :
    while( $query->have_posts() ) : $query->the_post(); ?>
    <div class="media">
    <div class="media-left">
    <div class="hovereffect">


        <a href="#"><?php the_post_thumbnail();?></a>
        <div class="overlay">
            <h2>Share</h2>
            <p class="icon-links">
                <a href="#">
                    <span class="fa fa-twitter"></span>
                </a>
                <a href="#">
                    <span class="fa fa-facebook"></span>
                </a>
                <a href="#">
                    <span class="fa fa-instagram"></span>
                </a>
            </p>
        </div>

    </div>
    </div>
     <div class="media-body">
        <h4 class="media-heading"><?php the_title()?></h4>
        <p class="media-author"><b><?php the_author()?></b> - <?php echo get_the_date(); ?></p>
            <?php the_content();?>
        </div>
    </div>
    <?php endwhile;?>
<!-- pagination -->
<?php next_posts_link(); ?>
<?php previous_posts_link(); ?>
<?php else : ?>
<!-- No posts found -->
<?php endif; ?>