In this lesson we will do two major things. First we will write some CSS to set up the basic layout as to make it easier to visually separate the different parts from each other. We will center the middle content, restrict it to a certain width, place the content to the left and the sidebar to the right, and position the header on top and footer at the bottom. Secondly we will be querying some more advanced WordPress information – posts. The front page on our site are to display published posts, ordered by the date they was published.

So far in this tutorial we have activated the theme and the preview of our front-end is not much to look at. Let’s fix that by setting up some basic CSS.

Basic CSS

First we create a new folder inside our theme folder, called images. We will put all of our images used to form our site here. I’ve sliced some images from the Photoshop file where I created the design: Download the images here. Unzip the images and put them all into the images folder.

To make my layout cross-browser friendly, I always reset the margin and padding for all elements at the beginning of the stylesheet. Basically we equalize the rendering of every browser and we’ll be free to ignore the individual quirks to each one. It’s a good idea to organize the resetting CSS inside a separate stylesheet, and that’s what we’ll do here. Create an empty reset.css in your theme folder and copy and paste the code below.

reset.css:

/* Reset styles */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
option, select, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; padding: 0; 
}
a { text-decoration: none; outline: 0; }
a img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }

We will then import this css-file into our stylesheet by using @import url("reset.css"). Another choice is to add the reset.css stylesheet in the theme’s header, just like we did for style.css using bloginfo('stylesheet_url'), but for this case it’s better to import it through the original stylesheet.

Place the import line just below the comments containing the WordPress theme information. After that we fill in the rest of our CSS:

style.css:

/*
Theme Name: My WP Theme Tutorial
Theme URI: http://www.acornartwork.com
Description: A starting theme following a tutorial at acornartwork.com
Author: @nnci
Author URI: http://www.acornartwork.com
Version: 1.0
*/

@import url("reset.css");  /* Import our reset stylesheet */

body {
	background: #e3e6e8 url("images/bg-top.png") repeat-x top left;
	font-family: Verdana, "Trebuchet MS", Arial, Helvetica, Georgia, sans-serif;
	font-size: 12px;
	vertical-align: top;
	color: #303030;
	text-align: center;
}

/*** SITE LAYOUT ***/
#top-container {
	width: 840px;
	margin: 0 auto;
	text-align: left;
}
#header { height: 118px; }
#header h1 a {
	background: url("images/logo.png") no-repeat top left;
	display: block;
	text-indent: -9999px;
	height: 59px;
	width: 285px;
}
#header h1 { padding-top: 25px; }
#content-wrapper {
	background: url("images/content-bg.png") repeat-y top center;
	padding-bottom: 20px;
}
#content {
	width: 520px;
	float: left;
	padding: 0 0 0 35px;
}
#content-top {
	height: 30px;
	background: url("images/content-top.png") no-repeat top center;
}
#sidebar-wrapper {
	width: 264px;
	float: left;
	margin-left: 20px;
}
#bottom-container {
	background: url("images/bg-bottom.png") repeat-x top left;
	height: 230px;
}
#footer {
	margin: 0 auto;
	width: 785px;
	text-align: left;
	padding-top: 20px;
}

If you refresh your site now, it should look somewhat better. We should see the backgrounds forming the header, footer and content and the content and sidebar should be placed next to each other.

We will improve the look and style the content in Lesson 6, when we have more content to style. For now this is enough for the overall layout.

Changing Media Settings

Another thing you should do at this point, preferably before you start uploading images in your posts, is to change Media settings in WordPress admin. Since we’ve now roughly established the width of our content through the basic CSS, we need to change the image sizes to fit our content. We adjust it so that if an user uploads and includes an image in a post, we’ll make sure the image will fit the content’s width, without overlapping the sidebar or more.

Go to WordPress admin and go to Settings » Media. You will see text fields for “Thumbnail”, “Medium” and “Large”. Normally the WordPress default “Thumbnail” and “Medium” sizes are OK, but “Large” is 1024 by default. Our content is roughly 515px wide. Let’s change the “Large”‘s “Max Width” into 515, and the “Height” into 400 or so. Now that this is done, when you upload images WordPress will automatically create image versions which are sure to fit your design.

NB: In later lessons we will define more image sizes, so don’t start uploading loads of images just yet. If you already have uploaded images and need to create new copies with the new sizes, install and use the Regenerate Thumbnails plugin whenever new image sizes have been set.

The Loop in index.php

Querying WordPress for its posts is referred to as The Loop, basically because WordPress arranges an array with posts depending on settings and the page request, which we can loop through and use.

