Single.php Building A WordPress Theme From Scratch

In today’s Let’s Build A WordPress Theme From Scratch tutorial we are going to go back and look at the blog and work with single.php. We talked about home.php in my second article in this series and how it controls/displays your most recent posts. When you come to wpdevsolutions.com, the landing page of my website displays the most recent articles I have written. This means that I am using home.php to display those posts. You have now clicked into this article and can now read the full tutorial. You are currently on single.php! It contains a lot of the same information we have seen in other php files but I will show you how we have to change up the code just a little in order to show the full content and a few helpful items you should include on a single.php file. Let’s look at the code from my theme from scratch example.

This is the fifth article in the Let’s Build A WordPress Theme From Scratch Series.

Single.php

Like most of the other template files we have worked with, we start the single.php file with the Loop. You will notice nothing is different with the structure of the Loop, there are just a few changes we have to make to the elements to prevent the loop from only showing the intro paragraph and a small thumbnail. I will also show you guys and gals how to set up an author box, in case you are going to have multiple people writing blog posts, and a little bit of code to share the articles on social media platforms.

<?php get_header(); ?>

<div class="wrap_1280">
    
    <div class="main-content">

        <div class="left-page-content col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-push-4 col-md-push-4 col-sm-push-4">
                
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <div class="blog-page-content">
 
                    <?php if (has_post_thumbnail()) : ?>

                        <figure class="article-full-image">
                            
                            <?php the_post_thumbnail('full'); ?>
                            
                        </figure>

                    <?php else : ?>

                    <?php endif; ?>
    
                        <h2 class="inner-title"><?php the_title(); ?></h2>
                            
                            <div class="category-post">

                                <h6 class="article-meta-extra">
                                    
                                    Posted on <?php the_date(get_option('date_format')); ?> at <?php the_time(get_option('time_format')); ?> | <?php the_category('  |  '); ?> | <?php the_author_posts_link(); ?>
                                    
                                </h6>
                                
                            </div>

                    <?php the_content(); ?>  
                        
                    <div class="social-share clearfix">
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="http://www.facebook.com/sharer.php?u=<?php echo the_permalink(); ?>&t=<?php echo the_title(); ?>" title=”Facebook share button” target=”blank”><img src="<?php echo get_template_directory_uri(); ?>/images/facebook_share.png" alt="share this article" /></a>
                        
                        </div>
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="http://twitter.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" target=”blank”><img src="<?php echo get_template_directory_uri(); ?>/images/twitter_share.png" alt="tweet this article" /></a>
                        
                        </div>
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="mailto:enter_recipient?subject=enter+subject&body=<?php echo urlencode(get_permalink($post->ID)); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/email_share.png" alt="email this article" /></a>
                        
                        </div>
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" target=”blank”><img src="<?php echo get_template_directory_uri(); ?>/images/googleplus_share.png" alt="google plus" /></a>
                        
                        </div>
                        
                    </div>

                        <div class="author-box">
                            
                            <div class="author-image col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                
                                <?php echo get_avatar( get_the_author_meta('email')); ?>
                                
                            </div>
                            
                            <div class="author-info col-lg-8 col-md-8 col-sm-12 col-xs-12">
                                
                                <h5 class="author-name">Author: <?php echo get_the_author_meta('display_name'); ?></h5>
                                
                                <p><?php echo get_the_author_meta('description'); ?></p>
                                
                                <h6>Website: <a href="<?php echo get_the_author_meta('user_url'); ?>" title=""><?php echo get_the_author_meta('user_url'); ?></a></h6>
                                
                            </div>
                        
                        <div class='clearfix'></div>
                        
                        </div>

        <?php endwhile; ?>
                        
        <?php else : ?>
                        
                <article class="no-posts">

                    <h1>No Posts Were Found</h1>

                </article>
                        
        <?php endif; ?>

          
            </div>
          
        </div>
        
        <?php get_sidebar('blog'); ?>

        <div class="clearfix"></div>

    </div><!-- END MAIN-CONTENT -->
    
</div><!-- END wrap_1280 -->

<?php get_footer(); ?>

Taking a deeper look at the code shows us:

  • In the_post_thumbnail() function we need to pass a parameter that tells WordPress that we want to use the ‘full’ version, or largest size version, of the image instead of the thumbnail. It will look like the_post_thumbnail(‘full’).
  • The most important thing to remember on single.php is to not use the_excerpt() instead use the_content() which will display the article in it’s entirety.
  • You will also notice I passed the parameter of ‘blog’ into the call for the sidebar. Looks like get_sidebar(‘blog’). I will cover sidebars in an upcoming article in this WordPress theme from scratch series.

Some Extras

