Building WordPress Themes From Scratch : Tutorial 3

The story so far:

Tutorial 1: Creating WordPress Themes from Scratch for Beginners Tutorial

Tutorial 2: Creating WordPress themes from Scratch: Tutorial 2

So far we have created a basic WordPress theme with a WordPress loop which automatically adds post’s in hierarchical manner and a widgets enabled sidebar which means you can add any widget to sidebar from the WordPress dashboard.

In this tutorial we will be adding menu function, Featured image function for posts and a separate page for post and pages. Apart from this we will make the design more attractive using attractive colors and fonts which will enhance the look of the theme.

Creating A Separate Page For Showing Posts:

Go to your blog homepage and try to open one of the posts. The complete post is not opened but only the excerpt is showing. To show full post we need to add a different file named single.php which will have a code to display the posts.

So create a new file and name it as single.php and add the following code to that file. The code will be almost similar to index.php file with little difference in showing the post content.

Code for single.php File:

<?php get_header(); ?>

<div id="content">

&nbsp;

<?php if (have_posts()): while(have_posts()): the_post(); ?>

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<p>posted by <?php the_author(); ?> on <?php the_date(); ?> </p>

<?php the_content(); ?>

<?php endwhile; else:  ?>

<?php  echo "We apologize for any inconvenience, please hit back on your browser";  ?>

<?php endif; ?>

&nbsp;

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
  • The code is same as index.php with one difference. Instead of using <?php the_excerpt(); ?> here we are using the function <?php the_content(); ?> which shows the full content of post.
  • We don’t need to add any css for this file as it is same as index.php file. You can add other layout styles if you want to customize the look of post content.

Also See : Creating A fully Functional Website

Showing Full content of pages:

If you try to open pages you will get the same result. It shows only the excerpt. To show full content of pages we need to add a different page called page.php.

Create a new file and name it as page.php. It is exactly the same as post.php with just the different name. So you can just copy and paste the single.php file and rename it.

Adding thumbnails to images:

Go to wordpress dashboard >> posts >> add new.

You don’t have an option to add featured image into post. To add this option you must add the thumbnail function in functions.php. Below is the function that you need to add. Copy and paste it into functions.php file.

            Code For adding thumbails:

<?php

&nbsp;

if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 200, 200, true );

add_image_size( 'featured', 200, 147, true ); //featured

add_image_size( 'featured-small', 82, 60, true ); //sidebar

}

?>

Now once again go to add new post and there should be an option to add featured image.

create WordPress theems

Now if you try to add featured image to post the uploading will be failed because you need to call that function whenever you need to add the thumbnail. So we will call it in index.php, single.php and page.php file.

In the next tutorial we will rewrite the code for index.php file making it fully attractive and adding featured image for post.

If you have any doubts please ask them. Help us to improve quality of our content.

6 comments

  1. thanks for the tutorial of wordpress theme…but i can see that step 4 you talked about, is there a link?

  2. This tutorial is a great help for me in my way to learn theme development.
    Just one thing i want to tell that in tutorial no.2 there is a mistake for sidebar.php code at line no 23 where it says
    There should be “==” in this instead of “=”.
    Rest works very well.
    Thanks 🙂

  3. I can’t find tutorial number 4.Kindly guide me for that.
    Thanks 🙂

  4. awsome tutorial . thanks for sharing

Leave a Reply