How to show only the date, the title and a little “summary” of my WordPress post in my custom theme?

Question

I am pretty new in WordPress theme development and I have the following doubt about how show posts into a page.

I have this page belonging to an old custom legacy blog that I am build again using WordPress: http://www.asper-eritrea.com/comunicati.asp

As you can see in this page are presented some posts using the following structure: date followed by the post title followed by a short summary

What I want to do in WordPress is something like it.

So I have create this page that show the posts lists: http://lnx.asper-eritrea.com/category/legacyposts/

As you can see in this page are shown the posts (the formattation is horrible because I imported the post from the old website but I will work on it in a second time).

The main problem is that if the post is very long it is shows all of its contents.

This is the code of this page (category.php) is:

<?php get_header(); ?>

<!-- Contenuti (griglia) -->
<div class="container">
    <!-- Lead presentazione -->
    <section id="presentazione">
        <div class="row">
            <div class="col-sm-12">
                <!--<h1 class="text-center"><small>Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</small></h1>-->
                <h1 class="text-center title">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1>
                <h1 class="text-center leadTitle">Association in Defense of the Human Rights of the Eritrean People</h1>
                <!--
                <p class="lead text-center">
                    Association in Defense of the Human Rights of the Eritrean People
                </p>
                -->
            </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
    </section><!-- /section presentazione -->
    <!-- Progetti in evidenza -->

    <header class="header-sezione">
        <h2>Ultimi Articoli</h2>
    </header>

    <?
    // get the term using the slug and the tag taxonomy
    $term = get_term_by( 'slug', 'featured', 'post_tag' );
    // pass the term_id to tag__not_in
    query_posts( array( 'tag__not_in' => array ( $term->term_id )));
    ?>

    <?php
        if (have_posts()) :
            // Start the Loop.
            while (have_posts()) : the_post();

                /*
                 * Include the post format-specific template for the content. If you want to
                 * use this in a child theme, then include a file called called content-___.php
                 * (where ___ is the post format) and that will be used instead.
                 */
                get_template_part('content', get_post_format());

            endwhile;
        else :
            // If no content, include the "No posts found" template.
            get_template_part('content', 'none');

        endif;
        ?>

    </section>

</div>

<?php get_footer(); ?>

So what I want to do is that, for each post, the loop show only the date, the title and the beginning of my post (for example a specific number of character).

What can I do to obtain this result?

Tnx

Answer 1

The get_template_part('content', get_post_format()); line includes content from one of the other files in your theme based on the post type, the file name will be something like content-page.php (or content.php if the format is not found).

If you print out what get_post_format() returns, you will be able to tell which content file to look into.

Once you open this file up, you will see a div with a class of 'entry-content'. I suspect inside that container there will be the_content();, which spits out the whole post. Change it to the_excerpt();, which returns either the actual Excerpt of the post if it has been written or the trimmed-down version of the content. By default WP trims down to the first 55 words - if you want a larger or shorter portion of the content, you will need some extra coding.

If you need to change content.php, be careful since this acts as a backup if any of the post formats are not found. Depending on the size of your site and how many uses the content include has, it may be better to add a condition rather than replace code: if the post is in Legacy-Posts output the excerpt, otherwise leave original content code.

You can look up more info about these in the WP Codex:

• get_template_part()
• the_excerpt

All the best,
Kat

Answer 2

The issue is occurring because of the get_template_part function. It is including the template file which prints the complete text. What should be done is, instead of making changes in the Original theme itself, first you should create a child theme. Reason behind this is, you can safely upgrade your original theme when Theme author releases new version. If you make changes in the original theme, then during upgrade those changes will be wiped out. Child Theme is not needed if you are creating your own theme.

If you are going to create child theme, then in that child theme, copy category.php.

Create functions.php in child theme's directory and add below content in it (If you want to make changes in the original theme, append below content in it.) This process is optional. It gives you more power over number of words to be displayed and text to be shown for 'Read More'.

add_filter( 'excerpt_more', 'wdm_excerpt_more_link' );

