That's right, I'm not only releasing my new plugin to the wild, but I'm also going to teach you exactly HOW I CREATED IT. Be sure to check it out on Noobcube. I will begin writing the tutorial this week so keep an eye out!

Please take a minute to check it out and don't forget to SUBSCRIBE to our feed so you never miss out on our articles!

Our first two tutorials cover some CSS techniques which are described below. Hope to see you on Noobcube soon!

1. CSS Background Image Sprites: A Beginner’s Guide

Without regurgitating too much history behind image sprites and how and why we should use them, we’re going to create something practical that you can implement into your projects immediately. There are several resources and tutorials already covering what image sprites are and even how we should use them. Just google “CSS Image Sprites” and you’ll return more than 2000 results. We’re going to skip the history lesson and get you started using CSS image sprites today.

VISIT THIS TUTORIAL

2. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, we’ll be creating an advanced CSS navigation menu using its :hover and position properties.

VISIT THIS TUTORIAL

2. Create an Advanced CSS Menu Using the Hover and Position Properties

I’ve created 10 seamless stripes for you to go tiling crazy with. All the patterns are semi-transparent with different grunge textures. You can easily modify the colors and feel to fit your needs by opening the PSDs that are included.

VISIT THIS FREEBIE

When I was trying to figure out what and how I was going to accomplish this, I asked several questions:

1. How can I create an archive index of all my posts?
2. How can I add a drop down list of archive dates?
3. How can I add a drop down list of categories?
4. How can I add pagination to the archives?

After several hours of google, Wordpress forums, and trial and error I was able to hack this all together. I've tested this in Firefox, IE7, IE6, Safari, and Opera and it works fine in all of them. As I implied, I hacked this code together, so I'm sure there is a cleaner way to do it. Unfortunately, I'm not fluent enough in PHP to create it, however, if anyone finds a more efficient, cleaner, or better way to accomplish this - please let me know, and I'll give credit where credit's due. Alright, Let's get started!

In order for you to achieve the same exact results as mine, in addition to my source code, you'll need the following Wordpress plugins:

1. WP Page Numbers
2. Different Posts Per Page

The first plugin is an alternative to WP-PageNavi, which allows for pagination of the archives. Otherwise you can just utilize the Wordpress default posts_nav_link();. The second plugin will allow you to modify the number of posts shown on the home, category, archive or search pages.

Once you get the plugins installed, we'll start with the archive.php file.

Create archive.php File

First thing we're going to do is create our archive.php file. This is the file Wordpress accesses when a user clicks on a Category or a Date in the archive list (assuming you have it on your sidebar). We want our archive.php and archives.php template to be identical so let's use the following code:

<?php get_header(); ?>
 
<h3>Archives:</h3>
<h1><?php wp_title('',true,'right'); ?></h1>
 
<!-- Put Archive Dates in a Drop Down -->
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo attribute_escape(__('Select Month')); ?></option> 
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>
 
<!-- Put Categories in a Drop Down -->
<?php wp_dropdown_categories('orderby=name&show_count=1&show_option_none=Select Category'); ?>
<script type="text/javascript">
  var dropdown = document.getElementById("cat");
  function onCatChange() {
	if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
		location.href = 
		"<?php echo get_option('home');?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
	}
    }
    dropdown.onchange = onCatChange;
</script>
 
<!-- Put A Link To Archive Index Page -->
<a class="browse-all" href="<?php $_SERVER['DOCUMENT_ROOT']?>/demos/index">Browse All</a>
 
<!-- The Loop -->
<?php if (have_posts()) : ?>
	<ul id="archive-list">		
	<?php while (have_posts()) : the_post(); ?>				
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <span><?php the_time(' F j, Y') ?></span></li>
	<?php endwhile; ?>
	</ul>	
<?php endif; ?>		
 
<!-- Call For wp_page_numbers Plugin -->
<?php if(function_exists('wp_page_numbers')) { wp_page_numbers(); } ?>
 
<?php get_footer(); ?>

First thing we did, of course, is included your theme's header with the Wordpress function get_header(); . We also used the Wordpress function wp_title(); to apply the title of the archive being viewed to each page.

We put our archive dates in a drop down by using code provided by the Wordpress Codex. We also put our categories in a drop down using the Wordpress function wp_dropdown_categories();, you can read more about this here.

