How to Display Post Excerpts in twenty twelve WordPress Theme

One year back, I changed default blog from Google’s blogger to self-hosted WordPress. My blog was over nine years old and this is important decision to swap from Google’s shared hosting to self-hosted WordPress hosting. First and foremost is whether to buy a customised theme from third party or create a WordPress theme all by myself and introduce to site. I read different articles and understands from these that it is always been a good idea to go for a customized theme which webmaster himself creates with different designs and learning from different sources. WordPress is run and created by Auttomatic group an open source organization and for this it is essential to implement their own default theme and customised it fully so that my website would be nice and attractive with every feature.

First and foremost, above all these features are custom excerpts for every article in landing page of website. I decided to implement theme ‘twentytwelve’ for my site and customize to suit better for running of website. First and foremost I do not want to show every article in full length in landing page of website. Landing page of website is when a visitor browse http://mohanmekap.com and reaches to website and the first instance he/she finds a number of articles there, but without custom excerpts landing page will load in greater times due to load of the article in full. I have used five article links in landing page of article and with custom excerpts implemented fully now every article is being shown in excerpts format to let know visitors about contents of article and then they could click on ‘continue reading’ or ‘read more’ link to open article page in full manner.

Front page of mohanmekap.com
Landing Page of mohanmekap.com

This helps visitors to read more about the article and for custom excerpts on visitors could understand the theme of the article and also it also helps better in search engine optimization which works on page speed of landing pages and that helps website to render nicely. Install ‘twentytwelve’ WordPress theme from backend to WordPress dashboard or front end (FTP) of WordPress. Create a child theme of it and copy the relevant files from original ‘twentytwelve’ theme to child-theme. On a later date I would be writing in detail about how to create child-theme. If you want to know about it, then one should always search with Google to find out more information about it.

In order to create ‘twentytwelve child theme excerpts’ one has to copy ‘functions.php’ and ‘content.php’ from original ‘twentytwelve’ theme to child theme. One can do this from front end of Cpanel hosting through file transfer protocol and then reach to ‘File explorer’, then ‘WPcontent’ and then to theme and then to above mentioned theme. Twentytwelve is a simple theme, with every possibility of tweaking it and in this tutorial we would be creating custom excerpts with continue reading link in front page, archive, category and search pages of website.

By default ‘twentytwelve’ theme show the full contents while searching for archive, categories, indexes and front page. It is advisable to use a child theme. If you do not want to use child theme, then you can go for editing ‘twentytwelve’ theme directly. Then, it is advisable to back up theme before editing. I would be writing about editing on child theme but this would be similar to editing on ‘twentytwelve’ theme in entirity.

First step to create show excerpts in single page:

  • Copy content.php of ‘twentytwelve’ theme into child theme. If you want to directly edit ‘twentytwelve’ theme then it is better to ignore this step.
    twentytwelve theme for WordPress
    twentytwelve

    content.php file
  • Open content.php file in file transfer protocol or CPanel editor.

    opening content.php in FTP editor
  • Left click on blank space for content.php and then click ‘control’ on keyboard, then a search dialogue box within content.php will pop up.

    search dialogue box within content.php
  • Paste this code in the search dialogue box and then click ‘Find Next’. The code to be put is
  • <?php if ( is_search() ) :
  • Find Next
  • This line of content.php will be highlighted.

    This line of content.php will be highlighted
  • <?php if ( is_search() ) : // Only display Excerpts for Search ?>
  • Now completely replace this highlighted code with mentioned code below.
<?php if ( ! is_singular() ) :
  • completely replace this highlighted code

Alternative method:

On some web server code

<?php if ( ! is_singular() ) :
  • Does not show desired result and front page of website could come with ‘Parse error: syntax error, unexpected ‘’ then use this code instead to replace original code
  • <?php if ( is_search() ) :
  • Now place this code to replace original code in content.php
  • <?php if ( is_search() || is_home() || is_archive() || is_author() ) : // Display Excerpts for Search and Homepage ?>
  • Save content.php file and open front page of website to see the difference.
Display Post Excerpts

Now we see all posts in singular pages such as search, home, archive, author, category are shown in excerpts format but ‘continue reading’ or ‘read more’ link is not being seen here. This is the first step to create excerpt in singular pages of website such as front page, landing page, category page, archive page, search page. Save content.php file and then open your website in new web browser to see the result. But we are not end here; we have to make it more legible by using some functions in functions.php file of theme.

Final step to create post excerpt in single pages:

  • Open functions.php in FTP or CPanel editor of child theme of ‘twentytwelve’ theme or original ‘twentytwelve’ theme which you prefer to edit.

    functions.php of twenty twelve theme of WordPress
  • Reach to end of functions.php file still you reach at white spaces.

    Reach to end of functions.php file still you reach at white spaces

Paste this code there.

// Remove the ... from excerpt and change the text
function change_excerpt_more()
{
  function new_excerpt_more($more)
	{
	// Use .read-more to style the link
	  return '<span class="continue-reading"> <a href="' . get_permalink() . '"> Continue Reading »</a></span>';
	}
  add_filter('excerpt_more', 'new_excerpt_more');
}
add_action('after_setup_theme', 'change_excerpt_more');

function custom_excerpt_length( $length ) {
	return 100;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

 

 

  • Save functions.php file.

    Save functions.php file
  • Now open website in a separate window and you could find that at the end of custom excerpt there is ‘continue reading’ with permalink of that article and when visitor after reading custom excerpt, click on ‘continue reading’ to open entire article.

    Displaying Post Excerpts in twenty twelve WordPress Theme

The two step process of creating a custom excerpt on singular page of the Website such as home, archive, category, index and search pages. It consists of going into two steps, in the first step we edit content.php as it is in the file system which shows edit of the content of the article. We have provided two codes and try it and find out which ever code fits the best on your website. You can use either of two content.php codes and do not use both codes.

It shows only one side of custom excerpts and do not insert function of ‘continue reading’ at the end of custom excerpts in content setting of website. Then in the second step we have inserted customized code at the end of functions.php file in order to show ‘continue reading’ link with permalink of that mentioned article there. I hope this tutorial must have provided you an excellent idea of how to customize and show custom excerpts in ‘twentytwelve’ theme of WordPress.

Code Credits

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular Posts