Edit: I am attempting to get this result, where my index.php generates a Bootstrap panel-body containing a corresponding post title each time a new post is made. I also want this panel-body to act as a link to the corresponding post (e.g. there is a post with the title ‘SoFA at Market Day’ and the panel-body on index.php contains the ‘SoFA at Market Day’ text and links to the ‘SoFA on Market Day’ post). Currently these panel-body’s are contained in two separate columns, as shown in the code below.

Additionally, I would like these thumbnails to be arranged in descending order, with the newest post at the top left and the older posts following to the right, and then in the next row on the left, etc, as shown in the example image (meaning that ‘SoFA at Market Day is the most recent post, ‘Interview with…’ is the 2nd most recent, and ‘Cut Thumb ARI’ is the 3rd most recent, ‘Lecture by…’ is the 4th most recent, etc, etc).

This is what my index.php currently looks like:

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package wpbootstrap-sofa
 */

get_header(); ?>

<div class="starter-template">
    <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
        <div class="center-block">
            <a href="http://www.uqsofa.com/">
                    <img src="<?php echo get_bloginfo("template_directory"); ?>/img/sofa-logo.png" class="img-responsive center-block" alt="UQ SoFA logo">
            </a>
        </div>
        <!-- /.center-block -->
    </div>
    </div>
        <div class="row">
                <div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4">
                        <div class="navbar-collapse collapse sidebar-navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="http://www.uqsofa.com/">home</a>
                                    </li>
                                    <li><a href="#about">about</a>
                                    </li>
                                    <li><a href="#blog">blog posts</a>
                                    </li>
                                    <li><a href="http://www.uqsofa.com/blog-post-submissions/">submit blog post</a>
                                    </li>
                                    <li><a href="#events">events</a>
                                    </li>
                                    <li><a href="http://www.uqsofa.com/contact/">contact</a>
                                    </li>
                                    <li><a href="http://uqsofa.bigcartel.com/" target="_blank">store</a>
                                    </li>
                                </ul>
                        </div>
                        <!--/.collapse navbar-collapse -->
                    </div>
                    <!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 -->

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">SoFA at Market Day</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">Cut Thumb ARI</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">GoMA Talks</div>
                        </div>
                        <!-- /.panel panel-default-->
                </div>
                <!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">Interview with...</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">Lecture by...</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">Post #474</div>
                        </div>
                        <!-- /.panel panel-default-->
                </div>
                <!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
        </div>
        <!-- /.row-->
</div>
<!-- /.starter-template-->

</div>
<!-- /.container -->

</div>
<!-- /.background -->


<?php
get_footer();?>

I’ve really got no idea where to begin something like this, and I don’t know if it’s actually possible, so any help would be much appreciated. I’ve read through a lot of posts, but none seem to be trying to recreate what I am wanting to do with the post thumbnail echoing the post title. Thanks in advance.

Read more here: Edit: Bootstrap panel-body that echoes a post title and acts as a link to the corresponding post


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: