0

I started to learn WP Theme development from a wordpress video tutorials on Tutsplus.

It all went well and then I decided to practice a lot about HTML to WP theme Conversion.

I downloaded this free bootstrap template.

I was able to create header.php, footer.php, nav menus and many functions that I learned from here, but I got struck in index.php file creation and content.php file creation.

This is the HTML that is a little bit hurdle for me →

  <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('img/home-bg.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Clean Blog</h1>
                        <hr class="small">
                        <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-preview">
                    <a href="post.html">
                        <h2 class="post-title">
                            Man must explore, and this is exploration at its greatest
                        </h2>
                        <h3 class="post-subtitle">
                            Problems look mighty small from 150 miles up
                        </h3>
                    </a>
                    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 24, 2014</p>
                </div>
                <hr>
                <div class="post-preview">
                    <a href="post.html">
                        <h2 class="post-title">
                            I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
                        </h2>
                    </a>
                    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on September 18, 2014</p>
                </div>
                <hr>
                <div class="post-preview">
                    <a href="post.html">
                        <h2 class="post-title">
                            Science has not yet mastered prophecy
                        </h2>
                        <h3 class="post-subtitle">
                            We predict too much for the next year and yet far too little for the next ten.
                        </h3>
                    </a>
                    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on August 24, 2014</p>
                </div>
                <hr>
                <div class="post-preview">
                    <a href="post.html">
                        <h2 class="post-title">
                            Failure is not an option
                        </h2>
                        <h3 class="post-subtitle">
                            Many say exploration is part of our destiny, but it’s actually our duty to future generations.
                        </h3>
                    </a>
                    <p class="post-meta">Posted by <a href="#">Start Bootstrap</a> on July 8, 2014</p>
                </div>
                <hr>
                <!-- Pager -->
                <ul class="pager">
                    <li class="next">
                        <a href="#">Older Posts &rarr;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <hr>

Actually this part is bothering me a lot that whether it will go in index.php or content.php

  <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('img/home-bg.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Clean Blog</h1>
                        <hr class="small">
                        <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

My Difficulty → The front page is not showing Post Titles as was showing in the HTML, what is the mistake. Here is my index.php and content.php files →

INDEX.PHP →

<?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 html2wpsecond
 */

get_header(); ?>

    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('img/home-bg.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1>Clean Blog</h1>
                        <hr class="small">
                        <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-preview">
                    <?php If ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <?php get_template_part( 'content', get_post_format() ); ?>
                    <?php endwhile; ?>

                    <?php else: ?>
                    <?php get_template_part('content','none' ); ?>
                    <?php endif; ?>
                </div>



                <!-- Pager -->
                <ul class="pager">
                    <li class="next">
                        <a href="#">Older Posts &rarr;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <hr>

<?php
get_sidebar();
get_footer();

CONTENT.PHP →

<?php  

/*
# =======================================
# content.php
#
# The Theme
# =======================================
*/  

?>

<div id=post-<?php the_ID(); ?> <?php post_class('post col-md-6'); ?>>
            <a href="<?php the_permalink( ); ?>" title="<?php the_title_attribute(); ?>" class="post-thumbnail">
            <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
            </a>


    <div class="post-preview">
        <header>
            <?php
                echo '<a href="' . get_the_permalink() . '"><h3>' . get_the_title() . '</h3></a>';
                blogeto_post_meta();
            ?>
        </header>
            <?php the_content(__('Read More', 'blogeto')); ?>
    </div>
</div>
0

Replace the "Main Content" block in index.php with the following. This way you do not need a content.php file and can query the posts right in index.php. The Next/Previous post navigation will be functional as-well.

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

                <?php
                // Start the loop.
                while ( have_posts() ) : the_post();
                    ?>
                    <div class="post-preview">
                        <a href="<?php the_permalink(); ?>">
                            <h2 class="post-title">
                                <?php the_title(); ?>
                            </h2>
                            <h3 class="post-subtitle">
                                <?php the_excerpt(); ?>
                            </h3>
                        </a>
                        <p class="post-meta">Posted by <?php the_author(); ?> on <?php the_time('jS F Y') ?></p>
                    </div>
                    <?php

                // End of the loop.
                endwhile;
                ?>


            <!-- Pager -->
            <ul class="pager">
                <li class="next">
                    <?php next_posts_link('&laquo; Older Entries') ?>
                    <?php previous_posts_link('Newer Entries &raquo;') ?>
                </li>
            </ul>
        </div>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.