Content structure

Content structure

Unit: 12 of 13

Now we will create additional templates so as not to overload index.php.

Let’s recall the template hierarchy from lesson 10. At the moment, all requests go to index.php, since there are no additional templates for post and page pages, nor post archives and such.

For our theme we will create the files archive.php, page.php< a i=4> and single.php as well as a few other additional parts.


get_template_part

First, we will modify index.php, which will now have the following structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
    /* Start the Loop */
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template/content', get_post_type() );
    endwhile;
endif;
?>
</main>
<?php get_footer(); ?>

As we can see, the primary difference is that we completely remove any content loading from this file and set the function get_template_part.

To continue, we first need to understand well what that function does.

The function get_template_part() is a useful way to avoid duplication and repetition of code within the WordPress theme. We’ll use it for any part of the code so we can copy it multiple times.

It calls and includes template partials (template partials), wherever they are used. This ensures the centralization of any block of code that is likely to be repeated, thereby reducing code duplication and improving the readability of template files.

If we set, for example:

1
get_template_part( 'content' );

we will call part of the template from the file content.php that we need to create. Of course, content.php is an arbitrary name, as we can name the parts of the template however we want. Any string we pass in this function, any variable or anything else, WordPress will ask us for a file named like this in the root of the theme folder. However, “too creative” file names should be avoided.

This function is most often used with another parameter, which makes it even more powerful. The second parameter is probably easier to explain with an example:

1
get_template_part ( 'red', 'blue' );

Based on this code, WordPress will search for the following files in turn:

  1. red-blue.php
  2. php

If there is a parent theme and a child theme, WordPress will look for red-blue first .php in the child theme, then red-blue.phpin the main theme.red.php and finally child in red.php in the main theme, then

In real terms, in our theme we will want to create part of the template content-page.php, which works separately for the pages of type page. If such a file is missing, WordPress will simply fall back to content.php. This procedure is similar to how all templates fall back to index.php in the template hierarchy in case there is no specific template, thus reducing the risk that WordPress cannot process a certain type of content.

You might be wondering – why not just use include() or require() to pull files with certain parts of the template? These functions would have worked as you imagined, but this is not the usual nor recommended way of working in WordPress, as it has specific disadvantages.

First, these PHP functions do not have the two-argument, automatic-substitution operating structure as specified above. This means that problems will occur if a target file does not exist. In the WP version, another template will simply be searched.

The second reason is the child themes. For a child theme to modify the templates file – for example, for the child which creates its own version of the file content.php, using the variant with require, < a i=10>simply won’t work.

With the help of get_template_part(), the child variant content.php can replace the same main theme file very easily, but if we use a classic PHP way, we have to copy all the theme files, the whole main theme, which is not necessarily necessary, and thus a lot of unnecessary content is created.

If we go back to index.php, the part of the code that we replaced, or added, is now much clearer:

1
get_template_part( 'template/content', get_post_type() );

This index.php will actually look in the template folder named content-[ page_type].php, where page_type is just that – the type of page being displayed. According to this, if page entries are to be displayed, content-page.php will be searched for, if page post is to be displayed, content-page.php will be searched for a>.content.php etc. If some of these searched files is not found, it will automatically return to content-post.php

With this we created the base that will be rarely used (index.php) because when we create specific templates we will use them for most pages.

page.php

To accept all page requests, we will create a copy of index.php, name it page.php and we will modify this insignificant code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
    /* Start the Loop */
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template/content', 'page' );
    endwhile;
endif;
?>
</main>
<?php get_footer(); ?>

As you can see, the only difference is that instead of the content-[page_type] template, a specific file is used – content-page.php, which we will create soon.

single.php

To accept all requests for post pages, we will create another similar file and name it single.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
    /* Start the Loop */
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template/content', get_post_type() );
        the_post_navigation();
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
endif;
?>
</main>
<?php get_footer(); ?>

The file name will be single.php, not post.php (although this name seems more logical), because it is prescribed by the WordPress hierarchy1.

In this file we have left the automatic change of the template loading based on the type, because we may later create additional types of similar post type pages.

We also added the the_post_navigation function, which will try to display links to the following post pages.

You can find more information about this function at:

https://developer.wordpress.org/reference/functions/the_post_navigation/

Finally, I added both loading and displaying comments, which is expected from the post type.

archive.php

