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:

How to create a Bootstrap WordPress Theme? - Step 1

Hi All,

Necessary files to create Custom WordPress theme:

1. style.css
2. index.php 

You should create these files at the following location

1. In your WordPress installed folder - may be cpanel or local host (click to see how to install WordPress).  Find the "wp-content" folder. Click and open the folder

2.  Inside the  "wp-content" folder, You will see another folder named "themes". Click and open the folder.

3. Inside the "themes" folder, Create a folder with different name. It may be your theme name or a custom name.

4. Inside the newly created folder, create style.css and index.php

Simple steps :

WordPress Folder -> wp-content -> themes -> create a directory or folder with a name. (For Example :"myfolder") -> create style.css and index.php and save it.

Now you have created necessary files for your custom theme.

You should add the following code into your style.css file:

/*
Theme Name: Themename
Theme URI: 1wmedia.com
Author: 1wmedia.com
Author URI: http://1wmedia.com
Description: These the come with sidebar and full width pages.

*/  

In the above code,

Instead of "Themename " use your own or custom theme name. Others - you can use your own URI and Description.

Now login your dashboard -> Appearance -> Themes -> Your theme will display. -> click and activate the theme.

See the picture below:

First step is over. We will see next steps in next post.


Video Tutorial :