{"id":7682,"date":"2011-03-28T06:20:52","date_gmt":"2011-03-28T10:20:52","guid":{"rendered":"http:\/\/info.template-help.com\/?p=7682"},"modified":"2017-12-12T11:18:49","modified_gmt":"2017-12-12T16:18:49","slug":"how-to-customize-blog-layout","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-customize-blog-layout.html","title":{"rendered":"How to customize blog layout"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>This tutorial will show you how to customize blog layout in WordPress. You&#8217;ll learn how to make the blog page display the posts excerpts, full post content and post titles. <\/p>\r\n<p>By default the blog layout (used for category archive, home page etc) displays:<\/p>\r\n<ul>\r\n<li>post title<\/li>\r\n<li> post details<\/li>\r\n<li> and post excerpt<\/li>\r\n<\/ul>\r\n<p>To customize the layout you need to open the<br \/>\r\n<strong>wp-content\/themes\/theme## <\/strong>  folder and there open the <strong>loop.php<\/strong> file with your HTML\/PHP editor. <\/p>\r\n<p>\r\n  Here is the code that determines how the post will be displayed in the blog format<\/p>\r\n<pre>\r\n\r\n&lt;div id=\"post-&lt;?php the_ID(); ?&gt;\" &lt;?php post_class(); ?&gt;&gt;\r\n\t&lt;h2 class=\"entry-title\"&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title(); ?&gt;\" rel=\"bookmark\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\r\n\t\t&lt;strong&gt;&lt;?php echo get_the_date('F j, Y'); ?&gt;&lt;\/strong&gt; \r\n\t\t\t\r\n\t&lt;?php if ( (is_archive()) or (is_search()) or (is_paged()) or (is_category()) ) : ?&gt;\r\n\t\t&lt;?php the_tags('&lt;span&gt;Tags:&lt;\/span&gt;', ', '); ?&gt;\r\n\t&lt;?php endif; ?&gt;\r\n\t\t\t\r\n\t&lt;div class=\"entry-content\"&gt;\r\n\t\t&lt;?php if (is_single()) { \r\n\t\t\t} else { \r\n\t\t\t\t$excerpt = get_the_excerpt(); echo my_string_limit_words($excerpt,'20');\r\n\t\t\t}\r\n\t\t?&gt;\r\n\t\t\t\t\t\r\n\t\t&lt;?php wp_link_pages( array( 'before' =&gt; '&lt;div class=\"page-link\"&gt;' . __( 'Pages:', 'theme1111' ), 'after' =&gt; '&lt;\/div&gt;' ) ); ?&gt;\r\n\t\t&lt;\/div&gt;&lt;!-- .entry-content --&gt;\r\n\t\t\t\r\n\t\t&lt;div class=\"entry-utility hentry\"&gt;\r\n\t\t\tby &lt;a href=\"&lt;?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?&gt;\"&gt;\r\n\t&lt;?php printf( get_the_author() ); ?&gt;&lt;\/a&gt;, &lt;a class=\"read-more\" href=\"&lt;?php the_permalink(); ?&gt;\"&gt;&lt;span&gt;&lt;?php _e('read more', 'theme1126') ?&gt;&lt;\/span&gt;&lt;\/a&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;&lt;!-- #post-## --&gt;\r\n<\/pre>\r\n<p>You can modify it according to your needs. <\/p>\r\n<p>&nbsp;<\/p>\r\n<p>For example:<\/p>\r\n<p>1. The code that displays the post title. <\/p>\r\n<pre>\r\n\r\n&lt;div id=\"post-&lt;?php the_ID(); ?&gt;\" &lt;?php post_class(); ?&gt;&gt;\r\n\t&lt;h2 class=\"entry-title\"&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title(); ?&gt;\" rel=\"bookmark\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\r\n<\/pre>\r\n<p>2. Post creation date. <\/p>\r\n<pre>\r\n&lt;strong&gt;&lt;?php echo get_the_date('F j, Y'); ?&gt;&lt;\/strong&gt; \r\n<\/pre>\r\n<p>3. Post excerpt and it&#8217;s limit (20 words) <\/p>\r\n<pre>\r\n&lt;?php if (is_single()) { \r\n\t\t\t} else { \r\n\t\t\t\t$excerpt = get_the_excerpt(); echo my_string_limit_words($excerpt,'20');\r\n\t\t\t}\r\n\t\t?&gt;\r\n<\/pre>\r\n<p>&nbsp;<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<br \/>\r\n<a href=\"\/help\/files\/wordpress\/blog-layout-content-excerpt.htm\" target=\"blank\">how to customize blog layout in WordPress<br \/>\r\n<\/a>\r\n<\/p>\r\n<\/p>\r\nEnjoy changing layouts and the whole website design? Go check out our creative <a href=\"https:\/\/www.templatemonster.com\/category\/design-wordpress-themes\/\">wordpress design themes<\/a>. Or try to build a unique project using one of the <a href=\"https:\/\/www.templatemonster.com\/category\/design-photography-wordpress-themes\/\">wordpress themes design<\/a>.\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to customize blog layout in WordPress. You&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[247,728],"tags":[2564,788,616,871,873,592,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/7682"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=7682"}],"version-history":[{"count":3,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/7682\/revisions"}],"predecessor-version":[{"id":83462,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/7682\/revisions\/83462"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=7682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=7682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=7682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}