A sketch for required+ Foundations template structure
We discontinue development of the required+ Foundation theme – here is why.×

Learn what theme files are involved in a request with required+ Foundation and required+ Starter. Create your own child theme template files and change the output with ease.

Template structure in required+ Foundation

Let’s first have a look at required+ Foundation, the parent theme. Look at the sample requests and what template files are involved by default.

Request a regular page

Let’s say for example you have a regular page with the default page template available at http://example.com/about/. Let’s have a look at the template files involved on a request:

required-foundation/page.php
    → header.php         // get_header();
        → nav.php        // get_template_part( 'nav' );
    → content-page.php   // get_template_part( 'content', 'page' );
    → sidebar.php        // get_sidebar();
    → footer.php         // get_footer();

As you can see nothing to fancy is going on on this request, of course we left out the parts that WordPress loads like functions.php, JavaScript & CSS and WordPress itself. That’s stuff for another post, here we focus on the template files.

Request a blog post

required-foundation/single.php
    → header.php                  // get_header();
        → nav.php                 // get_template_part( 'nav' );
    → content-{$post-format}.php  // get_template_part( 'content', get_post_format() );
        → entry-meta.php          // get_template_part( 'entry-meta', get_post_format() );
    → comments.php                // comments_template( '', true );
    → sidebar.php                 // get_sidebar();
    → footer.php                  // get_footer();

In addition to the general parts a blog post usually contains some meta information and comments. Let’s take the line get_template_part( 'entry-meta', get_post_format() ); for example. WordPress tries to load entry-meta-{$post-format}.php, but required+ Foundation only offers entry-meta.php by default and falls back on this file.

Request a the blog home page

Usually the blog overview page is handled by index.php, but maybe you defined a home.php in your theme already, we assume that index.php is still in charge:

required-foundation/index.php
    → header.php                  // get_header();
        → nav.php                 // get_template_part( 'nav' );

    // Depending on the number of posts you display per page, this gets looped:
    → content-{$post-format}.php  // get_template_part( 'content', get_post_format() );
        → entry-meta.php          // get_template_part( 'entry-meta', get_post_format() );

    → sidebar.php                 // get_sidebar();
    → footer.php                  // get_footer();

Got it? We guessed so, let’s dig into the real thing and start to overwrite elements in you child theme.

Overwrite templates in your child theme

Here is where the fun begins and you can finally dig into the code. Learn how to the change the output in your child theme with ease. The concept with a parent and a child theme allows you to easily overwrite template files and functions (depending on the code in the parent theme) in your child theme without losing the possibility to update the parent.

Overwrite page.php

In your child theme folder create a copy of your parent themes page.php. Now WordPress loads the child theme page.php instead of the one in the parent theme. Let’s change the default page in required+ Foundation with a new page.php file in your child theme like this:

<?php
/**
 * The template for displaying all pages.
 *
 * Demo page template to show how easy it is to
 * overwrite a template in your child theme.
 *
 * @link http://themes.required.ch/?p=755
 */

get_header(); ?>

    <!-- Row for main content area -->
    <div id="content" class="row">

        <!-- Wow we changed the column span -->
        <div id="main" class="six columns" role="main">

            <div class="post-box">

                <?php while ( have_posts() ) : the_post(); ?>

                    <?php get_template_part( 'content', 'page' ); ?>

                <?php endwhile; // end of the loop. ?>

            </div>
        </div><!-- /#main -->

        <!-- Wow we changed the column span -->
        <aside id="sidebar" class="six columns" role="complementary">
            <div class="sidebar-box">
                <?php get_sidebar(); ?>
            </div>
        </aside><!-- /#sidebar -->

    </div><!-- End Content row -->

<?php get_footer(); ?>

We didn’t change a lot and it probably isn’t that useful to have a page template with equally sized content and sidebar columns, but you get the concept.

Overwrite content-page.php

This part is going to be a little more interesting, as we only overwrite the content-page.php to change the output of the content on all pages in our child theme.

<?php
/**
 * The template used for displaying page content in page.php
 *
 * Example version to show how we overwrite the content output
 * on a page in your child theme
 *
 * @link http://themes.required.ch/?p=755
 */
?>
    <!-- START: content-page.php -->
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <header class="entry-header">
            <h2 class="entry-title"><?php the_title(); ?></h2>
            <h3 class="subheader">This is a page</h3>
        </header><!-- .entry-header -->

        <div class="entry-content">
            <?php the_content(); ?>
            <?php wp_link_pages( array( 
                'before' => '<div class="page-link"><span>' . __( 'Pages:', 'yourtextdomain' ) . '</span>', 
                'after' => '</div>' 
                ) ); ?>
        </div><!-- .entry-content -->
        
    </article><!-- #post-<?php the_ID(); ?> -->
    <!-- END: content-page.php -->

We added a dummy subtitle in the header and that’s it. You might come up with other elements or removing the title completely for example. Let’s look at the meta information on the posts.

Overwrite entry-meta.php

The entry-meta.php takes responsibility in displaying the tags, categories, comments link and an optional author bio. Go ahead an copy entry-meta.php in your child theme directory and we’ll get started:

