WordPress Theme Development From Scratch Part 6 : Post Forma...

WordPress Theme Development From Scratch Part 6 : Post Formats, Templates and Gallery

Category: WordPress   Updated by Ryan Dhungel



In this part 6 of WordPress theme development from scratch series, we will learn about Post Formats, Templates and Gallery. Post format is used by WordPress themes to customize its presentation of a post. In this part, we will learn how to implement post formats functionality to our theme. There are numbers of post formats available such as aside, gallery, link, image, quote, status, video, audio and chat. You can read more about post format in codex at WordPress. In this tutorial we will use aside and gallery. Once you understand how it works, you can add more to it.

Also in this tutorial, we will learn how to use Templates so that we do not need to repeat our code over and over again. Let's start off with template first.

Requirement


Goals

  • Use content template
  • Create different post formats


Getting Started

So far we did a lot of work and created bunch of files. We have also repeated ourself multiple time writting the same code such as <?php the_title(); ?><?php the_author(); ?><?php the_content(); ?> in different files such as index, single, archive, page etc. It is not a good practice to repeat code like this. We can use templates instead and load them on each page as required.


Create content.php

Let's go ahead and create content.php inside our themes folder. The first thing we want to do is go to index.php and copy the code that is sitting inside while loop. Go ahead and copy everything within <?php while(have_posts()) : the_post(); ?> and <?php endif; ?>. This is where the post title, date, author, featured image and comments are.

The code you need to copy is below:

       <div class="blog-post">
        <h2 class="blog-post-title"><?php the_title(); ?></h2>
          <p class="blog-post-meta"><?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></p>
            <?php if(has_post_thumbnail()) : ?>
              <div class="post-thumb">
                <?php the_post_thumbnail(); ?>
              </div>
            <?php endif; ?>
          <?php the_content(); ?>
          <?php comments_template(); ?>
        </div><!-- /.blog-post -->


Now go to content.php and paste the code that you copied and save the file. Now we can delete the above code from index.php and use get template part function instead. 

See the code below:

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


What we did here is just cut the code from index.php, put into content.php and use the function get template part to load it. Pretty simple. Have you also noticed that our index.php is looking pretty neat now. That's what we want right?

Load content in single.php

Now let's go ahead and do the same thing in single.php. Delete everything within <?php while(have_posts()) : the_post(); ?> and <?php endif; ?> and put the code below instead.

 

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


Remove the title link from single page

Now if you go to one of your post page, you will notice that the title link is again clickable. We don't want it to be clickable in single page. Let's go to content.php and put an if condition. Find <h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> and replace with the code below:

 

       <h2 class="blog-post-title">
        <?php if(is_single()) : ?>
                <?php the_title(); ?> 
        <?php else : ?>
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?> 
            </a>
        <?php endif; ?>
       </h2>


All we did here is check if it is single page or not. if single page then we want only title else we want the title with permalink. Now if you reload the page, you will your single post title has no link. Awesome!

Display the full content if it is single page

Now we are loading the contents from content.php into index.php and single.php. We need to make sure that the entire blog post is displayed if it is a single page but only excerpt is displayed if it is an index page. Lets fix this. In our content.php you will find <?php the_excerpt(); ?> right before the ending div tag. Let's put a conditional if statement to it. We will also enable comments template if it is single page.

See the code below:

      <?php if(is_single()) : ?>
        <?php the_content(); ?>
      <?php else : ?>
        <?php the_excerpt(); ?>
      <?php endif; ?>
      
      <?php if(is_single()) : ?>
        <?php comments_template(); ?>
      <?php endif; ?>


Do you like what you are doing? If you are not used to all this stuff, It will take you some time to get used to but trust me, we are doing good and we are cleaning up our code and loading things the WordPress way! Go back and reload the page. Now we have single page with full content and also with comments. Let's move on and do the same thing with archive.php


Load content in archive.php

Now we can go ahead and do the same thing in archive.php. Delete everything within <?php while(have_posts()) : the_post(); ?> and <?php endif; ?> and put the code below instead.

 

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


This one is easy!

Post Format - Aside

Our theme currently does not support post format. The first thing we need to do is add theme support for post formats. Open up your functions.php and put this code inside my_theme_setup() function. Make sure you put inside the functions closing {}

// Post format
add_theme_support('post-formats', array('aside', 'gallery'));


Now go to WordPress admin to create a sample post. You will notice that now we have a post format options available.

post-format

Create content-aside.php

Create a sample post and assign it a post format of aside. Now if you reload the front page you can see the new post but it looks no different than other posts. To change that, first we need to create a content-aside.php file in our theme folder.

Also in your index.php, find this line of code:

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


Now add get_post_format as a second parameter. Replace the above code with the code below:

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


Also make the same change to archive.php and single.php.

Please don't reload the page to see any changes because you won't see any. We still got more to do. Head over to content-aside.php, copy the code from below and paste in there. Or you can type yourself, That's better. The more you code the better you become.

<div class="blog-post post-aside">
    <div class="well">
        <small><?php the_author(); ?>@<?php the_date(); ?></small>
        <?php the_content(); ?>
    </div>
</div>


I am sure you know what's going on here. We put author name, date and the content in a div with the class of well, which is a bootstrap class that puts gery background with padding.

Post aside

Now you can reload the page and see the change. Yes! Our post with the format option of aside stands out form the rest. It is formatted differently than the others. This is great! You now know what you can do with post formats. You can get as creative as you want, go for it!


Post Format - Gallery

Are you excited? I am excited because working with images are always fun. Let's go to WordPress admin and create a post with gallery. Click on add media, create gallery and choose the best images for your gallery. Click on insert gallery, give it a post format of gallery and click publish.


Create content-gallery.php

I know you are excited to reload the page to see your beautiful gallery but there is one more file to create. Create a file called content-gallery.php inside your theme folder and paste the following code:

<div class="blog-post post-gallery">
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
</div>


Now reload the page and smile. I am smilling, looking at those beautiful images. I hope you also had beautiful images. Shall we add some styling to it?


Styling the gallery

I gave the heading a similar blue color to match the navbar. I also used dark background for the images, added some padding and center the text etc.

/*
gallery
*/
.post-gallery h2{
    color: #428bca;
}

.post-gallery{
  background: #333;
  padding: 10px;
  color: #fff;
  text-align: center;
}

 

Please replace <?php get_template_part('content'); ?> with <?php get_template_part('content', get_post_format()); ?> in single.php and archive.php too.


Conclusion

We are pretty much done with the blog. In the next part will start working on custom front page.  I know you have been waiting for that. That is coming up next. Thank you all for learning with me. I am sure you are loving the WordPress theme development. It is fun and at the same time a valuable skill to have. Learning to know how WordPress works as a system and being able to go along with it and creating something amazing in near future is within your reach.

Don't forget to leave your comments below. Also you can use our forum to ask questions and give answers.

 Download source code from github



Back to articles