Exercises for the blog

Now that we are done with the blog (well almost!), here a few exercises I want you to do!

1) Build the author bio section for the single blog post page

I did not take care of Author Bio for the Single Blog Post page and you already know how to achieve this. So build the Author Bio section by doing some research.

2) Create and use a custom template for a blog post

Just like pages, we can also assign a custom template for a particular blog post.

Also, our current single post page doesn’t have a sidebar. So design a custom template that contains a sidebar and assign it to a blog post.

Here is the tip:

<?php
/*
* Template Name: Article with Sidebar
* Template Post Type: post
*/
?>

3) Peek into the twenty**** default themes of WordPress

So, as I have said before, you can learn a lot of stuff from the default themes. Especially the code organization and the proper usage of the get_template_part() function

4) Try supporting post formats

Post formats are a feature of WordPress which allows us to choose the format of the post. 

Research about the post formats by visiting this link in the codex:

https://codex.wordpress.org/Post_Formats

And, try implementing them inside your theme.

5) Take control over the comments list markup

At some point, for some project, you will definitely have to customize the markup of the comments list inside the single blog post page. 

But to do so, we have to provide a callback function to the wp_list_comments() function.

wp_list_comments( array( 'callback' => 'nd_dosth_comment') ); 

And inside this callback function, you have to write markup for the individual comment. 

You have to define this callback function inside functions.php file, like this:

<?php //careful with this opening PHP tag
/**
 * Template for comments and pingbacks.
 *
 * To override this walker in a child theme without modifying the comments template
 * simply create your own nd_dosth_comment(), and that function will be used instead.
 *
 * Used as a callback by wp_list_comments() for displaying the comments.
 * @author: Twenty Twelve, default wordpress theme
 * @access public
 * @since 1.0.0
 */
function nd_dosth_comment( $comment, $args, $depth ) {
    $GLOBALS['comment'] = $comment;
    switch ( $comment->comment_type ) :
        case 'pingback' :
        case 'trackback' :
        // Display trackbacks differently than normal comments.
    ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
        <p><?php _e( 'Pingback:', 'nd_dosth' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'nd_dosth' ), '<span class="edit-link">', '</span>' ); ?></p>
    <?php
            break;
        default :
        // Proceed with normal comments.
        global $post;
    ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
        <div class="comment-wrap">
            <div class="comment-avatar">
                <?php echo get_avatar( $comment, 75 ); ?>
            </div>
            <div class="comment-body">
                <div class="comment-author-wrap vcard">
                    <div class="comment-author" itemprop="creator">
                        <?php
                            $author = get_comment_author_link();
                            echo $author;
                        ?>
                    </div>
                    <time class="comment-time">
                        <?php
                            printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
                                esc_url( get_comment_link( $comment->comment_ID ) ),
                                get_comment_time( 'c' ),
                                /* translators: 1: date, 2: time */
                                sprintf( __( '%1$s at %2$s', 'nd_dosth' ), get_comment_date(), get_comment_time() )
                            );
                        ?>
                    </time>
                </div>
                <!-- end of comment author wrap -->
                <div class="comment-content" itemprop="commentText" itemprop="commentText">
                        <?php if ( '0' == $comment->comment_approved ) : ?>
                            <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'nd_dosth' ); ?></p>
                        <?php endif; ?>
                        <p><?php comment_text(); ?></p>
                        <div class="reply">
                            <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'nd_dosth' ), 'after' => '', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
                        </div>
                        <!-- .reply -->
                </div>
                 <!-- end of comment comment content -->
            </div>
            <!-- end of comment body -->
        </div>
    <?php
        break;
    endswitch; // end comment_type check
}

I copied this code from the twentytwelve default theme and adjusted it according to my needs and the best thing is, although this is an age-old code, it still works great.

If you are feeling more adventurous, peek into the twentynineteen default theme and try make it work for your needs!

That’s it for this module

In the next module, we will start playing around with custom queries and custom post types.