WordPress: Create a child theme for twentyeleven with sidebars on posts and posts sorted by modified date

In order to create our child theme, we first need to create a directory for your theme:

# cd /var/www/vhosts/benohead.com/httpdocs/wp-content/themes
# mkdir twentyelevenbenohead
# chown www-data:www-data twentyelevenbenohead

Replace the first path above by the path to your themes directory under wordpress, twentyelevenbenohead by the name you want to give to your theme and www-data by the user and group the other subdirectories in the themes directory (basically it’s the username and group name for apache).

The you need to create a style.css file like for all themes:

# cd twentyelevenbenohead
# vi style.css

And type in the following (press “i” before typing to go in insert mode):

/*
Theme Name: Twenty Eleven Child for Benohead
Theme URI: https://benohead.com/wordpress-create-a-child-theme-for-twentyeleven-with
Description: Child theme for the Twenty Eleven with  sidebars on posts and posts sorted by modified date
Author: Henri Benoit
Template: twentyeleven
Version: 0.1
*/

/* We must first include the original css from the parent theme */
@import url("../twentyeleven/style.css");

To save in vi, type ESC to stop the inserting mode, the press ZZ (or :wq) in order to save the file and exit.

This file basically defines your new theme as a child theme for twentyeleven and imports the styles from twentyeleven.

Now let’s add some functionality to our theme. First let’s start with the sidebar for posts. The way single posts are displayed is controlled by the file single.php. So we need to first get a copy of this single.php and edit it:

# cp ../twentyeleven/single.php .
# vi single.php

Now just add:

<?php get_sidebar(); ?>

before the following line:

<?php get_footer(); ?>

Now we have our sidebar in posts. But we still need to fix the way our post is displayed. In twentyeleven, there is a div class called singular. Its purpose is to remove the margin on singular articles. In our case, we just made our posts not singular by adding a sidebar. This singular class is added in the function twentyeleven_body_classes which is added as hook in functions.php using:

add_filter( 'body_class', 'twentyeleven_body_classes' );

Since the function twentyeleven_body_classes is defined without checking for it’s existence and the function definitions of the parent theme are loaded after those of the child theme, we cannot just override the function. So we need to unregister the function once the theme is fully loaded. This can be done in functions.php (which is a new file for our child theme):

# vi functions.php

There add the following:

<?php

add_action( 'after_setup_theme', 'remove_twentyeleven_body_classes' );

function remove_twentyeleven_body_classes() {
remove_filter( 'body_class', 'twentyeleven_body_classes' );
}

?>

Now, our sidebars also look good. Let’s now display the modified date (instead of the original publish date) in the posts and let’s sort them accordingly. First we’ll override the corresponding function in functions.php (add it before “?>”):

if ( ! function_exists( 'twentyeleven_posted_on' ) ) :
/**
* Prints HTML with meta information for the current post-date/time and author.
* Create your own twentyeleven_posted_on to override in a child theme
*
* @since Twenty Eleven 1.0
*/
function twentyeleven_posted_on() {
printf( __( '<span class="sep">Posted on </span><a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a><span class="by-author"> <span class="sep
"> by </span> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span></span>', 'twentyeleven' ),
esc_url( get_permalink() ),
esc_attr( get_the_modified_time() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() ),
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentyeleven' ), get_the_author() ) ),
get_the_author()
);
}
endif;

This is basically a copy of the function in twentyeleven but where get_the_modified_time is called instead of get_the_time and get_the_modified_date is called instead of get_the_date.

Now the modified date is used for the posts instead of the publish date. But the posts are still sorted using the default sorting (publish date). In order to fix it, we need to import (i.e. copy) another file from twentyeleven and modify it:

# cp ../twentyeleven/index.php .
# vi index.php

Add this:

<?php query_posts($query_string . '&orderby=modified&order=desc'); ?>

before this line:

<?php if ( have_posts() ) : ?>

Now the posts will also be sorted properly. The only thing you should do now is to change the owner of all the files we’ve created (this will all work without doing it but it does look cleaner):

# chown www-data:www-data *

Now you can go to your WordPress dashboard, Appearances and see you new child theme. In the preview, you will see that the navigation links in the single post view (“Previous” and “Next”) do not look so good in some browser e.g. in Safari, the arrow after “Next” is displayed on a new line. So you might decide to remove this navigation part from this view by deleting these lines in single.php (using vi, you can press “dd” to delete one line, or “5dd” to delete 5 lines from and including the line where the cursor is):

<nav id="nav-single">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
</nav><!-- #nav-single -->

Now that’s it, if you’ve followed these instructions, you basically have more or less the same theme I’m using on this blog !

One thought on “WordPress: Create a child theme for twentyeleven with sidebars on posts and posts sorted by modified date

Leave a Reply

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