- Introduction
- content.php
- Line 7: <article> tag with post information
- Line 8-31: post header section
- Line 12: Check Post Type
- Line 15-18: Post Information
- Line 26-27 Post Edit Link
- Line 33-55: Showing Post Content Summary
- Line 38-46: Check and Show Thumbnail Image
- Line 50-52: Display Post’s Excerpt
- content-none.php
Introduction
In last tutorial we looked at wordpress’ ‘category’ and category.php
template. Here we will discuss the two partial templates included in category.php
:
content.php
for displaying a post’s summary (information, feature image and excerpt).content-none.php
to indicate there is no posts of this category.
The codes in these files are mainly the template tags described in the Loop tutorial. You can find more template tags to use in the Codex page.
content.php
The file can also be found on my Github page:
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?php /** * @package Multitopics */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php the_title( sprintf( '<h3 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?> <?php /* post details */ ?> <?php if ( 'post' === get_post_type() ) : ?> <!-- post meta tags --> <div class="post-details"> <i class="fa fa-clock-o"></i> <time><?php the_date(); ?></time> <i class="fa fa-folder"></i> <?php the_category(', ') ?> <i class="fa fa-tags"></i> <?php the_tags(); ?> <?php /* <div class="post-comments-badge"> <a href="<?php comments_link(); ?>"><i class="fa fa-comments"></i> <?php comments_number( 0, 1, '%'); ?></a> </div><!-- post-comments-badge --> */ ?> <?php edit_post_link( 'Edit', '<div><i class="fa fa-pencil"></i> ', '</div>' ); ?> </div><!-- post-details --> <?php endif; ?> </header><!-- .entry-header --> <!-- two column design --> <div class="row excerpt-content"> <div class="col-sm-4 excerpt-img-window"> <?php if ( has_post_thumbnail() ) { // check for feature image ?> <div class="post-image"> <?php the_post_thumbnail(); ?> </div><!-- post-image --> <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" > <!-- link --> <span class="link-spanner"></span> </a> <?php } ?> </div> <!--col-sm-4 --> <div class="col-sm-8"> <div class="post-excerpt"> <?php the_excerpt(); ?> </div><!-- post-excerpt --> </div> <!-- col-sm-8 --> </div> <!-- row --> </article><!-- #post-## --> |
Line 7: <article> tag with post information
The HTML5 <article>
tag is used for indicating an article in the website, like a post. The template tags the_ID()
and post_class()
insert appropriate attributes and classes for proper wordpress display.
Line 8-31: post header section
This section prints out the post’s information:
Line 9: Display Post Title
The template tag the_title(...)
displays the post’s title. One can wrap the title with HTML tags by specifying the tags before and after the title in the parameter as follows:
the_title('before_tags', 'after_tags');
Here we wrap the title with an <h3>
tag and with hyperlink <a>
tag. The post’s url is retrieved via template tag get_permalink(
)
.
The function esc_url(...)
sanitizes an url and remove dangerous/invalid urls. It’s good practice to always wrap an url with this function.
Line 12: Check Post Type
This makes sure the post type is ‘post’ before we try to retrieve post information.
Line 15-18: Post Information
Here we print out the post’s information with the following format:
- Display a Font Awesome icon.
- Display information with the corresponding template tag.
For icons we use the <i>
tag with fa, fa...
font awesome classes. The names of the template tags are self explanatory.
Line 26-27 Post Edit Link
This template tag edit_post_link(...)
shows a link for admins to directly go to the edit page in the admin panel. The parameters in sequence are:
- Display text.
- Wrapping tags that go before the link.
- Wrapping tags that go after the link.
Line 33-55: Showing Post Content Summary
The summary shows two post contents:
- Thumbnail (feature) image (line 36-47).
- Content text excerpt (line 49-53).
The Bootstrap setup is one row (line 34 ) two columns: one relative width of 4 and another 8 (line 36,49).
Line 38-46: Check and Show Thumbnail Image
The codes first check if the post contains the “Featured Image” by template tag has_post_thumbnail()
. If yes it displays the image by the template tag the_post_thumbnail()
, and then sets the image link by the <a>
tag.
The image’s url is retrieved in these steps:
- Get thumbnail id by the post’s id:
get_post_thumbnail_id($post->ID
)
. - Get the url by thumbnail’s id:
wp_get_attachment_url(...)
;
Notice that the codes $post->
ID
is the same as the template tag the_ID
. The template tag just wraps $post->
ID
in a function.
The <a>
tag spans the entire image section by the CSS setup in this tutorial.
The post’s featured image is set at the Featured Image widget down right in the post edit page:
The blue area is where you set the featured image.
Line 50-52: Display Post’s Excerpt
The excerpt can be displayed easily by template tag the_excerpt()
. We will show how to customize excerpt length in later tutorials.
content-none.php
It’s a good idea to customize display when wordpress hasn’t have the posts of a specific category, as the default display doesn’t look good. You can find the file on my Github page:
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 |
<?php /** * Template part for displaying a message that posts cannot be found. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package Multitopics */ ?> <section id="no-results"> <div> <!-- placeholder when no content is added --> <div class="no-content-yet"> <div class="row"> <h1>Content Brewing in Progress...</h1> <div class="no-results-img-window"> <img class="no-results-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/in_progress.png" alt="Brewing in progress"> </div><!-- .page-content --> <h1>Check Back Later!</h1> </div> <!-- row --> </div><!-- no content yet --> </div><!-- .page-content --> </section><!-- .no-results --> |
The code is simple. It prints two lines of messages (line 17, 21) and an image within a Bootstrap row
class.