Time To Make Some Magic Happen

Continuing where we left of in part 2 of OOPost Types where we finished building a Php class for setting up methods that our Sites custom post type will use, we now need to put all that code to use.

If you haven't yet read either one of the previous tutorials, you may want to go back and do that before you continue. You will learn how to create the class and functions which are used in this part.

• OOPost Types: Classes Part 1 - Object Oriented WordPress 3.0 App
• OOPost Types: Methods Part 2 - Object Oriented WordPress 3.0 App

This part of the OOPost Types series will go over how to make use of the custom post type WordPress class created in the previous posts, to easily display the Sites post content on a custom page template. That means we will be instantiating the class to create an new object of it.

I've added a method to the class finished in part 2 that is what our object for showing the sites url and screenshot. If you haven't already, add this function below the meta_options() function at the bottom of the post type class.

    public function mshot($mshotsize) {
        global $post;
        $imgWidth = $mshotsize;
        $myurl = get_post_meta($post->ID, 'siteurl', true);
		if ( $myurl != '' ) {
			$mshoturl = '';
			if ( preg_match( "/http(s?):\/\//", $myurl )) {
				$siteurl = get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode( $myurl );
			} else {
				$siteurl = 'http://' . get_post_meta( $post->ID, 'siteurl', true );
				$mshoturl = 'http://s.wordpress.com/mshots/v1/' . urlencode('http://'.$myurl );
			}
		}
        $mshotimg = '<img src="'.$mshoturl.'?w='.$imgWidth.'" alt="'.get_the_title().'" title="'.get_the_title().'" />';

        return array( $siteurl, $mshotimg );
	}

This returns an array consisting of the site url which was entered for each site, and the output of the screenshot image that is created with the use of that url.

Creating Custom Page Template

In order to display the content of our Sites post type, we need to either create a custom query to be used in the default WordPress theme templates, or better yet, create new custom WordPress page templates. To learn the best and most stress free way to create new custom templates you should read a previous post I wrote on making custom WordPress page templates.

The format mentioned in that post to create new page templates using page-[slug].php, so what we need to do for displaying the list of submitted Sites is create a new file named page-sites.php.

In order to display the information of the Site posts, we need to make a custom query which we pass to the Loop.

First create your page-sites.php template. You can copy and paste the code from page.php or index.php into this new file and remove the IF statement that loops through the posts. It should be something like if( have_posts()) : while( have_posts()) : the_post();

<?php get_header(); ?>

<div id="content" class="inner clearfix">
	<div class="post" role="main">

	<?php // Do stuff ?>

	</div><!-- end .post -->
</div><!-- end #content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Custom Post Type Queries For The Loop

Below is the loop which will display the sites. It first checks to see if were on the right page, and then if so it runs the code. We create an object of the class we made to display the screenshot image of the sites, which is done just with the use of the site url entered when posting. The custom loop query will be done by using WP_Query() to query the post_type.

I've commented the code for further explanation. Pay specific attention to the part that instantiates the custom post type class that was made in the previous posts. The $s = new TypeSites(); and $a = $s->mshot(250); are important for showing the submitted site information.

