Customizing or styling blog page on WordPress

Previous Tutorial : http://1wmedia.blogspot.in/2016/05/creating-default-blog-page-homephp-and.html


In this lesson, we will learn how to style default Blog page in WordPress. Please view my previous tutorials for creating blog page.

1. First go to you theme folder, open home.php file.
2. Here you can modify your blog page.
3. In our tutorial, Just remove the codes (fully) and add  the following code. or you can refer the video for particular edits.



<?php get_header(); ?>


    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
    
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="<?php bloginfo('template_directory'); ?>/images/avoid when blogging.jpg" alt="First slide">
         
        </div>
       
      
      </div>
     
    </div><!-- /.carousel -->


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      <div class="row">
     
         <h1 align="center"><?php wp_title('');  ?></h1>
     
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="container text-center">
<h1><a href="<?php the_permalink(); ?>"><?php the_title();  ?></a>  </h1>
<p><?php the_author(); ?></p>



     
  
                            <p><?php the_excerpt(); ?></p>
                            <p><a href="<?php the_permalink(); ?>">Read More...</a> <hr /></p>
                       
                       
   

              <?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

</div>
          
      </div><!-- /.row -->

      <hr class="featurette-divider">


     <?php get_footer(); ?>



4. Save the home.php with new code or edited codes.

5. In this tutorial we have added/modified the following:

For Page or BLOG title:

<h1 align="center"><?php wp_title('');  ?></h1>

 Giving link to the single post (But single post not work now. But link will work. We will add single.php file later for single post view):

<h1><a href="<?php the_permalink(); ?>"><?php the_title();  ?></a>  </h1>


Display Author Name:

<p><?php the_author(); ?></p> 


Change the_content(); function into the_excerpt(); and added Read more text by following code:

  <p><?php the_excerpt(); ?></p>
                            <p><a href="<?php the_permalink(); ?>">Read More...</a> <hr /></p>


One closing div changed (refer video).

Video Tutorial of this post: