Add post dates from child theme and change font size on homepage post

by

I know this is not difficult. I know it is supposed to be in the style.css in the child theme, but no font size I change seems to make any difference. The titles of the posts on my homepage never. get. any. smaller. Can anyone tell why? I don’t need the lettering to be seen from across the room, so it would be great to resolve this.

Also, I’d like to add the date underneath the titles. (?)

internalcompass.us/castle

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

<?php ?>
<div id="primary" class="site-content">
    <div id="content" role="main">

    <div style="margin-bottom: 20px;">
        <?php easyrotator_display_rotator('erc_92_1372974446'); ?>
    </div>


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

        <?php /* Start the Loop */ ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', get_post_format() ); ?>
        <?php endwhile; ?>

        <?php twentytwelve_content_nav( 'nav-below' ); ?>

    <?php else : ?>

        <article id="post-0" class="post no-results not-found">

        <?php if ( current_user_can( 'edit_posts' ) ) :
            // Show a different message to a logged-in user who can add posts.
        ?>
            <header class="entry-header">
                <h1 class="entry-title"><?php _e( 'No posts to display', 'twentytwelve' ); ?></h1>
            </header>

            <div class="entry-content">
                <p><?php printf( __( 'Ready to publish your first post? <a href="https://wordpress.stackexchange.com/questions/106605/%s">Get started here</a>.', 'twentytwelve' ), admin_url( 'post-new.php' ) ); ?></p>
            </div><!-- .entry-content -->

        <?php else :
            // Show the default message to everyone else.
        ?>
            <header class="entry-header">
                <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
            </header>

            <div class="entry-content">
                <p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
                <?php get_search_form(); ?>
            </div><!-- .entry-content -->
        <?php endif; // end current_user_can() check ?>

        </article><!-- #post-0 -->

    <?php endif; // end have_posts() check ?>

    </div><!-- #content -->
</div><!-- #primary -->

1 Answer
1

Adding the date is potentially as simple as inserting the_time() in the appropriate place in the template if you’re editing the template files.

However, it looks like you’re using a child theme, so we have to use WordPress’s system of filters.

To add the date to the post, try filtering the titles. Add this to your functions.php:

function add_dates_to_title_wpse106605($title, $id) {
    if (is_home() && in_the_loop()) {
        $time = get_the_time( $d = 'l, F j, Y', $post = $id );
        return $title . '<br><small class="time">' . $time . '</small>';
    } else {
        return $title;
    }
}

add_filter('the_title', 'add_dates_to_title_wpse106605', 10, 2);

You can see that I’ve configured the $time to be output with the 'l, F j, Y' bit. Check out the Formatting Dates And Times page for more info on that syntax. It’s pretty straightforward.

You’ll also notice that I prepended it with a <br> tag to move it onto the next line and wrapped it in in a <small> tag. I’d recommend getting rid of the <br> and just forcing it into the next line by targeting it in the CSS and adding display: block;. Obviously, change the HTML to suit your needs.

For the CSS change, you need to have at least the same amount of specificity as what you’re trying to override. The easiest way to do that is just to copy it. This should do the job:

@media screen and (min-width: 600px) {
    .entry-header .entry-title {
        font-size: 18px;
    }
}

Obviously change the size to suit your tastes.

Leave a Comment