function wdm_excerpt_more_link( $more ) {
    global $post, $wdm_flag_for_category_page;
    if(isset($wdm_flag_for_category_page) && $wdm_flag_for_category_page == true){ //if our flag is set, then execute the below statement
        return '... <a href="' . get_permalink( $post->ID ) . '">Read more</a>';
    }
    return $more;
}

add_filter( 'excerpt_length', 'wdm_change_excerpt_length', 999 );

function wdm_change_excerpt_length( $length ) {
    global $wdm_flag_for_category_page;

    if(isset($wdm_flag_for_category_page) && $wdm_flag_for_category_page == true){ //change the length only if flag is set
    return 20;
    }

    return $length;
}

What we are basically doing is, we are going to use Excerpt concept of WordPress. It basically shows summary or short description. To know more about Excerpts, read here

Using above functions we will show summary of 20 words and after that Read more link will be shown. You can change the limit of 20 words to whatever you want. Observe that we are using a variable 'wdm_flag_for_category_page'. We will define this variable in category.php. We are using this variable, so that limitation of words will be applicable to category pages only.

After adding above code, please save the functions.php.

We will have to create one more file in child theme's directory. Create a file and name it 'content-category-display.php'.

I observed the HTML structure of your current theme and according to that, below content can be fit in content-category-display.php

<?php
/**
 * The template for displaying posts on category page
 */
?>
    <article id = "post-<?php the_ID(); ?>" <?php post_class();?>>
        <header class="entry-header">
        <?php if ( is_single() ) : ?>
            <h2 class="entry-title">
                <?php the_title();  //Print Title ?>
            </h2><!-- .entry-title -->
        <?php else :?>
             <h2 class="entry-title">
                 <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
             </h2><!-- .entry-title -->
        <?php endif; // is_single()  ?>
            <div class="entry-meta">
                <span>
                     <?php echo get_the_date();  //Print Date ?>
                </span>
            </div><!-- .entry-meta -->
        </header><!-- .entry-header -->
        <div class="entry-content">
            <?php the_excerpt(); //Prints Excerpt. wdm_excerpt_more_link and wdm_change_excerpt_length functions defined in functions.php will be executed during execution of the_excerpt function   ?>
        </div><!-- .entry-content --> 
    </article>

Save the content-category-display.php file. Now we will call this new template in category.php Hence, your final category.php (which was copied in child theme's directory) would look like

<?php get_header();
$wdm_flag_for_category_page = true; //wdm_flag_for_category_page variable set here for executing code of more control over excerpt words limit
?>

<!-- Contenuti (griglia) -->
<div class="container">
    <!-- Lead presentazione -->
    <section id="presentazione">
        <div class="row">
            <div class="col-sm-12">
                <!--<h1 class="text-center"><small>Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</small></h1>-->
                <h1 class="text-center title">Associazione per la Tutela dei Diritti Umani del Popolo Eritreo</h1>
                <h1 class="text-center leadTitle">Association in Defense of the Human Rights of the Eritrean People</h1>
                <!--
                <p class="lead text-center">
                    Association in Defense of the Human Rights of the Eritrean People
                </p>
                -->
            </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->
    </section><!-- /section presentazione -->
    <!-- Progetti in evidenza -->

    <header class="header-sezione">
        <h2>Ultimi Articoli</h2>
    </header>

    <?
    // get the term using the slug and the tag taxonomy
    $term = get_term_by( 'slug', 'featured', 'post_tag' );
    // pass the term_id to tag__not_in
    query_posts( array( 'tag__not_in' => array ( $term->term_id )));
    ?>

    <?php
        if (have_posts()) :
            // Start the Loop.
            while (have_posts()) : the_post();

                /*
                 * Include the post format-specific template for the content. If you want to
                 * use this in a child theme, then include a file called called content-___.php
                 * (where ___ is the post format) and that will be used instead.
                 */
                get_template_part('content', 'category-display'); //Here it calls content-category-display.php

            endwhile;
        else :
            // If no content, include the "No posts found" template.
            get_template_part('content', 'none');

        endif;
        ?>

    </section>

</div>

<?php get_footer(); ?>

Hope this helps :)

With this approach, it has been taken care that it does not affect any other part of the website except category pages.