WordPress: beginner to master, part 2

GFX9.COM share WordPress: beginner to master, part 2, you can download now.



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're creating our homepage layout.


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

  • Getting Started
  •   — Outline
  • Header.php
  •   —
  •   — Colour Schemes & Stylesheets
  •   — div#head
  •   — div#nav
  • Styling the Header
  •   — General Styles
  •   — Header Styling
  •   — Navigation Styling
  •   — Some Colour
  • Portfolio Posts
  • The Homepage
  •   — Beauty Therapy
  • Widgetised Area
  • Footer
  • Summary

Getting Started

In this part, we will be creating the front-page for our portfolio, making use of our options page and handling custom-fields in posts. Before getting started, create the following files & folders inside the /wp-content/themes/innovation/ folder you created previously:

  • /inc/
    • /cache/
  • header.php
  • footer.php
  • sidebar.php

Also save this TimThumb PHP Image Resizer script as thumb.php inside the /inc/ folder. TimThumb is a 'smart' PHP image resizer script by Darren Hoyt.

Outline

Below is an overview of what our frontpage will look like:


Our header.php file will contain the #head and #nav sections - including the opening tags for #wrap, #content and .contentwrap.

footer.php will then contain the #footer section, and the closing tags for #content and the last section above it (this could either be .contentwrap, .extraswrap or #sidebar depending on the page).

The .contentwrap area will hold the two latest posts from our Portfolio category, and .extraswrap will be a widget-ready area where we can place widgets from the Dashboard.


Header.php

At the top of the header.php file, include the following code.

 
 
> 
 
 
 
<?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?>

As you can see, this is mainly the code you would include at the top of any xHTML Strict document, only we have replaced some sections with a WordPress function which will output the appropriate code depending on the language WordPress is running

At the end of the code is our title tag which, again, is using WordPress functions to get the name of the current page, and the name of the site.

Colour Schemes & Stylesheets

Next, we include our style.css file using the WordPress bloginfo(); function. It is important to use this function to include the main stylesheet, as opposed to directly entering the file path.

 

Then is the code for grabbing the correct colour-scheme stylesheet selected from the Options we created in the previous part:

 
 
		 
		 
	

The chart below explains what the above code does:


We check whether our colour scheme option ($ts_colourscheme) exists from the options page, and that it was set correctly (ie. not left as "Choose a colour scheme:"). If the option isn't set correctly or doesn't exist, it will default to using the deepblue.css colour scheme; otherwise we use the stylesheet that the was selected from the options page.

Continuing on, we include our RSS & Atom feeds, and open the body tag:

 
 
 
 
 
 

#head


The next code is a lot more straight-foward than the previous section. As shown in the image above, we will be using more WordPress functions to retrieve information from the WordPress database:

 

The bloginfo('name'); and bloginfo('description'); functions retrieve the relevant settings from the 'General Settings' page in the WordPress dashboard:


#nav


Retrieving a list of pages from the database is also very easy. We use the wp_list_pages(); function. Note that we also include a title_li= arguement. This is to stop the function from creating an extra list item called 'Navigation:' before listing the pages.

 
 
 

We've also opened the relevant div's and wrappers for the next section.


Styling the Header

If you goto your WordPress install now, it will look something like this:


Remember we will include any colour styles inside deepblue.css so that we can easily create different colour schemes later. Everything else will go in style.css.

General Styles

The first thing I always include in my stylesheet is a browser reset, followed by some basic styling for paragraphs, lists, headers and links.

 
*{padding:0;margin:0;} 
 
body { 
	font-family: Arial, Helvetica, sans-serif; 
	} 
	 
p { 
	font-size: 0.9em; 
	line-height: 1.5em; 
	margin-bottom: 10px; 
	} 
	 
ul, ol { 
	margin: 0 0 10px 10px; 
	} 
	 