We also included a link back to the Archive Index page, which we'll be creating next. Be sure to change the URL to work for you.

We finish off with the standard Wordpress Loop, the call for the WP Page Numbers plugin, and the Wordpress function get_footer();.

Now that we have our archive.php finished, we need to upload it to our root and create the index page!

Create the Archive Index Template

What we're going to be doing is creating a blank page on our blog and applying the template we're about to create to it. So for our example, we'll be able to access your Archive Index with http://pathtoyourblog/index assuming you title your page Index.

Let's start by creating the template now. If you still have your archive.php file open, go ahead and Save As archives.php. Now you should have 2 files - archive.php and archives.php with the same code on them both. We're going to add a couple changes to the archives.php next.

As I said earlier, we want our archive.php and archives.php pages to look the same so there are only a couple differences in the code. First thing we need to do is define archives.php as a template so it will be recognized as one by Wordpress. So paste the following code at the very top of the file.

<?php
/*
Template Name: Archive Index
*/
?>

Much like our style sheet in our theme, this is required in order for for our file to be recognized as a template. Also, you won't need the link to the Archive Index, so remove:

<!-- Put A Link To Archive Index Page -->
<a class="browse-all" href="<?php $_SERVER['DOCUMENT_ROOT']?>/demos/index">Browse All</a>

Because this is going to be an archive index we want to be able to choose how many results to display on each page of the index. In your Wordpress admin you can choose how many posts you'd like to appear on your page, however without a plugin, you're stuck with that number on all your pages. So, if you wanted your blog's homepage to show your last 5 posts, you'd be stuck with your Archives page only showing 5 posts as well. What kind of archive index would that be?

Good news is, the Different Posts Per Page plugin allows for you to set the number of posts per page seperately on your home, category, archive and search pages. So you can have your homepage show the 5 most recent blog posts, while your category page and archives show 20 posts per page. Unfortunately, on our index page we'll need to implement it manually on our archives.php template. Paste the following code right before the loop.

<!--Change The Amount of Results You Wish To Display Per Page-->
<?php 
$offset = "0";
$no_of_posts = "15"; //Number of posts to display on each page
if (preg_match('/page/', $_SERVER['REQUEST_URI'])) {
	$uri = explode('/', $_SERVER['REQUEST_URI']);
	foreach ($uri as $key=>$value) {
		if ($value == "") {
		unset($uri[$key]);
		}
	}
	$offset = (array_pop($uri) * 15) - 15; //Both These Numbers Should Match the $no_of_posts 
}
query_posts('posts_per_page=' . $no_of_posts . '&offset=' . $offset); ?>

For this demo, I set the number of posts per page to 15. In the admin of my blog, I also set the Category and Archive number to 15. In order for you to be able to do that, you'll need to download, install, and activate the Different Posts Per Page plugin.

Save and upload archives.php to the root of your theme.

Log into your Wordpress dashboard, and create a new page (not post), and title it (I titled it Index). On the right side of the sidebar you should see an option to apply your template to the page. Choose Archive Index and click Publish.

If you view your archives right now, it will be functioning, but it won't be pretty. You can style this to your liking but I'll provide you with my styles from the demo to start you off.

 
h1 {
	font: 3.0em Georgia, "Times New Roman", Times, serif;
	color: #FFF;
}
 
h3 {
	font: bold 1.0em Arial, Helvetica, sans-serif;
	color: #727271;
	text-transform: uppercase;
}
 
select {
	margin: 10px 10px 5px 0;
}
 
a.browse-all {
	color: #FFF;
}
 
ul#archive-list {
	list-style: none;
	width: 600px;
	margin: 5px 0;
}
 
ul#archive-list li{
	position: relative;
}
 
* html ul#archive-list li{  /*We All Love IE6*/
	height: 0px;
	margin-top: -2px;
}
 
ul#archive-list li a{
	text-decoration: none;
	display: block;
	width: 100%;
	border-bottom: 1px solid #2b2b2b;
	color: #727271;
	padding: 5px 0;
	font-size: 1.0em;	
}
 
ul#archive-list li a:hover{
	background-color: #282425;
	color: #FFF;
}
 
ul#archive-list li span{
	position: absolute;
	width: auto;
	right: 0px;
	top: 5px;
	text-align: right;
	color: #a82918;
}

