How to customize blog layout

This tutorial will show you how to customize blog layout in WordPress. You’ll learn how to make the blog page display the posts excerpts, full post content and post titles.

By default the blog layout (used for category archive, home page etc) displays:

• post title
• post details
• and post excerpt

To customize the layout you need to open the
wp-content/themes/theme## folder and there open the loop.php file with your HTML/PHP editor.

Here is the code that determines how the post will be displayed in the blog format

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
		<strong><?php echo get_the_date('F j, Y'); ?></strong> 
			
	<?php if ( (is_archive()) or (is_search()) or (is_paged()) or (is_category()) ) : ?>
		<?php the_tags('<span>Tags:</span>', ', '); ?>
	<?php endif; ?>
			
	<div class="entry-content">
		<?php if (is_single()) { 
			} else { 
				$excerpt = get_the_excerpt(); echo my_string_limit_words($excerpt,'20');
			}
		?>
					
		<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'theme1111' ), 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->
			
		<div class="entry-utility hentry">
			by <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
	<?php printf( get_the_author() ); ?></a>, <a class="read-more" href="<?php the_permalink(); ?>"><span><?php _e('read more', 'theme1126') ?></span></a>
	</div>
</div><!-- #post-## -->

You can modify it according to your needs.

For example:

1. The code that displays the post title.

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

2. Post creation date.

<strong><?php echo get_the_date('F j, Y'); ?></strong> 

3. Post excerpt and it’s limit (20 words)

<?php if (is_single()) { 
			} else { 
				$excerpt = get_the_excerpt(); echo my_string_limit_words($excerpt,'20');
			}
		?>

Feel free to check the detailed video tutorial below:
how to customize blog layout in WordPress