Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. WordPress

WordPress: Beginner to Master, Part 3

Read Time:8 minsLanguages:

Throughout this six-part beginner-to-master series, we'll be using the advanced features of WordPress to create our own portfolio & blog, complete with an options page, multiple styles and support for the new WordPress 2.7 features. Today we'll layout our blog posts and style 'single posts' based on category.

Today we're going to be bringing our focus to the blog part of the theme. We'll be coding the main 'blog' view, creating the sidebar and ending with the single post view.

Also available in this series:

  1. WordPress: Beginner to Master, Part 1
  2. WordPress: Beginner to Master, Part 2
  3. WordPress: Beginner to Master, Part 3
  4. WordPress: Beginner to Master, Part 4
  5. WordPress: Beginner to Master, Part 5
  6. WordPress: Beginner to Master, Part 6

Jump to a Section

The Blog

The code for the main blog view will sit inside index.php. This is the page which will display all our blog posts, with links to their main/single view where you will usually continue the post, and allow users to comment.

Below is a preview of what the layout for all blog sections will look like, with the sidebar on the right:

Let's get started. In index.php enter the following code. We start by including our header page, and then create our div#mainarea which, as you can see in the first image, will hold the blog posts (with the sidebar to the right).

Add the following to style.css to set #mainarea with the correct styles:

The WordPress Loop

Next, we'll start a WordPress Loop with some custom criteria:

The first line allows us to use pagination in the WordPress loop – ie. telling the loop to only include x posts, and then show a 'Newer Posts' link to the next lot. The code checks if the current page is requesting a certain pagination page, if not it shows the first.

Inside query_posts() we specify to use pagination; and also tell the loop to exclude posts from our Portfolio category (note the minus symbol).

Next up is the code inside the loop. As mentioned in Day 2, anything in the loop will be executed for each avaliable post.

We start by including each post inside its own div. We use the_ID() to give each div a unique ID (incase you ever need to style a specific post differently); and we've also gave each a class of blogpost for it to be styled.

Next the post title is output using the_title() and the_permalink() is used to include the link to the full post.

Inside ul.meta is some extra information for the post. the_category() is used to output the names of the categories the post is assigned to (seperated by a comma).

We then link to the comments for the post, again using the_permalink(), and comments_number() is used to output the number of comments for the post.

the_time() provides the date the post was published. F jS is a PHP date code for 'Month Name' (J); 'Date' (j) and the date suffix (ie. 'st', 'nd', 'rd' or 'th') (S).

For example, this would output Janauary 31st. You could also add Y to the end to output the year. For more info, see the PHP: date() manual.

Finally, the actual body content for the post is output using the_content(). A 'Read More' link will automatically be appended to the post if required.

Next up, we close the Loop with endwhile, and include the Pagination buttons to cycle through older/newer posts (which is where our $paged code comes in useful) using the next_posts_link() and previous_posts_link() functions:

We've also included our sidebar.php and footer.php files.


Preview the Blog page in your browser. I've already added in an extra post with some example data. The image below highlights what we need to change:

Throw the following into style.css. We add some seperation between each blog post (.blogpost), and set the ul.meta items to display inline. The .alignleft, .alignright and .aligncenter classes are also set – these classes are used by WordPress to align images, and is also used on our pagination.

In deepblue.css add a thin, light border between each blog post, a border to seperate each meta list item, and set the H2 to #333:


The sidebar will look as follows, and will be used across the site, except the front and portfolio pages:

Register Sidebar

Firstly, we need to register the sidebar widget area - this is done in the same way as the area on the homepage. Inside functions.php and the following code inside the brackets for if ( function_exists('register_sidebar') ) { after the homepage array:

In other words, it should look as follows:

Display the Sidebar

Next, render the sidebar by adding the following to sidebar.php:

And ensure the Sidebar sticks to the right of the page by fixing the width in style.css:

From your dashboard, add some widgets to the 'Sidebar' option, and preview it:

Styling the Sidebar

Add the following styles into style.css to create a structure for each sidebar widget:

Sidebar Colour

Save the two images below as bullet.gif and search.png in your /styles/deepblue/ folder (the images below have been resized, but will be correct when saved):

Add the following to deepblue.css. We use the two images on their respective elements, and set background & border colours for widget elements.


Single Post Display

WordPress uses the single.php file for displaying a single post – ie. the whole post, where visitors can post comments etc. However, since there are two different types of posts we're displaying: Portfolio items and Blog posts, both require their own layout on the single post page, and so we need to differentiate between them.

Check Post Category

Create a single.php file and add the following code:

We use WordPress' in_category() function to check whether the post to display is assigned to the Portfolio category. If it is, we require the single-portfolio.php file.

If it isn't in the Portfolio category, then single-blog.php is used.

Today, we'll only create the single-blog.php file. The single portfolio page will be created in the next part of the series.

Single Blog Post Layout

You will notice this is very similar to the code we used in index.php, but with a few exceptions:

  1. We are using if(have_posts()) instead of query_posts(). This is the default WordPress loop.
  2. We have included the comments area using comments_template().

On your blog, click a post and you should be taken to the single post page. You may also see the default comments area has been included automatically since we haven't created our own yet.

We will shall create a custom comments template in part five.


Check back tomorrow when we'll be creating our Portfolio pages. (Part 4)

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.