<?php
/**
 * Entry meta in the footer of posts of all post formats
 *
 * We will use this as an example entry-meta.php in one of our
 * tutorials for required+ Foundation.
 *
 * @link http://themes.required.ch/?p=755
 */
?>
            <!-- START: entry-meta.php -->
            <?php $show_sep = false; ?>
            <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
            <?php
                /* translators: used between list items, there is a space after the comma */
                $categories_list = get_the_category_list( __( ', ', 'yourtextdomain' ) );
                if ( $categories_list ):
            ?>
            <span class="cat-links">
                <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'yourtextdomain' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
                $show_sep = true; ?>
            </span>
            <?php endif; // End if categories ?>
            <?php
                /* translators: used between list items, there is a space after the comma */
                $tags_list = get_the_tag_list( '', __( ', ', 'yourtextdomain' ) );
                if ( $tags_list ):
                if ( $show_sep ) : ?>
            <span class="sep"> | </span>
                <?php endif; // End if $show_sep ?>
            <span class="tag-links">
                <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'yourtextdomain' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
                $show_sep = true; ?>
            </span>
            <?php endif; // End if $tags_list ?>
            <?php endif; // End if 'post' == get_post_type() ?>

            <?php if ( comments_open() ) : ?>
            <?php if ( $show_sep ) : ?>
            <span class="sep"> | </span>
            <?php endif; // End if $show_sep ?>
            <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'yourtextdomain' ) . '</span>', __( '<b>1</b> Reply', 'yourtextdomain' ), __( '<b>%</b> Replies', 'yourtextdomain' ) ); ?></span>
            <?php endif; // End if comments_open() ?>

            <?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries ?>
            <div id="author-info">
                <div id="author-avatar">
                    <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'required_author_bio_avatar_size', 68 ) ); ?>
                </div><!-- #author-avatar -->
                <div id="author-description">
                    <h2><?php printf( esc_attr__( 'About %s', 'yourtextdomain' ), get_the_author() ); ?></h2>
                    <?php the_author_meta( 'description' ); ?>
                    <div id="author-link">
                        <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
                        <?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'yourtextdomain' ), get_the_author() ); ?>
                        </a>
                    </div><!-- #author-link -->
                </div><!-- #author-description -->
            </div><!-- #entry-author-info -->
            <?php endif; ?>
            <!-- END: entry-meta.php -->

So far we didn’t change anything in here, but we will have a look at the author bio box. With the code above this box only shows up in a multi-author blog environment and if the user filled out the description in his WordPress user profile. Let’s change this part of the code:

            <?php if ( is_singular() ) : ?>
            <div id="author-info">
                <div id="author-avatar">
                    <?php echo get_avatar( get_the_author_meta( 'user_email' ), apply_filters( 'required_author_bio_avatar_size', 68 ) ); ?>
                </div><!-- #author-avatar -->
                <div id="author-description">
                    <h2><?php printf( esc_attr__( 'About %s', 'yourtextdomain' ), get_the_author() ); ?></h2>

                    <?php if ( get_the_author_meta( 'description' ) ) : ?>
                    
                        <?php the_author_meta( 'description' ); ?>

                    <?php else : ?>

                        <p><?php _e( 'Oops, this author forgot to fill out his description, but we are sure he or she is a cool fella!', 'yourtextdomain' ); ?></p>

                    <?php endif; ?>
                    
                    <div id="author-link">
                        <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
                        <?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'yourtextdomain' ), get_the_author() ); ?>
                        </a>
                    </div><!-- #author-link -->
                </div><!-- #author-description -->
            </div><!-- #entry-author-info -->
            <?php endif; ?>

With this code in place you always display the author bio box on every single blog post even if the author forgot to fill out his description yet.

Overwrite the required_posted_on() function

Ok this is not a template itself, it’s a template function required+ Foundation provides you with. It’s a pluggable function, so you can overwrite it in your child theme without getting any nasty PHP error. By default required_posted_on() generates the Posted by AUTHOR NAME on PUBLISH DATE element in your theme, let’s change the order:

/**
 * Prints HTML with meta information for the current post-date/time and author.
 *
 * @link http://themes.required.ch/?p=755
 */
function required_posted_on() {
    printf( __( '<h6>On <a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s" pubdate>%4$s</time></a> <span class="author vcard"><a class="url fn n" href="%5$s" title="%6$s" rel="author">%7$s</a></span> published:</h6>', 'yourtextdomain' ),
        esc_url( get_permalink() ),
        esc_attr( get_the_time() ),
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
        sprintf( esc_attr__( 'View all posts by %s', 'yourtextdomain' ), get_the_author() ),
        esc_html( get_the_author() )
    );
}

With this code in your child themes functions.php, you will get a format like On PUBLISH DATE AUTHOR NAME published:. Well this is it for the moment, please comment if you have any questions.

Download the code


Getting started with required+ Foundation

The required+ Foundation parent theme is a powerful responsive WordPress theme that gets you started in no time. Read the docs, download the theme and create something awesome.

Download required+ Foundation »


One thought on “Template structure in required+ Foundation and required+ Starter

  1. Pingback: Moving from Paper Plans to Wordpress Templates | Hacking History

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>