Advertisement

WordPress: Beginner to Master, Part 3

by

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).

 
<?php get_header(); ?> 
<div id="mainarea">

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

 
#mainarea { 
	float: left; 
	padding-right: 30px; 
	width: 690px; 
	}

The WordPress Loop

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

 
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
 
query_posts("paged=$paged&cat=-$ts_portfolio_cat"); 
while (have_posts()) : the_post(); ?>

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.


 
<div id="post-<?php the_ID(); ?>" class="blogpost"> 
 
    <h2> 
        <a href="<?php the_permalink(); ?>" title="Continue Reading 
&quot;<?php the_title(); ?>&quot;"><?php the_title(); ?></a> 
    </h2> 
	 
    <ul class="meta"> 
        <li><?php the_category(', ') ?></li> 
        <li><a href="<?php the_permalink() ?>#comments"> 
            <?php comments_number('No Comments', '1 Comment', '% Comments'); ?></a></li> 
        <li><?php the_time('F jS') ?></li> 
    </ul> 
	 
    <?php the_content(); ?> 
	 
</div>

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:

 
<?php 
endwhile; ?> 
 
<div class="navigation"> 
    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div> 
    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div> 
</div> 
 
<?php 
get_sidebar(); 
get_footer(); ?>

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

Styling

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.

 
.blogpost { 
	clear: both; 
	margin-bottom: 45px; 
	padding-bottom: 40px; 
	overflow: hidden; 
	} 
	 
.singleblog{overflow:hidden;} 
 
ul.meta { 
	margin: 0 0 25px 0; 
	} 
	 
ul.meta li { 
	display: inline; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 0.7em; 
	line-height: 1.3em; 
	margin-right: 10px; 
	padding-left: 12px; 
	text-transform: uppercase; 
	} 
	 
ul.meta li:first-child { 
	border: none; 
	padding-left: 0; 
	} 
	 
.alignleft { 
	float: left; 
	margin: 0 10px 8px 0; 
	} 
	 
.alignright { 
	float: right; 
	margin: 0 0 8px 10px; 
	} 
	 
.aligncenter { 
	margin: 10px auto; 
	}

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:

 
.blogpost, .worksearch { 
	border-bottom: 1px solid #e8e3c8; 
	} 
 
h2 a:link, h2 a:visited { 
	color: #333; 
	} 
	 
ul.meta li { 
	border-left: 1px solid #e3e8ed; 
	}


Sidebar

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:

 
register_sidebar(array( 
	'name' => 'Sidebar', 
	'before_widget' => '<li id="%1$s" class="widget %2$s">', 
	'after_widget' => '</li>', 
	'before_title' => '<h3 class="widgettitle">', 
	'after_title' => '</h3>', 
));

In other words, it should look as follows:

 
if ( function_exists('register_sidebar') ) { 
    register_sidebar(array( 
        'name' => 'Homepage Bottom', 
        'before_widget' => '<div class="extras">', 
        'after_widget' => '</div>', 
        'before_title' => '<h2>', 
        'after_title' => '</h2>', 
    )); 
	 
    register_sidebar(array( 
        'name' => 'Sidebar', 
        'before_widget' => '<li id="%1$s" class="widget %2$s">', 
        'after_widget' => '</li>', 
        'before_title' => '<h3 class="widgettitle">', 
        'after_title' => '</h3>', 
    )); 
}

Display the Sidebar

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

 
</div><!--/mainarea--> 
 
<div id="sidebar"> 
<ul><?php dynamic_sidebar('Sidebar') ?></ul> 
</div>

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

 
#sidebar { 
	float: left; 
	width: 220px; 
	} 
 
#sidebar ul { 
	margin: 0; 
	} 
 
#sidebar ul li { 
	list-style: none; 
	margin-left: 0; 
	margin-bottom: 25px; 
	}

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:

 
li h3 { 
    font-size: 1.3em; 
    line-height: 1.4em; 
    margin: 5px 0 5px 0; 
    } 
 
 
/* Sidebar Search Form */ 
 
#sidebar ul li#search { 
    margin-bottom: 25px; 
    } 
	 
.hidden{display:none;} 
	 
#sidebar ul li#search form #s { 
    padding: 7px 29px 7px 7px; 
    width: 182px; 
    } 
	 
#sidebar ul li#search form #searchsubmit { 
    display: none; 
    } 
 
 
/* Sidebar Lists (eg. Meta, Archives, Categories) */ 
 
#sidebar ul li ul { 
    padding: 15px 5px 15px 8px; 
    } 
	 
#sidebar ul li ul li { 
    list-style-position: outside; 
    margin: 0 0 5px 20px; 
    }

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.

 
#sidebar ul li#search form #s { 
    background: url("deepblue/search.png") no-repeat right #f6f6ec; 
    border: 1px solid #E8E3C8; 
    } 
	 
#sidebar ul li#search form #s:focus { 
    border: 1px solid #dad4b6; 
    } 
	 
#sidebar ul li ul { 
    background-color: #f6f6ec; 
    border: 1px solid #E8E3C8; 
    } 
	 
#sidebar ul li ul li { 
    list-style: url("deepblue/bullet.gif"); 
    } 
	 
#sidebar ul li a:link, #sidebar ul li a:visited { 
    color: #333; 
    }

 


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:

 
<?php 
include(TEMPLATEPATH . '/var.php'); 
$post = $wp_query->post; 
 
if(in_category("$ts_portfolio_cat")) { 
 
    /* Is a Portfolio item */ 
    require('single-portfolio.php'); 
 
} else { 
 
    /* Is a Blog post */ 
    require('single-blog.php'); 
 
} 
?>

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

 
<?php get_header(); ?> 
<div id="mainarea"> 
 
<?php if(have_posts()) : while (have_posts()) : the_post(); ?> 
 
    <div id="post-<?php the_ID(); ?>" class="singleblog"> 
 
        <h2><?php the_title(); ?></h2> 
 
        <ul class="meta"> 
            <li><? the_category(', ') ?></li> 
            <li><a href="<?php the_permalink() ?>#comments"> 
                <? comments_number('No Comments', '1 Comment', '% Comments'); ?></a></li> 
            <li><? the_time('F jS') ?></li> 
        </ul> 
 
        <?php the_content(); ?> 
 
    </div> 
	 
    <?php comments_template(); 
     
endwhile; endif; 
 
get_sidebar(); 
get_footer(); ?>

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.


Summary

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

Advertisement