As the third file, I created archive.php, in which I entered the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) : ?>
    <header class="page-header">
        <?php
        the_archive_title( '<h1 class="page-title">', '</h1>' );
        the_archive_description( '<div class="archive-description">', '</div>' );
        ?>
    </header><!-- .page-header -->
    <?php
    /* Start the Loop */
    while ( have_posts() ) :
        the_post();
        get_template_part( 'template/content', get_post_type() );
    endwhile;
endif;
?>
</main>
<?php get_footer(); ?>

And here the code is almost identical, but the header tag is added, specific for archive type pages, which will automatically display all entries post from certain categories, with a certain tag, by a certain author, calendar date, etc.

The content type template parts

By adding the three files previously explained and modifying the index.php file, we have arrived at the necessary structure of our theme, which will (soon) process all user requests, setting necessary tags and finally will load content.php or content-page.php. We have left to create the template folder, and in it, these two files.

content-page.php will have the following content:

1
2
3
4
5
6
7
8
9
10
11
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->
<?php the_post_thumbnail(); ?>
      
<?php the_content(); ?>
</article>

Through this code, each page type page will display the article tag and the necessary HTML structure for the base of the page. The header tag will display the title, followed by the highlighted image and the actual content.

The highlighted image will not be displayed for now, until we declare it in the next step.

content.php will have longer content due to actual usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
    <header class="entry-header">
        <?php
        if ( is_singular() ) :
            the_title( '<h1 class="entry-title">', '</h1>' );
        else :
            the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
        endif;
        if ( 'post' === get_post_type() ) :
            ?>
            <div class="entry-meta">
                <span class="entry-meta-date"><?php the_date(); ?></span>
                <span class="entry-meta-author"><?php the_author(); ?></span>
            </div><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->
    
    <a class="post-thumbnail" href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( 'post-thumbnail' ); ?>
    </a>
    <?php the_content(); ?>
</article

The code part will be identical, with the addition of the check: if it is to display a post entry – the title will be h1; otherwise – it will be h2. Also, if it’s a post page, we’ll display the div with the calendar date and author data, which we load via the built-in functions the_date( ) and the_author().

Thumbnails

To add featured/thumbnail image support to your WordPress theme, this code must be added to the functions.php file:

1
add_theme_support( 'post-thumbnails' );

This code will provide support for loading the featured/thumbnail image, in general, to post and page entries. To set the size of the highlighted page, we can also add the following code:

1
set_post_thumbnail_size(300, 200);

Parameters for set_post_thumbnail_size are specified in the following order: width, height.

If, in addition to the base, we want to add dimensions, i.e. additional variants, we add:

1
add_image_size( 'special-thumbnail', 800, 200 );

However, when we set the featured image, even when we assign additional dimensions, it will not automatically display in our WordPress theme. To display the image in our theme, we need to edit the templates and add this line of code where we want to display the featured image:

1
<?php the_post_thumbnail(); ?>

In other words, if we want a special dimension, i.e. a variant that we have defined:

1
<?php the_post_thumbnail( 'special-thumbnail' ); ?>

This is what I did in the previous stages, after creating the files content.php or content- page.php, but it can also be done in other places in the theme.

Widgets

Your WordPress theme can contain widget regions anywhere within it. The sidebar is the location where widgets are used most often, but they are also often found in the header, footer, main content, etc.

First, we need to define the location of the widget in our theme, using functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function redsilverita_widgets_init() {
register_sidebar( array (
    'name' => __( 'Primary Widget Area'),
    'id' => 'widget-sidebar',
    'description' => __( 'The primary widget area'),
    'before_widget' => '<div id=”%1$s" class="widget-container %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );
}
 
add_action( 'widgets_init', 'redsilverita_widgets_init' );

In this code we register a widget location, but we can pass multiple register_sidebar functions for multiple widgets.

After that, we need to display the widget region. The following code can be written anywhere within the theme:

1
dynamic_sidebar( 'widget-sidebar' );

More precisely, we can write with the check:

1
2
3
4
5
<?php if ( is_active_sidebar( 'widget-sidebar' ) ) : ?>
    <div id="secondary" class="widget-area" role="complementary">
        <?php dynamic_sidebar( ' widget-sidebar ' ); ?>
    </div>
<?php endif; ?>

We will add this code in page.php and single.php right after the <main> tag, to display the sidebar.

We’re not going to deal with CSS styling at this point, but it’s clear that the layout needs to be tweaked so that all elements display and arrange properly.

 

The WordPress function for setting the thumbnail image size is:

1. https://wphierarchy.com/