There isn’t anything drastically different with the code in this file but it is a very important landing page, especially if you are a blogger. You always want to optimize each of your blog pages to hopefully be another landing page that is performing for your site. So if someone searches for something they are looking for and they come across your article on the topic, make sure you entice them to read other articles or do something else on your website. I always like to have a few things to help accomplish this: A sidebar set up specifically for my blog pages, a clear CTA (call to action) if you want them to do something like subscribe or contact you, provide them the ability to share the article they just read with friends, and provide them information about the author in case they want to read more articles by that author.

Share Icons

Here is the code that you can copy and paste into your site to give readers the option to share on a few social media platforms. The href in the anchor tag is the real magic here. It collects information about the post; including the title, an intro, and the post’s featured image; and then dynamically creates the share platform from that specified social media network. Notice that I provide my own images, so you can easily go out and find social media share icons you like and replace these out. Don’t forget to give the images a clear alt text. Also, use the target=”blank” in your anchor tag so that the link will open up in a new tab/window and won’t take them away from your website. I have only provided you with code that will work for Facebook, Twitter, Google+, and an email this article link. You should easily be able to find others on the web if you need them.

<div class="social-share clearfix">
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="http://www.facebook.com/sharer.php?u=<?php echo the_permalink(); ?>&t=<?php echo the_title(); ?>" title=”Facebook share button” target=”blank”><img src="<?php echo get_template_directory_uri(); ?>/images/facebook_share.png" alt="share this article" /></a>
                        
                        </div>
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="http://twitter.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" target=”blank”><img src="<?php echo get_template_directory_uri(); ?>/images/twitter_share.png" alt="tweet this article" /></a>
                        
                        </div>
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="mailto:enter_recipient?subject=enter+subject&body=<?php echo urlencode(get_permalink($post->ID)); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/email_share.png" alt="email this article" /></a>
                        
                        </div>
                        
                        <div class="share-icons col-lg-3 col-md-3 col-sm-3 col-xs-6">
                            
                            <a href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>" target=”blank”><img src="<?php echo get_template_directory_uri(); ?>/images/googleplus_share.png" alt="google plus" /></a>
                        
                        </div>
                        
                    </div>
The Author Box

The code below will set up an area where you can show information about the author. The first div contains a function get_avatar that pulls over the avatar/profile picture you have assigned to the user. There are many options out there to pull in an avatar for an author but I use Gravatar. So we have requested the avatar but how does it know who wrote the article and which avatar to pull. Well, we have to pass a parameter of get_the_author_meta() so that WordPress will link up to the author who wrote the article. Things aren’t quite linked up yet, we need to then pass a parameter into get_the_author_meta() of ’email’ so that WordPress knows to grab the avatar from the email address stored in the author meta associated with this article. PHEW!

Next, we continue to use get_the_author_meta() to grab the ‘dispaly_name’ of the author, ‘description’ which shows the author’s bio, and I included a link to the author’s website by passing the parameter of ‘user_url’. Where am I pulling these items from? Where do I enter in the author’s bio and website? Head over to your dashboard menu and select Users. There you will find a list of all the users attached to your website, and if you click on one of them, you will see that all the information is entered here for each user/author. See photos below:
All Users Screen - developing WordPress themes

Individual User Edit Screen - WordPress Theme From Scratch

 <div class="author-box">
                            
                            <div class="author-image col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                
                                <?php echo get_avatar( get_the_author_meta('email')); ?>
                                
                            </div>
                            
                            <div class="author-info col-lg-8 col-md-8 col-sm-12 col-xs-12">
                                
                                <h5 class="author-name">Author: <?php echo get_the_author_meta('display_name'); ?></h5>
                                
                                <p><?php echo get_the_author_meta('description'); ?></p>
                                
                                <h6>Website: <a href="<?php echo get_the_author_meta('user_url'); ?>" title=""><?php echo get_the_author_meta('user_url'); ?></a></h6>
                                
                            </div>
                        
                        <div class='clearfix'></div>
                        
                        </div>

Almost There

We are getting close to the end of the Let’s Build A WordPress Theme From Scratch series. You are one step closer to being a WordPress theme developer! Yes you! Soon you will be brave enough and have the skills to design and build a theme from scratch and use it to get into a great position out there in the development world. I think we have about four more articles to cover, one of them being the engine of our whole theme…the functions.php file. This file is very complicated but I know we will be able to tackle it easily and learn how to use it and not be afraid of it. As I mentioned earlier, don’t over look single.php in your design and planning. It is THE major landing page for your blog articles and should really be thought out to optimize your website’s reach. Ultimately, we want the websites we build to perform well and pay off for the clients we build them for. Remember, if you have any questions email me here on my website or contact me through any of my social media accounts listed above. Thanks!

Team Treehouse – Learn PHP for WordPress

If you are serious about learning to develop custom themes in WordPress, I highly recommend you join Team Treehouse. They have a full video course on everything WordPress development, including a course on specifically writing PHP for WordPress.