mercredi 5 octobre 2016

How to design blog layout on wordpress

Vote count: 0

i am kinda stocked in a project, had desinged 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 any one to place the thumbnail code and wordpress display all post code where it suppose to be , would be very great-full.

asked 29 secs ago

Let's block ads! (Why?)



How to design blog layout on wordpress

Aucun commentaire:

Enregistrer un commentaire