New terms from treehouse – The WordPress Template Hierarchy Part 2 – Archive Templates in WordPress, Custom Post Type Templates in WordPress, and Miscellaneous Templates in WordPress

Archive Templates in WordPress

Archive Templates in WordPress

One archive template can work for a range of different purposes, for blog posts archived by date, author, categories, etc. archive.php is the fallback template for all of these, but you can make custom ones for each type.

Screen Shot 2014-12-29 at 4.58.22 PM

Looking on the left, you can see they’re divided by author, category, custom post, custom taxonomy, date and tag. You have a main template for each (the ones in light blue), as well as more specific ones that use the slug or id method we saw before.


Date Archives

This uses the date.php file. If we look at our blog and are using the archives widget, we’ll see we can click on a certain month.

Screen Shot 2014-12-29 at 5.01.01 PM

The url ends with 201412, and if we remove the month it will show us everything for 2014. Looking at the template you can see that date.php is the main fallback, but we could make a template for year, month and day as well.

In the date.php file we can see a conditional that checks if it is_year, which means a year based archive, and acts accordingly adding the months if it is.

Screen Shot 2014-12-29 at 5.03.53 PM


Category Archives

Uses category.php, but can be more specific and use the slug/id naming method. You can manage your categories under posts > categories. We have the category widget on our blog page, so we’ll see that on the right. We can then make custom templates for each with a slug like category-travel.php or the category id like category-4.php. You can find the cat id by the url on the site, or by editing one.

Screen Shot 2014-12-29 at 5.08.28 PM

Screen Shot 2014-12-29 at 5.09.27 PM

Screen Shot 2014-12-29 at 5.12.25 PM

Note that for the styling, the body_class classes make this a lot easier. For the travel page, the category-travel class is what we’re using for our rules.

Screen Shot 2014-12-29 at 5.12.52 PM


Author Archives

If you click the author’s name on a blog post, it will take you to the author page for that person.

Screen Shot 2014-12-29 at 5.15.01 PM Screen Shot 2014-12-29 at 5.14.56 PM

You can add more users under Admin > Users > Add New. We’ll add one named editor with the Role editor.

In our author.php file we have some custom code to display the name, picture, etc of the author, then a loop to pull in their recent posts. Since this is an author.php page, WP knows to only display posts by that person.

Screen Shot 2014-12-29 at 5.17.54 PM

Now, you can also make a template based off the authors “nicename”, which is their username, or their author id. So, I could do one called author-kyle.php. So, you can make a custom template for each author if you wanted to do that for some reason.


Custom Post Type Templates in WordPress

An Important Review of Custom Post Type Setup

Quick Review:

You’ll need the plugins Custom Post Types UI. Install and activate, then add a new one for portfolio. Click Advanced Options. If you set Has Archive to true, it will automatically use the archive.php or archive-posttype.php page for its archive. If it’s set to false, you can still query out the data and make your own, but WP won’t automatically do it.

For the Rewrite option, this lets WP rewrite the URL’s for custom post types for the archives and permalinks. The Custom Rewrite Slug lets you change the main slug you set at the top to something else, like if you wanted to replace portfolio with work.

We can now add this to our menu by linking to it. The link should be yourdomain/portfolio. Note that you need to make sure you’ve set your permalinks to use the post name rather than the default setting, or this won’t work.

Screen Shot 2014-12-31 at 3.00.22 PMScreen Shot 2014-12-31 at 3.00.26 PM

If we were to edit the archive.php template, we could see the changes on this page now. However, we could get more specific and make a file archive-portfolio.php, and WP would use that template instead.


Custom Post Type Templates Continued

Sometimes if you change a template and refreshing the page doesn’t show the changes it may be a caching issue and you’ll need to either click around or do a hard refresh.

If when setting up our custom post type, if we had the Archive option set to false, we’d get a page not found if we tried to go to the portfolio archive.

Another option is to make your own custom page template, for example page-portfolio.php, where in the comments at the top you’d write its name. The template would contain a WP_Query loop where it would include posts that had the type portfolio. You’d then make a page named portfolio, and set it to that template.

Screen Shot 2014-12-31 at 3.13.34 PMScreen Shot 2014-12-31 at 3.15.05 PM

So, what happens if we have Archive set to true and make a custom page with a template? The custom page will take priority and will be the one displayed. Still, either approach works and it depends on your situation.

Looking at the hierarchy, when you have a single page, and it’s a custom post type you can control it with single-posttype.php, in this case single-portfolio.php. If you don’t have that file, it will default to the single.php template.

Note that there’s a broken link on the single-portfolio.php page for the header element, because it’s link to the page id. Change that to portfolio and it will work.

Screen Shot 2014-12-31 at 3.20.30 PMScreen Shot 2014-12-31 at 3.20.24 PM


Miscellaneous Templates in WordPress

Media Templates

When adding a media file, you’ll see a Link To option on the right, which lets you link directly to the file, and if someone clicks on it, it will take them to a page of just that photo. You can copy the link under it to see. The Attachment Page option lets us set up a special template so the image is displayed surrounding by other content. The Custom option lets you link to anything, and the none is no link.

Screen Shot 2014-12-31 at 3.26.22 PM

We’ll be using attachment page here. When clicked, it will take you to the template for that.

Screen Shot 2014-12-31 at 3.28.34 PM

In the hierarchy, these fall under Single page > Attachment post > mimetypes.

Screen Shot 2014-12-31 at 3.29.26 PM

Mime types are the different types of media files you’ll find on the web. WP has a function get_allowed_mime_types that will show you the ones you can use on your site. We can make templates based off of the mime types, like one for images, one for movies, etc. Note that when looking at the hierarchy, the mime type (like image.php) overrides the subtype (like png.php). If you don’t have any files for a specific mime type though, it will fall back to attachment.php.


Search Templates

The search.php template controls what our search page looks like. To add a search form, you can either add one as a widget, or use the function get_search_form, which displays a search form for you. It does this by loading the the file searchform.php in your template folder. If you don’t have that file, WP will use the default search form.

If you use the search, it will take you to the results page based on the search.php template, and the url will have a query string ?s=yoursearchterm. WP will know what to link to if you use the_permalink as your link.

Screen Shot 2014-12-31 at 3.40.49 PM

Note that you really should include an else block in your loop, for if there are no matching results. Here we give a message and a search form for them.

Screen Shot 2014-12-31 at 3.42.30 PM


404 Pages

The 404.php template displays if the page someone looking for is not found. You should display a message saying so. With 404 pages, you can either have it be entertaining/humorous, or, engaging, as in having it try to help them figure out what they may have done wrong, or list the most popular pages or give them a search bar.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s