li { 
	font-size: 0.9em; 
	line-height: 1.5em; 
	list-style-position: inside; 
	margin-bottom: 3px; 
	} 
	 
img { 
	border: none; 
	} 
	 
h1, h2, h3, h4, h5, h6 { 
	font-weight: normal; 
	} 
	 
h3, h4 { 
	margin: 15px 0 2px 0; 
	} 
	 
h4, h5, h6 { 
	font-weight: bold; 
	} 
	 
a:link, a:visited { 
	text-decoration: none; 
	} 
	 
a:hover, a:active, a:focus { 
	text-decoration: underline; 
	outline: none; 
	}

This should look very straight forward for anyone with basic understanding of HTML and CSS. We have set the margins and padding for all (*) elements to 0 to over-ride the default styles each browser applies to a page. We then include new margins, font-sizes and line-heights for the main elements to increase readability amongst them.

Header Styling

Next, we create a bit of a layout:

#wrap { 
	margin: 0 auto; 
	width: 980px; 
	} 
	 
#head { 
	margin: 25px 0; 
	overflow: hidden; 
	} 
	 
#head h1 { 
	float: left; 
	margin-left: 20px; 
	} 
	 
#head h3 { 
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-size: 0.8em; 
	font-style: italic; 
	float: right; 
	line-height: 1.7em; 
	text-align: right; 
	margin: 0 20px 0 0; 
	width: 500px; 
	}

The #wrap element is the container which holds everything. We are using a width of 980px (this is about as high as we can go while still accomodating for 1024x768 resolutions). And we have used margin: 0 auto; to center it in the browser.

The title and taglines (h1 and h3 respectively) are then floated to either side of the container.

#head has a property of overflow: hidden; so that it will hold the floated elements correctly. Typically, a div will not wrap around any floated children (as we have here). See the image below as an example (the yellow represents the margin assigned to #head):


Navigation Styling

 
#nav { 
	border-top-left-radius: 15px; 
	border-top-right-radius: 15px; 
	-moz-border-radius-topleft: 15px; 
	-moz-border-radius-topright: 15px; 
	-webkit-border-top-left-radius: 15px; 
	-webkit-border-top-right-radius: 15px; 
	border-bottom: none; 
	clear: both; 
	padding: 0 20px; 
	width: 939px; 
	}

Take a look at the preview images at the top of the tutorial, and you'll notice we are using rounded corners at the top of the navigation section. Instead of achieving this effect through a bunch of images and extra HTML tags, we're going to use the new CSS3 border-radius property to give a 15px radius to both the top corners.

However, current browsers do not yet support this property, but Mozilla and Webkit-based browsers have their own -moz-border-radius and -webkit-border-radius properties which we can also use to get the rounded corners to work in Firefox 3, Safari and Chrome. Internet Explorer and Opera will simply use a squared border until a they support border-radius.

Note: Using these vendor-specific properties in your CSS will stop your stylesheet from validating. But since it will only be these which are stopping the validation - who cares?

Continuing on, we style the list items in the navigation to display inline (horizontally):

 
#nav ul { 
	margin: 0; 
	} 
 
#nav ul li { 
	display: inline; 
	font-size: 1em; 
	line-height: 1.3em; 
	margin-right: 25px; 
	} 
	 
#nav ul li a:link, #nav ul li a:visited { 
	display: -moz-inline-stack; 
	display: inline-block; 
	font-weight: bold; 
	text-decoration: none; 
	padding: 20px 10px; 
	} 
	 
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { 
	outline: none; 
	}

Note that we are using display: -moz-inline-stack; on the links. This is purely for Firefox 2 and below, which (for some reason) do not support display: inline-block; - even IE6 supports it!

We are giving a lot of padding to the links to increase the clickable area (as opposed to padding the li instead).

Now have a look at the page in your browser and it should look like this. Better, but now needs some colour!


Some Colour

Firstly, save the following image into the /styles/deepblue/ folder as bg.jpg.