<?php
	$q = new WP_query();
	$q->query( 'post_type=site' );

	/* Begin the Loop */
	if ($q->have_posts()) :
		while ($q->have_posts()) : $q->the_post();

			/**
			 * Now instantiate the Sites class we made in posttypes.php setting the $s variable
			 * Create a new variable $a set to the value of the mshot(250) function from the class.
			 */
			$s = new TypeSites();
			$a = $s->mshot(250);

			/**
			 * Output the content of the Site posts
			 */
			?>

			<div id="site-<?php the_ID(); ?>" class="sites clearfix user_id_<?php the_author_ID(); ?>">
				<div class="site-thumbnail">
					<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
						<?php
						/**
						 * Here we echo out the value of the $a which is an array.
						 * The [1] will retreive the 2nd value of mshot() which returns the
						 * site thumbnai image which is generated by the Url entered in the post.
						 */
						 echo $a[1];
						 ?>
					</a>
				</div>

				<h2 class="site-title"><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
				<div class="meta">
					<?php __( 'Added by: '. the_author_posts_link() .' on '. the_time( "F j" ) .' | '. comments_popup_link( __( "0 Comments" ), __( "1 Comment" ), __( "% Comments" ) ); ?>
				</div>

				<div class="entry">
					<?php the_content( __( '(More ...)' )); ?>
				</div>
				<div class="fl post-tags"><?php the_tags( __( ' ' ), ' , ', ' ' ); ?></div>
				<div class="fr edit-link"><?php edit_post_link( __( 'Edit' ) ); ?></div>
			</div>

		<?php endwhile; ?>

		<?php if( function_exists( 'wp_pagenavi' )) { wp_pagenavi(); } else { ?>
			<div class="navigation clearfix">
				<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries'); ?></div>
				<div class="alignright"><?php previous_posts_link('Next Entries &raquo;'); ?></div>
			</div>
		<?php } ?>

<?php endif; ?>

Make A Custom Single Template

We also need to create a new custom single post template which is what will display the single posts for the Sites. So also create a new file named single-site.php. You might remember the reference to single-site.php was made in the template redirect function we made in the class. If you neglected to create this single template, then later down the line you might find yourself getting a Php error saying that it does not exist.

So create another new file named single-site.php and use this code for the Loop.

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php $s = new TypeSites();
	$a = $s->mshot(600);
	?>

	<div id="site-<?php the_ID(); ?>" class="user_id_<?php the_author_ID(); ?>">
		<h2 class="post-title"><a href="<?php echo $a[0]; ?>"><?php the_title(); ?></a></h2>
		<div class="meta">
			Added by: <?php the_author_posts_link(); ?> on <?php the_time("F j"); ?> |
			<?php comments_popup_link( __( '0 Comments' ), __( '1 Comment' ), __( '% Comments' )); ?>
		</div>

		<div class="entry">
			<?php the_content( __( '(More ...)' )); ?>
			<div class="fl post-tags"><?php the_tags( __( ' ' ), ' , ', ' ' ); ?></div>
			<div class="fr edit-link"><?php edit_post_link( __( 'Edit' ) ); ?></div>
			<div class="site-bigthumb" align="center">
				<a href="<?php echo $a[0]; ?>" title="<?php the_title(); ?>">
					<?php echo $a[1]; ?>
				</a>
			</div>
		</div>
	</div>

	<?php endwhile; ?>
	<?php endif; ?>

This is all you need to display your custom post types in WordPress. This is more specifically used for the particular post type we've set up using the class, but you can use this same idea to display custom post types that are not created using a class as well.

Full page-sites.php Code

<?php get_header(); ?>

<div id="content" class="inner clearfix">
	<div class="post" role="main">

	$q = new WP_query();
	$q->query( 'post_type=site' );

	/* Begin the Loop */
	if ($q->have_posts()) :
		while ($q->have_posts()) : $q->the_post();

			/**
			 * Now instantiate the Sites class we made in posttypes.php setting the $s variable
			 * Create a new variable $a set to the value of the mshot(250) function from the class.
			 */
			$s = new TypeSites();
			$a = $s->mshot(250);

			/**
			 * Output the content of the Site posts
			 */
			?>

			<div id="site-<?php the_ID(); ?>" class="sites clearfix user_id_<?php the_author_ID(); ?>">
				<div class="site-thumbnail">
					<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
						<?php
						/**
						 * Here we echo out the value of the $a which is an array.
						 * The [1] will retreive the 2nd value of mshot() which returns the
						 * site thumbnai image which is generated by the Url entered in the post.
						 */
						 echo $a[1];
						 ?>
					</a>
				</div>

				<h2 class="site-title"><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>
				<div class="meta">
					<?php __( 'Added by: '. the_author_posts_link() .' on '. the_time( "F j" ) .' | '. comments_popup_link( __( "0 Comments" ), __( "1 Comment" ), __( "% Comments" ) ); ?>
				</div>

				<div class="entry">
					<?php the_content( __( '(More ...)' )); ?>
				</div>
				<div class="fl post-tags"><?php the_tags( __( ' ' ), ' , ', ' ' ); ?></div>
				<div class="fr edit-link"><?php edit_post_link( __( 'Edit' ) ); ?></div>
			</div>

		<?php endwhile; ?>

		<?php if( function_exists( 'wp_pagenavi' )) { wp_pagenavi(); } else { ?>
			<div class="navigation clearfix">
				<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries'); ?></div>
				<div class="alignright"><?php previous_posts_link('Next Entries &raquo;'); ?></div>
			</div>
		<?php } ?>

<?php endif; ?>

	</div><!-- end .post -->
</div><!-- end #content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Full single-site.php Code

<?php get_header(); ?>

<div id="content" class="inner clearfix">
	<div class="post" role="main">

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<?php $s = new TypeSites();
	$a = $s->mshot(600);
	?>

	<div id="site-<?php the_ID(); ?>" class="user_id_<?php the_author_ID(); ?>">
		<h2 class="post-title"><a href="<?php echo $a[0]; ?>"><?php the_title(); ?></a></h2>
		<div class="meta">
			Added by: <?php the_author_posts_link(); ?> on <?php the_time("F j"); ?> |
			<?php comments_popup_link( __( '0 Comments' ), __( '1 Comment' ), __( '% Comments' )); ?>
		</div>

		<div class="entry">
			<?php the_content( __( '(More ...)' )); ?>
			<div class="fl post-tags"><?php the_tags( __( ' ' ), ' , ', ' ' ); ?></div>
			<div class="fr edit-link"><?php edit_post_link( __( 'Edit' ) ); ?></div>
			<div class="site-bigthumb" align="center">
				<a href="<?php echo $a[0]; ?>" title="<?php the_title(); ?>">
					<?php echo $a[1]; ?>
				</a>
			</div>
		</div>
	</div>

	<?php endwhile; ?>
	<?php endif; ?>

	</div><!-- end .post -->
</div><!-- end #content -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

If you have any questions on this let me know in the comments below. Also, let me know if there are any errors in my code. I have tested this, and it does work for me but based on the last post there may be issues for other people that I was not aware of.