Let's take a look at a few different things now. We'll look at post types or post formats. Right now, if we look at our theme, we have just basically one kind of post, and it's just a standard blog post. We can also have things, such as galleries, links, images, and quotes status updates, and we can format these different types of posts in different ways. We will now see how to do that, how to add these to our theme. Also, we'll look at a function called get_ template_part(), which allows us to stop repeating ourselves. For instance, if we look at our index page, we have while (have_posts()), and then we're just outputting our post. We observe the same thing in the archive, in search.php, and so on. So we want something that's going to stop us from repeating ourselves over and over. I know that each of these files have minor changes, but we can implement that inside of a specific content file. The best thing to do is to just jump in and show you.
Let's go to index.php and look at everything that is inside the while loop:
<?php while(have_posts()) : the_post(); ?>
<article class="post">
<h2><?php the_title(); ?></h2>
<p class="meta">
Posted at
<?php the_time('F j, Y g:i a'); ?>
by
<a href="<?php echo get_author_posts_url(
get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a> |
Posted In
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if($categories){
foreach($categories as $category){
$output .= '<a href="'.
get_category_link($category->
term_id).'">'.$category->cat_name.
'</a>'.$separator;
}
}
echo trim($output, $separator);
?>
</p>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink();?>">
Read More</a>
</article>
<?php endwhile; ?>
We will grab everything that is in our post loop; basically, all that is in it from the <article> tag to the ending </article> tag. We'll cut this, paste it in a new file, and save it as content.php. We'll save this, go back to index, and in its place, we'll say <?php and then we'll use get_template_part(). Then we will pass in the name of the file which we just created, which is content. Let's save this and make sure that content.php is saved as well:
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php get_template_part('content'); ?>
<?php endwhile; ?>
Now if we reload, it looks the exact same, which is what we want.
Let's take a look at archive.php. You can see same content in the archive file. The idea is to get everything that's in the while loop, into that content file. So let's cut the highlighted part:
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="archive-post">
<h4>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h4>
<p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, no posts were found'); ?>
<?php endif; ?>
Go to content.php. Now this is a little different than what we have for a regular blog post. So what we can do is we can use a condition and check to see whether we get an archive or a search result page. To do this, we'll say <?php with an if statement. We'll also use an else statement along with it:
<?php if(is_search() || is_archive()) : ?>
<div class="archive-post">
<h4>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h4>
<p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
</div>
<?php else : ?>
<?php endif; ?>
For the if statement, we'll say if(is _search()). This means that if we're on a search results page, and if we search for something and this comes up, it's checking to see whether we're on this page. We can also check to see if it's on a category or an archive—not just category but any kind of archive. So let's say also is_archive(). If this is true then we want to just output what we just copied from the archive post page. Next, we will grab all the code in the <article> tag and paste that inside else, as shown here:
<?php if(is_search() || is_archive()) : ?>
<div class="archive-post">
<h4>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h4>
<p>Posted On: <?php the_time('F j, Y g:i a'); ?></p>
</div>
<?php else : ?>
<article class="post">
<h2><?php the_title(); ?></h2>
<p class="meta">
Posted at
<?php the_time('F j, Y g:i a'); ?>
by
<a href="<?php echo get_author_posts_url(
get_the_author_meta('ID')); ?>">
<?php the_author(); ?>
</a> |
Posted In
<?php
$catagories = get_the_catagory();
$separator = ", ";
$output = '';
if($categories){
foreach($catagories as $catagory){
$output .= '<a href="'.
get_category_link($category->
term_id).'">'.$category->cat_name.
'</a>'.$separator;
}
}
echo trim($output, $separator);
?>
</p>
<?php if(has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink();?>">
Read More</a>
</article>
<?php endif; ?>
Let's save this and then, in archive.php, we also want what we put in the index.php file. So we'll copy and paste that, as shown, and save it:
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php get_template_part('content'); ?>
<?php endwhile; ?>
Now if we reload the search page, it should look the exact same.
Just to make sure that it's coming from the content file, we'll just say TEST and then reload. Let's see it now:
It's not giving us TEST. Oh, that's because we didn't put it in the search. We only put it in the archive, so let's test that first.
Now if we click on category name, you can see that we're getting TEST. Just like we did in the archive where we put this get_template_part(), we will copy and put that in the search page as well:
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php get_template_part('content'); ?>
<?php endwhile; ?>
<?php else : ?>
<?php echo wpautop('Sorry, no posts were found'); ?>
<?php endif; ?>
This is the same exact code as we have seen earlier. We can just paste that in. Then, if we do a search, we now get TEST:
So we know that it's coming from content page in this conditional. We'll save this, and that's all set.
Now we can also implement our content.php file inside of the single.php file as well, because if we look at single, we have a lot of the same stuff that we had in the index.php file. We have an <article> tag. The only difference is that we're using the excerpt inside of the blog roll; also, we have the Read More link that's not in the single.php file. So we'll copy from the <article> tag to the ending </article> tag, paste that in get _template_part(), and save it. Now if we go to the single page, we lost that single page formatting. So we'll go into the content.php page and just add some conditionals where we want things to be different:
<?php if(is_single()) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php the_excerpt(); ?>
<?php endif; ?>
For instance, in the_excerpt(), we want to say <?php if. We can say if(is_single); if it is single, then we want the_content(), if not, then we want the_excerpt(). So we'll paste the code in and then get rid of the old code. So let's go back to the single page, reload, and we see that now we have our content back.
We also want to get rid of the Read More link. So let's go down to where that is, and actually we don't even need to do another conditional. We can just grab it and paste it below the_excerpt(), as shown in the following code block:
<?php else : ?>
<?php the_excerpt(); ?>
<a class="button" href="<?php the_permalink(); ?>">Read More</a>
<?php endif; ?>
</article>
So then the Read More won't show up on the single page anymore.
You can see how we've saved ourselves from repeating ourselves. Now, in archive.php inside the while loop, we just have this one line:
<?php get_template_part('content'); ?>
We see the same thing with the other pages—search, single and index. Now we'll get into the post formats. So, let's add a gallery type.
First, let's go to our functions.php file. We need to enable these different formats that we want to use.
Right under register_nav_menus(), we can add Post Format Support and add _theme_support(). Also, we want to add post-formats. Then the second parameter will be an array of the types of formats we want. We will choose three; we'll take aside, gallery and link:
//Nav Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu')
));
//Post Format Support
add_theme_support('post-formats', array('aside', 'gallery', 'link'));
If we look at the documentation, the supported formats are as shown in the following screenshot:
We're using aside, gallery and link, but we also have image, quote, status, audio, and chat. You might want to take a look at that. Let's save this, and since we put that in there, if we go to our Posts and say Add New, you'll now see that we have the Format box on the side, where we can choose what format we want for our post:
Now, as it is, it's not going to do anything different. So let's do something different.
We'll say Sample Aside and grab some content. We'll just take this content and paste it.
We'll choose Aside as a format, Business as a category, and click on Publish.
Now if we go to our frontend and reload, you can see that we have our Aside, but it's no different than these posts:
The point of this is to have this show up differently.
Now, the way we can do that is when we go to, let's say, index.php, where we put get_template_part(). We want to pass in a second parameter of get_post_format(), as shown in the following code block:
<?php get_template_part('content', get_post_format()); ?>
This is a function and that's going to allow it to see what type of post format it is. We'll just replace all get_template_part() with the second parameter. We'll go to archive.php and paste <?php get_template_part('content', get_post_format()); ?>. Let's do the same for search.php and single.php.
Now, for each format, we'll create a content file. So let's say New File and save this as content-aside.php.
We'll also create content-gallery.php and, finally, content-link.php.
Now, with these different files, we can make our formats look differently. So let's start with the content-aside.php file. This is going to be very simple. It will have an <article> tag. We'll give it a post class and post-aside. We don't want to have any images or any of that stuff. We just want the actual content, the author, and the date. We will place it in a <div> tag with the well class, which is a bootstrap class, and then in there, we'll use a <small> tag and the_author(). You can kind of think of this as like a status update. Let's put the @ sign and then, <?php the_ date(); ?>. Then right under it, we'll put the_content():
<article class="post post-aside">
<div class="well">
<small><?php the_author(); ?>@<?php the_date(); ?></small>
<?php the_content(); ?>
</div>
</article>
Now we'll save this. If we go back and reload, you can see that the post has changed because it's coming from this content-aside file:
Now I want to make this look a little better. So we'll go into our style sheet. We'll go down to where we have the article stuff, and let's say article.post-aside. Actually, we don't want to do the core element. We want small, and we just want to make the text bold by adding font-weight: bold. We also want to format well. In addition, we will change the background from gray to a light blue by adding #e0eefc. We also want to add some padding:
article.post-aside small{
font-weight: bold;
}
article.post-aside .well{
background:#e0eefc;
padding:10px;
}
Now you can see that it's formatted differently:
So this takes care of aside. Now let's do the link. For this, we'll go into content-link.php, copy what we have in content-aside, and update the code as shown in the following code block:
<article class="post post-link">
<div class="well">
<a href="<?php echo get_the_content(); ?>"><?php echo
the_title();
?></a>
</div>
</article>
We will add the link as shown and keep the well class, but this is going to be different!
Now if we go back into our posts, and click on Add New this time, we'll choose a Link as a format, and then, as a title, we'll add Get awesome web dev courses at Eduonix. Then, in the text area, we just want to put a link and that's it. We'll say Publish and go back and reload. Now you can see that we have a link that goes to eduonix.com:
We want to format this to make it appear a little better. So we'll go back to our style sheet and say .post-link:
article.post-link .well{
background: #f4f4f4;
padding:10px;
}
Actually, we just want well. We'll say background, which will be just light gray, and then we'll enter padding:10px. So now we have a formatted link.
We have our regular post, we have the aside content or status updates, and we have links. So the last one we'll look at is the gallery. For this, let's go to content-gallery.php; this is actually going to be very simple. We'll say <article class="post post-gallery"> and we enter the <h2> tag with the_title() and then, we just want the_content(); that's it:
<article class="post post-gallery">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
Now we'll go to the Add New post. We will then go to Add Media and then to Create Gallery.
We have some images in here, but we want to upload some more, and you should have these in your files. We will upload a few images, as shown here:
That's fine. We're just going to click on all of these images and then on Create a new gallery. Then you want to make sure that all of these are in there. To check them, click on Insert Gallery and make sure that Gallery is chosen inside the Format box:
We'll choose Entertainment inside the Category box and click on Publish. Let's go back and reload, and there's our gallery:
If we want to edit it, we can go back in, and you can choose the pencil icon to edit. Now, right now, they're linked to Attachment Page, but I want them to actually go to the media file. So you can see that when you click on them, it's just going to the image file:
You can change this. You can have it go to a page or you can implement some kind of light box plugin, if you wanted to, as well, but we'll not get into that. Now, I want to go to my style.css file and just add some styles. We'll say article.post-gallery and we'll add a dark background. We'll set color as white. We'll also add some padding, say, 5px 10px and then, margin-top will be 5px:
article.post-gallery{
background: #333;
color:#fff;
padding: 5px 10px;
margin-top:5px;
}
Let's save this and reload.
So, now we can post a gallery!