On our front page (that’d be index.php) where we want to display recent posts we want to do the following: check if there are any posts, if so loop through them as long there are posts and stop when we reach the maximum count of posts to display on each page (the count is set in WordPress admin » Settings » Reading). For each post we set up the current post information using the WordPress function the_post(), so we can use simpler WordPress functions to pull out information about the post, such as the permalink, the post title, the post content and date it was published, to mention a few. Note that the loop will automatically arrange the sticky posts first.

Let’s see the loop in action, and I’ll explain further below.

index.php:

<?php get_header(); ?>
				
<div id="content">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
					
	<div <?php post_class(); ?>>
		<h3 class="posttitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
													
		<div class="postcontent">
			<?php the_content(''); ?>
		</div>
						
		<div class="content-band">
			<span class="postmeta-category"><?php the_category(', '); ?></span>
			<span class="postmeta-comments"><?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?></span>
			<span class="postmeta-readmore"><a href="<?php the_permalink(); ?>">Continue reading &raquo;</a></span>
		</div>
	</div>
						
	<?php endwhile; ?>
					
	<div id="navigation">
		<?php posts_nav_link(' ', '<span class="nav-newer">&laquo; Newer posts</span>', '<span class="nav-older">Older posts &raquo;</span>'); ?>
	</div>
					
	<?php else: ?>
	<div class="post">
		<p>Sorry, no posts found.</p>
	</div>
	<?php endif; ?>
					
</div>
				
<?php get_sidebar(); ?>
<?php get_footer(); ?>

There are three parts required for a standard loop, all gathered in the third line above: if (have_posts()) checks if there are any posts available, while (have_posts()) is the loop itself, and the_post() is what advances the loop counter and sets up the global post variables, allowing us to use simpler function calls to get post information. Anything between this line and the closing of the loop endwhile are repeated for each post. We also add an else to the have_posts(), so that we can display something meaningful if there are no posts.

For each post we wrap it inside a <div>, and we let WordPress name it by using the function post_class(). WordPress will insert a series of class names depending on the post type, category, status, ID, and whether or not the post is sticky. This naming convention is very useful as we can target specific types of posts with CSS.

We then print out the post information we want, in the order and in the wrappings we want. WordPress has a function for each post information we need, normally starting with the_, such as the_title(), the_permalink() and the_ID(). Refer to the reference list of functions below to see what each function returns and possible parameters. For returning the post content, the body text itself, WordPress has two functions: the_content() and the_excerpt(). The difference between these two is important, so I’ll explain exactly why I use the_content() with an empty string as an argument.

the_content() versus the_excerpt()

The main difference between the_content() and the_excerpt() is that the_content() returns the entire post content, but if we are not on an individual post and there exist a more-tag (<!--more--> ) in the post, it will not print anything after the more-tag. The the_excerpt() on the other hand will check whether or not the user has written an excerpt, which is the text field below the post text editor in WordPress admin, which could be filled with a totally different text, normally summarizing the post. If this field is empty, WordPress wil trunctate the beginning of the post from the beginning and up until 55 words, and automatically append a [...] at the very end. The section excerpt versus the content at WordPress Codex further explains the difference.

To decide which one to use for the front page to display the post content, may depend on what you think the users of this theme would want to show. If you want to use it yourself and you always make sure you split your posts meaningfully with a <!--more--> tag, choose the_content(). But if you forget the more-tag, the full post is printed out on your front page, which is impractical if you like to write very long posts. On the other hand, if you have a habit to fill out the excerpt field below the post content editor, use the_excerpt().

Let’s take a look at the arguments to the_content(); the first argument defines the text you want on the “read more”-link, which is automatically appended after the post content if you use the_content() on any templates but the single post. I’ve given an empty string to prevent the “read more”-link because of two reasons. Primarily because I want to add the “read more”-link myself at a later point, I don’t want it to appear immidiately after the post’s content. Secondly, while the WordPress default “read more”-link does indeed link to the post, I don’t like the “jump” down the page, down at the point right after the more-tag was placed in the post. By creating our own “read more”-link by simply using the the_permalink(), we redirect the reader to the beginning of the page as normal, without a confusing and annoying jump downwards the page.

Finally after the loop, we want to allow the user to navigate to older and newer posts. We use posts_nav_link() to create both forwards and backwards nagivation links.

WordPress Function Reference:

Save and refresh your front page. The theme should now print out the recent published posts, displaying the whole post content or up to the more-tag if it exists (for now there’s no indicator whether or not there are more content to the post), and if the total number of posts exceeds the maximum number of posts to display on the front page, pagination links will be displayed below the posts. Now it’s starting to look like something!

This concludes Lesson 3 of the WordPress Theme Tutorial. Go to the next lesson, Defining Widget Areas and Creating Our Functions File, or back to the tutorial’s Table of Contents.

Share this post:
FacebookTwitterEmailShare