How to display left aligned post thumbnail and post excerpts in Twenty Twelve Theme

There are many ways in which Twenty Twelve theme can show post excerpts. The most simple formulae is that of go to content.php file through hosting account which is mostly, cPanel and then around 42 lines search for following code. To search on content.php, select the file and then control plus F. The search bar should show up at the upper right side of content.php file. Search for following code.

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

Then select that code and in the place of this above code paste the following code to display excerpts for each and every post.

<?php if ( ! is_singular() ) : // Everywhere display Excerpts for Search ?>

This will now show everywhere, the excerpts of search be it at achieves, tag, search and everywhere. If you do not want to show post-excerpts everywhere but want to show up only at front page or home page then instead of above code you can paste this code.

<?php if ( is_search() || is_home() ) : // Display Excerpts for Search and Homepage ?>

Then save content.php file and then refresh your web page to see post excerpts live in action.

One aspect to remember is that one should always create a child theme from main theme and bring the same files of main theme into child theme so that ultimately there would not be any loss of these customizations when theme updates from its vendor.

In the next part we will learn about how to show thumbnail inside post excerpts that would be a smaller thumbnail instead of default bigger thumbnail in order to show a beautiful post excerpts. Then, instead of dots we would show how to add ‘continue reading’ link to it.

First we will learn about how to show smaller thumbnail. Bring functions.php file or copy it from main theme and then open it and then at the end of it paste the following code.

// Use a smaller thumbnail

add_image_size('excerpt-thumbnail', 140, 140, true);

Then save this file.

Now the next step is to open content.php file of child theme, and search for the following line.

<div class="entry-summary">

It should be around 43 lines of content.php and after this above line paste the following code.

<!-- Use a smaller thumbnail /featured image -->

                        <div class="excerpt-thumb">

                                    <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">

                                    <?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>

                                    </a>

                        </div>

Now, with this code we do add a small thumbnail of featured post to post excerpt to show case some beauty at the front page. If you wish to see the example then move to my site’s front page that is www.mohanmekap.com and you could experience the live action from there. Now, the problem is that, the featured image as well as the post excerpts are shown side by side and this makes the viewing of pages awkward and does it takes huge place in the front page so next is to remove the showing of featured image and this can be done as follows.

Now, move to content.php file and search for the following code as follows.

<?php the_post_thumbnail(); ?>

Completely remove this code to remove showing feature posts in post thumbnail and the smaller sized featured image posts still to be there and that makes viewing of web pages nice and beautiful.

Now, after clicking this post you move to single article page and from there to the presence of featured image should be gone and this only stays at the front page in the form of smaller thumbnail.

 

Now how to show left aligned post thumbnail code in the front page?

Now, open content.php files and then search around 55 lines about the following code.

<div class="entry-content">

Then below it add the following code.

<!-- Adds thumbnail featured image to single post view -->

<div class="excerpt-thumb">

            <?php the_post_thumbnail('excerpt-thumbnail', 'class=alignleft'); ?>

</div>

Now, with this, the small post thumbnail would be shown, at the left side or aligning with left side of article, after you open the article in single view. Save the content.php files and refresh your website and then enter into single article to see the presence of post thumbnail in action.

How to add continue reading link instead of display […] at the end of each post?

After adding, post excerpts function, you could see that only display […] is visible in post excerpts. This write up is all about how to add continue reading link in the place of display […]. Open functions.php file, go to end of it and add the following code and then save functions.php files.

// How to add continue reading link instead of display […] at the end of each post?

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 &raquo;</a></span>';

            }

  add_filter('excerpt_more', 'new_excerpt_more');

}

add_action('after_setup_theme', 'change_excerpt_more');

Here, instead of continue reading you can write read more or else anything you want to display in the place of display […]. Then save functions.php file and refresh the website to see that instead of display […] now you have continue reading or anything you place on the code should be visible in the hyperlink structure. For example you can see it home page of my site to see this in action.

If you have done everything properly, you can see this in action on yours website and this makes the visible impact of yours web presence as well as with these little bit of snippets of code, yours site should be visible as well as does provide one of glaring bit of providing huge amplification of providing the real tenets of providing information is clearly and most visibly way.

It is important to go to post editor and assign at least one image to the featured image so that ultimately that image should not be shown at the post excerpts as thumbnail of images. What it does make is that ultimately it provides viewers with wide angle format to not only show yours visibility of website in terms of complete and corroborated ways to manage and show how beautiful yours site is.

In this way, in this article we learnt about how to create post excerpts in Twenty Twelve theme as well as, viding thumbnail of featured posts out there as well as to provide, the thumbnail and remove the feature posts in big size and make the post thumbnail to be seen at left aligning after opening single post.

Next we also modify the display […] and add the continue reading in term of hyper linking to open the single post pages. In this way we do provide complete visible aspect of providing a well-made front page that not only suitable for viewing purposes for viewer and returning visitors but also it does provide one of the best viewing parameter for search engine optimization as well as that of best way to provide perfect rendering to search engines.

*A few days ago. I read a post on Zeaks Blog which discussed ‘Display Excerpts in Twenty Twelve Theme’. I’d never hear of this before, but I was intrigued, so I read on.*