There you have it, my Ultimate Archive Index With Pagination! Like I said, there may be a more efficient way to do this, but I've yet to find it. If you have a better way of achieving the same results, please share.

I'll be sure to update this as I find newer and cooler options to add to it. I hope you enjoy it! Thanks again for reading.

Preview

In my attempts to figure out how wordpress bloggers were linking their post image directly to the post, and not to the image itself, I googled this simple question:

1. How can I link my Wordpress post image to the permalink of the post?

When I finally figured out what the custom fields were used for, it was an "Ah Hah!" moment. I can use a custom field for my post image! Doing this will not only allow me to link the post image to the full article but it will also give me full control over the image placement.

HTML:

<div id="container">
	<h1>Recent Articles</h1>
	<div class="post-wrapper">
		<a href="#" rel="bookmark" title="Blog Post"><img class="post-image" src="http://www.jarodtaylor.com/blog/wp-content/uploads/posts/images/psresources.jpg" alt="Photoshop Resources" /></a>
		<div class="post">
			<h2><a href="#" title="Blog Post">10 Grunge Brushes For Photoshop</a></h2>
			<div class="post-meta">
				January 6th, 2009&nbsp;|&nbsp;
				Photoshop, Resources
				&nbsp;|&nbsp; 12 Comments
			</div>
 
			<div class="post-content">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas posuere. Sed tellus mi, imperdiet ac, molestie vel, gravida quis, mauris. Praesent consequat enim ac nisi. Sed non libero sit amet orci tincidunt tempus. Mauris bibendum, felis non tristique egestas, elit dui ultrices mi, sed facilisis libero pede vitae risus. Sed nec dui. Fusce mollis. Nunc id libero. Mauris massa. Duis vitae lorem. Nulla elementum tellus ac ipsum. </p>
			</div>								
		</div>		
	</div>	
</div>

I created a container for aesthetic reasons, you may or may not include it. The important markup here is the html between the post-wrapper div.

We gave our image a class of post-image so we can float it to the left. We also wrapped the rest of the post content in a class of post, and added classes accordingly to the post meta and post content. Now that we have the divs and classes in place, let's add some CSS.

CSS:

* {
margin: 0;
padding: 0;
}
 
body {
background-color: #cae0dd;
font: 62.5% Georgia, "Times New Roman", Times, serif;
}
 
.clear {
clear: both;
}
 
p {
line-height: 1.4em;
}
 
h1 {
font: bold 3.5em Georgia, "Times New Roman", Times, serif;
color: #879896;
margin-bottom: 10px; 
}
 
h2 {
font: bold 2em Arial, Helvetica, sans-serif;
}
 
h2 a {
color: #524537;
text-decoration: none;
}
 
#container {
width: 800px;
margin: 2% auto;
}
 
.post-wrapper {
width: 600px;
font-size: 1.2em;
border-bottom: 1px dotted #75b6bb;
padding-bottom: 20px;
margin: 15px 0 7px;
}
 
a .post-image {
float: left;
margin-right: 7px;
border: 3px solid #75b6bb;
}
 
.post-meta {
color: #8f7962;
margin: 2px 0;
}

First thing we are doing is adding some generic styles for margins, fonts, etc. to help make the example look prettier. Then we added some styles to the post-wrapper to give it a width, a border, some padding and margins, and a starting font size. We then added a border to the post-image, gave it a right margin to give it some breathing room, and floated it left. Finally we added some style to the post meta just to add a little more color.

Now you should have something that looks similar to this. I duplicated our post-wrapper and its content a few times to give us an idea what it would look like with multiple posts.

Adding The PHP & Wordpress Functions

I'm sure a lot of you are sitting there right now thinking, "Seriously, Jarod get on with it. I don't care about how to style a post!" and I'm sorry, we're getting to it now! Let's get this ready for some dynamic content.

What we have to do now is replace some html with the wordpress functions calling for your post content. Again, chances are, you've already done this.

<div id="container">
	<h1>Recent Articles</h1>
	<div class="post-wrapper">
		<a href="#" rel="bookmark" title="Blog Post"><img class="post-image" src="http://www.jarodtaylor.com/blog/wp-content/uploads/posts/images/psresources.jpg" alt="Photoshop Resources" /></a>
		<div class="post">
			<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
			<div class="post-meta">
				<?php the_time(' F j, Y') ?>&nbsp;|&nbsp;
				<?php _e(''); ?> <?php the_category(', ') ?>
				&nbsp;|&nbsp; <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
			</div>
 
			<div class="post-content">
				<?php the_excerpt(); ?>
			</div>								
		</div>		
	</div>		
