WordPress Templates - Media, Search & 404 Pages

I’m coming towards the close of my WordPress template journey with Zac Gordon over at Treehouse. I’ve written about many types of WordPress templates over the last few posts and today, I’m going to go over the ones that are left. The media, search and 404 page templates.

Media Page Templates

I have to admit, I don’t use media pages on any of my websites. What seemed like a good idea years ago has proven to be, well, not so much of a good idea. The reason goes like this – For every post or page you write in WordPress, the search engines count that page as one. For every image you place on a page and link that image to its own page, the search engines count those as individual pages as well. If you have one page with twenty images on it and link to every image using a media page template, you just created twenty one pages. If you don’t know how this can harm you, I encourage you to do a quick Google search for “Google Panda.” If that doesn’t steer you away from using media pages, I don’t know what will.

Be that as it may, and also considering that there are other uses for media pages in WordPress, I’ll cover how to go about setting up custom pages for either mime types or as a catch-all media page for all types of media.

Before we do anything else, let’s first take a look at the WordPress Hierarchy:

WordPress Attachment Hierarchy

As you can see from the above image, the catch-all template for media pages is the attachment.php, This is, of course, excluding the obvious index.php and single.php. If you choose to create a more customized template for your media pages, you can do so by modifying the file names to $mimetype_subtype.php, $subtype.php and $mimetype.php. If you’re wondering what mime types WordPress recognizes, you can check out this page for the allowed default mime types.

I’m going to give you a short example on what your template files might look like if you wanted to have custom pages for images and then custom pages for PNG images. Yes, you can filter down to sub-mime types. Again, you might have a very good reason for doing this, but I’m guessing these types of pages are rarely found.

If you’d like to have an attachment page that will be used for all images, then you would create a template file named image.php. Inside that image.php file, you might find some code that looks like this:

<html>
<head>
	<title>Image Template</title>
	<?php wp_head(); ?>
</head>
<body>	
	<p><a href="javascript:history.back()">&#8592; Back</a></p>
	<div>
	<h1>Image Template</h1>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>		
		<p>MIME Type: <?php echo get_post_mime_type(); ?></p>
		<p>File Name: image.php</p>
		<p><?php echo wp_get_attachment_image( $post->id, 'large' ); ?></p>
	
	<?php endwhile; endif; ?>
	</div>
</body>
</html>

For testing purposes, you can include the “get_post_mime_type()” function, that would display the specific mime type of the page you’re working on and to verify that it’s working correctly.

If you are including PNG files into your posts or pages and are linking to them, and aren’t using the image.php template, you can have WordPress fall back to use a more specific imagepng.php template file. Code inside that file might look like this:

<html>
<head>
	<title>PNG Template</title>
	<?php wp_head(); ?>
</head>
<body>		
	<p><a href="javascript:history.back()">&#8592; Back</a></p>
	<div>
	<h1>PNG Template</h1>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>		
		<p>MIME Type: <?php echo get_post_mime_type(); ?></p>
		<p>File Name: png.php</p>
		<p><?php echo wp_get_attachment_image( $post->id, 'large' ); ?></p>
	
	<?php endwhile; endif; ?>
	</div>
</body>
</html>

Which, as you can see, is very similar.

Now remember, you can set up a specific template for any of the allowed mime types or sub types. Most developers probably create either the attachment.php template or simple use the single.php template if they’re interested in having their media files link to their own pages.

Search Page Templates

I’m going to give you a big heads up on some good knowledge here in regards to search results pages in WordPress. Go ahead and block “/?s” path in your robots.txt file. You DO NOT want any search results pages crawled by search engines. Don’t fall for the, “Just use noindex on those pages…” nonsense that’s floating around on the internet these days. There is no reason why search engines should be crawling these pages and they should be stopped in their tracks. Don’t say I didn’t warn you. There are many a WordPress site out there right now not ranking as well as they should be due to this one area. Don’t become one of them.

Anyway, barring that, you still need to have a nice search results page for your site visitors. Let’s take a look at the WordPress hierarchy to see which template gets used in this case.

As you can see, it’s the search.php template that gets used for website search results. If you set one of those up, the code inside might look like this:

<?php get_header(); ?>
    <div class="container" role="main">
	    <div class="row">
	    	<div class="col-md-12">
			    <div class="page-header">	
			    	<h1><?php wp_title( '' ); ?></h1>
			    </div>
			    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>				    
			    	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>					
					<?php the_content(); ?>
				<?php endwhile; else: ?>
					<p>No results :(</p>
					<p><?php get_search_form(); ?></p>
				<?php endif; ?>
	    	</div>
	    </div>
    </div>
<?php get_footer(); ?>

Now, please be aware, if your website is on the smaller end, you probably don’t need to include a search field or search results page. But if you have a larger website, you would certainly benefit from one.

Also, if you aren’t aware how to include a search box on your WordPress site, you can either use the drag and drop search field widget or hard code the search function into your templates. The code to get the search form is this:

<?php get_search_form( $echo ); ?>

Also, if you are planning on creating a custom search form, please do some reading on the topic in the codex. You can find the appropriate page here.

404 Page Templates

WordPress 404 Page Template

If you’d like to include a custom 404 page for your site visitors to see when they land on a non-existent page, you would set one up using the 404.php template. This template can be as simple or complex as you would like. Some very basic code would look like this:

<?php get_header(); ?>
    <div class="container" role="main">
	    <div class="row">
	    	<div class="col-md-8">
			    <div class="page-header">	
			    	<h1><?php wp_title( '' ); ?></h1>
			    </div>
                <article>
			    <p>This is where your clever content would go.</p>
				</article>
	    	</div>
	    </div>
    </div>
<?php get_footer(); ?>

Please be aware though, you should, at the very least, have a search field that really stands out on your 404 page. If your site is small, at least have some sort or listings for your most popular pages. You want to offer the visitor something to click on if they don’t land on the page they expected to see.

Here we are, at the end of another WordPress template post. I hope you enjoyed what you read and if you have any questions or comments, please leave them in the comment section below. If you’d like to browse some other WordPress related posts, please check out my WordPress category above.