And this image into the same folder as trans.png (it's actually a dark 1px semi-transparent image).


Now, open /styles/deepblue.css, and type:

 
/* Innovation default style - deepblue.css */ 
 
body { 
	background: url("deepblue/bg.jpg") no-repeat #101010 top center fixed; 
	color: #333; 
	} 
	 
a:link, a:visited { 
	color: #5c6e80; 
	} 
 
#head h1 { 
	color: #eee; 
	} 
	 
#head h3 { 
	color: #ddd; 
	} 
	 
#nav { 
	background: url("deepblue/trans.png") repeat; 
	border: 1px solid #111; 
	} 
	 
#nav ul li a:link, #nav ul li a:visited { 
	color: #ddd; 
	} 
	 
#nav ul li.current_page_item a:link, #nav ul li.current_page_item a:visited { 
	background: url("deepblue/trans.png") repeat; 
	color: #eee; 
	} 
	 
#nav ul li a:hover, #nav ul li a:active, #nav ul li a:focus { 
	color: #eee; 
	}

We have set the large background image to the body (and fixed it so that it doesn't move when you scroll), the transparent image is used as a background for the navigation, and we also set some font colours.

Preview it, and you'll now have something like:



Portfolio Posts

Before creating the top of our homepage where our two latest Portfolio items go, we'll need a few posts to test with. The theme will be using a few 'Custom Fields' to display extra information for the portfolio items:

  • date (the date the work was completed)
  • client (who the work was for)
  • link (to a live version of your work)
  • preview (URL of a 930px width image of your work)
  • preview-full (larger version of the work, will display in a lightbox)

Create a new blog post, with the Title being the name of the project (as in the image above), and enter some content about the work. Put the post in your 'Portfolio' category.

Before saving the post, scroll down to the 'Custom Fields' section:


Here, enter each of the Custom Fields provided above. Only the preview field is required. You can use the following images for your preview field if you do not yet have one of your own (right-click and save):


Once you have filled in the fields, you may Publish the post. Repeat this process until you have at least two posts (preferably more).



The Homepage

Now we have all the prerequisites done, we can finally code the main part of the homepage. In page-home.php, type the following:

 

Latest Projects

query_posts(); is a WordPress function for getting specific posts from the database. As you can see in the arguements for the function (the parts in the brackets), we are telling WordPress to only get 2 posts from the Portfolio category ($ts_portfolio_cat is getting the information from the options page we created).

With while();, we have started the 'WordPress Loop'. In here we can get tell WordPress which part from each post we need.

 
$counter++; 
$preview = get_post_meta($post->ID, 'preview',true); 
$date = get_post_meta($post->ID, 'date',true); 
?>

On the first line, we have added one to the counter (we will be using this shortly). $counter++; is short-hand for writing $counter = $counter + 1;

We then use the get_post_meta(); functions to get our 'preview' and 'date' custom fields from the post - which are placed into the $preview and $date variables respectively.

 
">

Above we have created a div with a work class for the portfolio item to be held in. But notice that we are also checking that if our $counter equals 2 (meaning this is the second portfolio item), we add another class to the div named last. This class will come in handy when we style this section.

Next, we output the preview image:

 

If a preview image exists, then we...

 
 
	<?php the_title(); ?> 
 

The the_permalink(); function is used to output the link to the current post.

Then, we output the preview image. But we are also running it through the TimThumb resizer in order to resize the image to 450px in width and 210px in height (from the 930px image it actually is). Note how we use bloginfo('template_directory'); to ensure WordPress is checking in our theme folder (it's an equivilant of the TEMPLATEPATH we used in the previous part in the series).

We now just need to output the line of text which goes below the image (the title, and the date):

 

($date)"; } ?>

This is relatively straight-forward. We use the_permalink(); again to get the link for the current post. the_title(); is used to get the current post's title.

We then check whether a 'date' custom-field was entered (in the $date variable) for this post. If so, we output it.