</div>

If you are having trouble understanding anything we just did, I recommend visiting this tutorial for a better understanding of the "loop".

For those of you who understand exactly what we just did, you'll be wondering, "What the heck do we do with the image, though?".

Adding A Post Image To The Loop

The way we have our post-image currently set up certainly wouldn't work. We'd end up having the same image on every article we posted. Now, normally we could just add the image directly to our post, which would put our post-image after the post's title and post-meta, and somewhere, most likely, before the post content. This works perfectly fine in most cases, but in our case, we're floating our image to the left of all our content including the post's title and post-meta. We could achieve this with CSS, but it would most likely be fragile with some browsers. Instead we're going to create a custom field in our wordpress.

When you're logged in to your wordpress and writing your post, you'll notice an option towards the bottom that says Custom Fields.

This is where we'll be adding our post-image's URL and Alt attribute. In the Name field we need to enter the custom field's name. I'm using image-url. In the Value field we'll put the URL of the image we're using as our post image. In this case I'm using http://www.jarodtaylor.com/blog/wp-content/uploads/posts/images/psresources.jpg.

Now we have our Name(key) and Value of our custom field. What we need to do now is replace some html in our post-image with some wordpress functions, and our new key value pair.

Replace:
<a href="#" rel="bookmark" title="Blog Post"><img class="post-image" src="http://www.jarodtaylor.com/blog/wp-content/uploads/images/psresources.jpg" alt="Photoshop Resources" /></a>
 
With:
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="post-image" src="<?php $key="image-url"; echo get_post_meta($post->ID, $key, true); ?>" /></a>

First of all, what we did is take our post image out of our post content by creating a custom field, which allowed for us to not only position it where we wanted it, but also gave us an opportunity to add wordpress's the_permalink() function to the anchor of our image. Secondly, we added our custom field to our image src="" by calling for the get_post_meta() function which held our custom field's key value pair.

The only thing our image is missing is our alt="" attribute. As we all know, without this we'll fail W3C Validation. We can't have that! So we're going to add another custom field for our alt attribute. You can obviously use whatever you'd like, but I used image-alt in the Name field and Photoshop Resources in the Value field.

Now we just need to add our new custom field to our post-image.

Our final code should look like this:

<div id="container">
	<h1>Recent Articles</h1>
	<div class="post-wrapper">
		<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img class="post-image" src="<?php $key="image-url"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="image-alt"; echo get_post_meta($post->ID, $key, true); ?>" /></a>
		<div class="post">
			<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
			<div class="post-meta">
				<?php the_time(' F j, Y') ?>&nbsp;|&nbsp;
				<?php _e(''); ?> <?php the_category(', ') ?>
				&nbsp;|&nbsp; <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
			</div>
 
			<div class="post-content">
				<?php the_excerpt(); ?>
			</div>								
		</div>		
	</div>		
</div>

That's it! So simple, yet so useful. If you really want to maximize usage of Wordpress, custom fields are something to consider. If you'd like to read up more on Custom Fields and the get_post_meta($post_id, $key, $single) function, you can do so here. Please let me know if you have any problems. Thanks for reading!

Since I began designing for the web, back in 'nam, and by "nam" I mean 2004, whether learning by trial and error, or through my instructors, I have found that there are always more ways than one to accomplish a task. You'll find numerous tutorials online covering the same idea or concept, and it's not always a question of which way is correct, or which technique is better. It's always a matter of preference and what works for you. I'll simply be sharing my own experiences, hoping to save you some time, and maybe even providing you with some helpful tips.

Some of my posts may make you say, "yeah, I knew that, duh!", while others may make you say, "hey, I never thought of that!". As I said, I'm not doing anything new, just doing it my way and sharing my experience with you. If you find an error in my post, or maybe have a more efficient way of achieving the same result, please let me know. I will give credit where credit is due.

I'm excited to begin my journey as a blogger, and I hope to help some of you along the way. Thanks for reading and feel free to subscribe to my RSS Feed or get Email Updates.