How To Load A Template In Wordpress

25 min read
WordPress, Techniques (WP)

Quick summary ↬ I like to think of WordPress as the gateway drug of web development. Many people who get started using the platform are initially merely looking for a comfortable (and free) way to create a simple website. Some Googling and consultation of the WordPress Codex later, information technology's washed and that should be information technology. Kind of like "I'm merely going to effort it in one case.

I like to retrieve of WordPress as the gateway drug of web evolution. Many people who get started using the platform are initially merely looking for a comfortable (and complimentary) way to create a simple website, often with the aid of a WordPress page builder plugin. Kind of like "I'm merely going to effort it one time."

However, a good chunk of users don't finish there. Instead, they become hooked. Come up with more ideas. Experiment. Effort out new plugins. Discover Firebug. Blast. Soon at that place is no turning dorsum. Does that sound like your story? As a WordPress user information technology is only natural to desire more and more than control over your website. To require custom blueprint, custom functionality, custom everything.

Template Files In WordPress

What are we talking about when nosotros speak of templates in the context of WordPress? The brusque version is that templates are files which tell WordPress how to display different types of content.

The slightly longer version: every fourth dimension someone sends a request to view part of your website, the WordPress platform will figure out what content they desire to encounter and how that specific part of your website should be rendered.

For the latter, WordPress will attempt to use the most appropriate template file constitute within your theme. Which ane is decided on the ground of a set order, the WordPress template hierarchy. You lot can see what this looks like in the screenshot below or in this interactive version.

custom wordpress — The WordPress template hierarchy. (Epitome credit: WordPress Codex)(View big version)

The template hierarchy is a list of template files WordPress is familiar with that are ranked to decide which file takes precedence over some other.

You tin think of it as a decision tree. When WordPress tries to decide how to display a given page, it works its way down the template bureaucracy until it finds the first template file that fits the requested page. For instance, if somebody attempted to admission the address https://yoursite.com/category/news, WordPress would look for the correct template file in this guild:

category-{slug}.php: in this instance category-news.php
category-{id}.php>: if the category ID were 5, WordPress would effort to observe a file named category-five.php
category.php
annal.php
index.php

At the lesser of the hierarchy is index.php. It volition be used to brandish any content which does non have a more specific template file attached to its proper name. If a template file ranks higher in the hierarchy, WordPress will automatically apply that file in gild to display the content in question.

Page Templates And Their Apply

For pages, the standard template is usually the aptly named page.php. Unless there is a more specific template file bachelor (such as archive.php for an archive page), WordPress will use page.php to render the content of all pages on your website.

However, in many cases information technology might exist necessary to change the design, look, feel or functionality of individual parts of your website. This is where page templates come up into play. Customized page templates allow you lot to individualize any part of your WordPress site without affecting the rest of it.

You might have already seen this at work. For example, many WordPress themes today come with an choice to change your page to full width, add together a second sidebar or switch the sidebar'southward location. If that is the example for yours, it was probably done through template files. In that location are several ways to reach this and nosotros'll go over them afterwards.

Showtime, however, a word of caution: since working with templates involves editing and changing files in your agile theme, it's always a good idea to go with a child theme when making these kinds of customizations. That way you don't run the danger of having your changes overwritten when your parent theme gets updated.

How To Customize Whatsoever Page In WordPress

At that place are three basic ways to use custom page templates in WordPress: calculation provisional statements to an existing template; creating specific folio templates which rank higher in the hierarchy; and directly assigning templates to specific pages. We will accept a look at each of these in turn.

Using Conditional Tags In Default Templates

An easy mode to make page-specific changes is to add WordPress'south many provisional tags to a template already in employ. As the name suggests, these tags are used to create functions which are merely executed if a certain condition is met. In the context of page templates, this would be something along the line of "Just perform action X on page Y."

Typically, you would add conditional tags to your theme'due south page.php file (unless, of grade, you want to customize a unlike part of your website). They enable y'all to make changes limited to the homepage, forepart page, blog folio or whatsoever other page of your site.

Here are some frequently used provisional tags:

is_page(): to target a specific folio. Can be used with the page's ID, title, or URL/name.
is_home(): applies to the habitation page.
is_front_page(): targets the front page of your site every bit gear up nether Settings → Reading
is _category(): condition for a category page. Tin can use ID, championship or URL/proper noun similar is_page() tag.
is_single(): for unmarried posts or attachments
is_archive(): weather for annal pages
is_404(): applies only to 404 error pages

For instance, when added to your page.php in place of the standard get_header(); tag, the following lawmaking will load a custom header file named header-shop.php when displaying the folio https://yoursite.com/products.

          if ( is_page('products') ) {   get_header( 'shop' ); } else {   get_header(); }

A good use case for this would be if you have a shop on your site and you need to display a dissimilar header image or customized bill of fare on the shop page. You could and so add these customization in header-shop.php and information technology would testify up in the advisable place.

Notwithstanding, conditional tags are not limited to i page. Y'all can brand several statements in a row like so:

          if ( is_page('products') ) {   get_header( 'store' ); } elseif ( is_page( 42 ) ) {   get_header( 'virtually' ); } else {   get_header(); }

In this second example, two weather condition volition change the behavior of different pages on your site. As well loading the same shop-specific header file, it would now besides load a header-virtually.php on a page with the ID of 42. For all other pages the standard header file applies.

To learn more about the use of provisional tags, the following resources are highly recommended:

WordPress Codex: Provisional Tags
ThemeLab: The Ultimate Guide to WordPress Provisional Tags

Creating Folio-Specific Files In The WordPress Bureaucracy

Conditional tags are a great way to introduce smaller changes to your page templates. Of grade, you can also create larger customizations by using many conditional statements i after the other. I find this a very cumbersome solution, nevertheless, and would opt for designated template files instead.

1 way to practice this is to exploit the WordPress template hierarchy. As we have seen, the hierarchy will traverse a list of possible template files and choose the offset 1 it tin can find that fits. For pages, the bureaucracy looks like this:

Custom page template
page-{slug}.php
page-{id}.php
page.php
index.php

In first place are custom folio templates which accept been directly assigned to a item page. If one of those exists, WordPress will utilise it no matter which other template files are present. We will talk more than about custom page templates in a chip.

Afterward that, WordPress volition expect for a page template that includes the slug of the page in question. For example, if yous include a file named folio-about.php in your theme files, WordPress will use this file to display your 'Virtually' page or whichever folio can be constitute nether https://www.yoursite.com/well-nigh.

Alternatively, you tin achieve the same past targeting your page'due south ID. So if that same page has an ID of 5, WordPress volition use the template file page-v.php earlier page.php if information technology exists; that is, merely if there isn't a higher-ranking page template available.

(BTW, you can find out the ID for every page past hovering over its title nether 'All Pages' in your WordPress back-end. The ID will bear witness up in the link displayed by your browser.)

Assigning Custom Page Templates

As well providing templates in a class that WordPress will use automatically, it is besides possible to manually assign custom templates to specific pages. Equally you can see from the template bureaucracy, these will trump any other template file present in the theme binder.

Just like creating folio-specific templates for the WordPress hierarchy, this requires you lot to provide a template file and so link it to whichever page y'all want to employ it for. The latter tin can be done in two dissimilar ways you might already be familiar with. Only in case you lot aren't, here is how to practise information technology.

1. Assigning Custom Page Templates From The WordPress Editor

In the WordPress editor, yous find an option field called 'Folio Attributes' with a drib-down menu under 'Template'.

Page Attributes in the WordPress editor. (View large version)

Clicking on it volition give you a list of bachelor folio templates on your WordPress website. Choose the one you desire, save or update your folio and you are done.

Available templates under Page Attributes. (View large version)

2. Setting A Custom Template Via Quick Edit

The same can also exist achieved without entering the WordPress editor. Become to 'All Pages' and hover over any particular in the list there. A menu will become visible that includes the 'Quick Edit' particular.

Click on it to edit the page settings straight from the listing. Y'all will see the same driblet-downwardly menu for choosing a dissimilar page template. Pick ane, update the page and you are done.

Not so hard afterwards all, is it? But what if you don't accept a custom page template yet? How do yous create it so that your website looks exactly the way you want it? Don't worry, that'southward what the side by side part is all about.

A Footstep-By-Pace Guide To Creating Custom Page Templates

Putting together customized template files for your pages is not that hard merely here are a few details you have to pay attention to. Therefore, let'southward go over the process bit-by-bit.

1. Find The Default Template

A adept fashion is to first by copying the template which is currently used by the page you desire to modify. It's easier to modify existing code than to write an unabridged page from scratch. In most cases this volition be the folio.php file.

(If y'all don't know how to observe out which template file is being used on the page y'all want to edit, the plugin What The File will prove useful.)

I will be using the Twenty Twelve theme for demonstration. Here is what its standard page template looks like:

                      <?php /**  * The template for displaying all pages  *  * This is the template that displays all pages by default.  * Please note that this is the WordPress construct of pages  * and that other 'pages' on your WordPress site volition apply a  * different template.  *  * @package WordPress  * @subpackage Twenty_Twelve  * @since Twenty Twelve 1.0  */ get_header(); ?>    <div id="primary" form="site-content">     <div id="content" role="master">        <?php while ( have_posts() ) : the_post(); ?>         <?php get_template_part( 'content', 'folio' ); ?>         <?php comments_template( ', true ); ?>       <?php endwhile; // stop of the loop. ?>      </div><!-- #content -->   </div><!-- #principal -->  <?php get_sidebar(); ?> <?php get_footer(); ?>

As yous can see, nothing besides fancy here: the usual calls for the header and footer, and the loop in the middle. The page in question looks similar this:

The default page template in the Twenty Twelve theme. (View large version)

2. Copy And Rename The Template File

After identifying the default template file, it's time to make a re-create. We volition use the duplicated file in club to make the desired changes to our folio. For that we will also have to rename information technology. Can't accept two files of the same name, that'southward just disruptive for anybody.

You are costless to give the file any name you lot like every bit long equally it doesn't showtime with any of the reserved theme filenames. So don't be naming it page-something.php or anything else that would make WordPress call back information technology is a defended template file.

It makes sense to use a proper noun which hands identifies what this template file is used for, such as my-custom-template.php. In my case I will go with custom-full-width.php.

Adjacent we take to tell WordPress that this new file is a custom page template. For that, we will take to adjust the file header in the following style:

                      <?php /*  * Template Name: Custom Total Width  * description: >-   Folio template without sidebar  */  // Additional lawmaking goes here...

The name nether 'Template Name' is what volition be displayed under 'Page Attributes' in the WordPress editor. Make sure to adjust information technology to your template proper noun.

4. Customize The Code

At present it'southward time to get to the meat and potatoes of the page template: the code. In my example, I merely want to remove the sidebar from my demo folio.

This is relatively easy, equally all I have to do is remove <?php get_sidebar(); ?> from my page template since that's what is calling the sidebar. As a result, my custom template ends up looking like this:

          <?php /*  * Template Proper noun: Custom Total Width  * description: >-   Folio template without sidebar  */  get_header(); ?>  <div id="primary" class="site-content">   <div id="content" part="chief">      <?php while ( have_posts() ) : the_post(); ?>       <?php get_template_part( 'content', 'page' ); ?>       <?php comments_template( ', truthful ); ?>     <?php endwhile; // stop of the loop. ?>    </div><!-- #content --> </div><!-- #principal -->  <?php get_footer(); ?>

five. Upload The Folio Template

After saving my customized file, it is at present fourth dimension to upload it to my website. Custom page templates tin be saved in several places to be recognized by WordPress:

Your active (child) theme'southward binder
The folder of your master parent theme
A subfolder within either of these

I personally similar to create a folder named page_templates in my child theme and place whatsoever customized templates in there. I find this easiest to retain an overview over my files and customizations.

half dozen. Activate The Template

As a last stride, you need to activate the page template. As mentioned earlier, this is done under Folio Attributes → Templates in the WordPress editor. Salvage, view the page and voilà! Here is my customized folio without a sidebar:

Customized page template without the sidebar. (View large version)

Not so hard, is it? Don't worry, you will quickly go the hang of information technology. To give you lot a meliorate impression of what to employ these page templates for, I volition demonstrate boosted use cases (including the code) for the remainder of the commodity.

Five Different Ways To Apply Page Templates

As already mentioned, page templates can be employed for many different purposes. You can customize pretty much anything on whatever page with their help. Only your imagination (and coding abilities) stand up in your fashion.

1. Full-Width Page Template

The get-go case we will expect at is an advanced version of the demo template we created above. Upwardly there, we already removed the sidebar past deleting <?php get_sidebar(); ?> from the code. However, every bit you have seen from the screenshot this does not actually result in a full-width layout since the content department stays on the left.

To address this, we need to bargain with the CSS, in particular this function:

          .site-content {   float: left;   width: 65.1042%; }

The width aspect limits the chemical element which holds our content to 65.1042% of the bachelor space. We desire to increase this.

If we just change it to 100%, however, this will affect all other pages on our site, which is far from what we want. Therefore, the first order here is to modify the primary div's class in our custom template to something else, like grade="site-content-fullwidth". The issue:

                      <?php /*  * Template Name: Custom Full Width  * description: >-   Folio template without sidebar  */  get_header(); ?>  <div id="primary" class="site-content-fullwidth">   <div id="content" function="chief">      <?php while ( have_posts() ) : the_post(); ?>       <?php get_template_part( 'content', 'folio' ); ?>       <?php comments_template( ', truthful ); ?>     <?php endwhile; // end of the loop. ?>    </div><!-- #content --> </div><!-- #primary -->  <?php get_footer(); ?>

Now nosotros can adapt the CSS for our new custom course:

          .site-content-fullwidth {   float: left;   width: 100%; }

As a result, the content now stretches all the way beyond the screen.

The custom page template at full width. (View large version)

The 404 mistake folio is where every person lands who tries to admission a page on your website that doesn't exist, be it through a typo, a faulty link or because the page's permalink has changed.

Despite the fact that getting a 404 is disliked past everyone on the Internet, if you are running a website the 404 error page is of no trivial importance. Its content tin be the decisive factor on whether someone immediately abandons your site or sticks around and checks out your other content.

Coding a customized mistake page from scratch is cumbersome, especially if you are not confident in your abilities. A amend way is to build widget areas into your template and so you tin can flexibly modify what is displayed in that location by drag and drop.

For this we volition grab and edit the 404.php file that ships with Twenty Twelve (template hierarchy, remember?). However, earlier nosotros change anything on there, we will first create a new widget by inserting the following code into our functions.php file:

                      register_sidebar( array(   'name' => '404 Page',   'id' => '404',   'clarification'  => __( 'Content for your 404 error page goes hither.' ),   'before_widget' => '<div id="mistake-box">',   'after_widget' => '</div>',   'before_title' => '<h3 class="widget-title">',   'after_title' => '</h3>' ) );

This should display the newly created widget in your WordPress back-end. To brand sure that it actually pops up on the site, yous need to add the following line of code to your 404 page in the advisable place:

          <?php dynamic_sidebar( '404' ); ?>

In my instance, I want to supplant the search form (<?php get_search_form(); ?>) inside the template with my new widget, making for the post-obit code:

                      <?php /**  * The template for displaying 404 pages (Non Found)  *  * @parcel WordPress  * @subpackage Twenty_Twelve  * @since 20 Twelve i.0  */  get_header(); ?>  <div id="main" grade="site-content">   <div id="content" office="main">      <article id="postal service-0" class="post error404 no-results non-establish">       <header class="entry-header">         <h1 form="entry-title"><?php _e( 'This is somewhat embarrassing, isn&amp;rsquo;t information technology?', 'twentytwelve' ); ?></h1>       </header>        <div course="entry-content">         <?php dynamic_sidebar( '404' ); ?>       </div><!-- .entry-content -->     </article><!-- #post-0 -->    </div><!-- #content --> </div><!-- #chief -->  <?php get_footer(); ?>

Later uploading the template to my site, it'south time to populate my new widget area:

404 page template widget. (View large version)

If I now take a expect at the 404 error page, my newly created widgets evidence up at that place:

Customized 404 page. (View large version)

3. Folio Template For Displaying Custom Post Types

Custom post types are a great style to introduce content that has its own set of information points, blueprint and other customizations. A favorite utilise instance for these postal service types are review items such as books and movies. In our case we want to build a page template that shows portfolio items.

Nosotros outset need to create our custom post blazon (CPT). This can exist done manually or via plugin. One plugin option I can wholeheartedly recommend is Types. Information technology lets yous easily create custom post types and custom fields.

Install and activate Types, add a custom post, make sure its slug is 'portfolio', customize any fields you need (such as calculation a featured image), conform any other options, and save.

Now, that we have our portfolio postal service type, we want it to show up on our site. The offset thing nosotros'll exercise is create the folio in question. Be enlightened that if y'all chose 'portfolio' as the slug of your CPT, the folio can not have the aforementioned slug. I went with my clients-portfolio and also added some case text.

Portfolio page without a custom page template. — Portfolio folio without a custom page template. (View large version)

After adding a few items in the 'portfolio' post type section, we want them to show upwardly on our folio right underneath the folio content.

To reach this we volition once more employ a derivative of the page.php file. Copy it, telephone call it portfolio-template.php and change the header to this:

                      <?php /*  * Template Name: Portfolio Template  * description: >-   Page template to brandish portfolio custom post types   * underneath the page content  */

However, in this example we volition accept to brand a few changes to the original template. When you lot take a look at the code of page.php, you volition come across that it calls another template file in the middle, named content-page.php (where it says <?php get_template_part( 'content', 'page' ); ?>). In that file we find the following code:

                      <article id="mail-<?php the_ID(); ?>" <?php post_class(); ?>>   <header class="entry-header">     <?php if ( ! is_page_template( 'page-templates/front end-folio.php' ) ) : ?>     <?php the_post_thumbnail(); ?>     <?php endif; ?>     <h1 class="entry-championship"><?php the_title(); ?></h1>   </header>    <div class="entry-content">     <?php the_content(); ?>     <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>   </div><!-- .entry-content -->   <footer class="entry-meta">     <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</bridge>' ); ?>   </footer><!-- .entry-meta --> </article><!-- #mail service -->

As you can run across, it is here that the page title and content are called. Since we definitely want those on our portfolio site, we will need to copy the necessary parts of this template to our folio.php file. The outcome looks like this:

          get_header(); ?>  <div id="primary" class="site-content">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>       <header class="entry-header">         <?php the_post_thumbnail(); ?>         <h1 grade="entry-championship"><?php the_title(); ?></h1>       </header>        <div class="entry-content">         <?php the_content(); ?>       </div><!-- .entry-content -->        <?php comments_template( ', true ); ?>     <?php endwhile; // cease of the loop. ?>    </div><!-- #content --> </div><!-- #chief -->  <?php get_sidebar(); ?> <?php get_footer(); ?>

To get the portfolio items onto our page, we will add the following code correct beneath the the_content() call.

                      <?php   $args = array(     'post_type' => 'portfolio', // enter custom post type     'orderby' => 'date',     'order' => 'DESC',   );    $loop = new WP_Query( $args );   if( $loop->have_posts() ):   while( $loop->have_posts() ): $loop->the_post(); global $mail;     echo '<div course="portfolio">';     echo '<h3>' . get_the_title() . '</h3>';     repeat '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';     echo '<div class="portfolio-work">'. get_the_content().'</div>';     echo '</div>';   endwhile;   endif; ?>

This will brand the CPT evidence upwards on the page:

The custom portfolio template. (View large version)

I'm sure we all agree that it looks less than stellar, so some styling is in order.

                      /* Portfolio posts */  .portfolio {   -webkit-box-shadow: 0px 2px 2px 0px rgba(l, 50, fifty, 0.75);   -moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.75);   box-shadow:         0px 2px 2px 0px rgba(50, 50, l, 0.75);   margin: 0 0 20px;   padding: 30px; } .portfolio-image {   display: block;   float: left;   margin: 0 10px 0 0;   max-width: 20%; } .portfolio-paradigm img {   border-radius: 0; } .portfolio-work {   brandish: inline-cake;   max-width: 80%; } .portfolio h3{   edge-bottom: 1px solid #999;   font-size: 1.57143rem;   font-weight: normal;   margin: 0 0 15px;   padding-bottom: 15px; }

Much amend, don't yous call up?

The custom portfolio template with styling. (View large version)

And here is the entire lawmaking for the portfolio page template:

                      <?php /*  * Template Name: Portfolio Template  * description: >-   Page template to display portfolio custom mail types   * underneath the folio content  */  get_header(); ?>  <div id="primary" class="site-content">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>        <header form="entry-header">         <?php the_post_thumbnail(); ?>         <h1 class="entry-championship"><?php the_title(); ?></h1>       </header>        <div course="entry-content">         <?php the_content(); ?>         <?php           $args = array(             'post_type' => 'portfolio', // enter custom post type             'orderby' => 'date',             'order' => 'DESC',           );            $loop = new WP_Query( $args );           if( $loop->have_posts() ):           while( $loop->have_posts() ): $loop->the_post(); global $postal service;             echo '<div class="portfolio">';             echo '<h3>' . get_the_title() . '</h3>';             echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';             echo '<div form="portfolio-piece of work">'. get_the_content().'</div>';             echo '</div>';           endwhile;           endif;         ?>       </div><!-- #entry-content -->       <?php comments_template( ', true ); ?>                    <?php endwhile; // cease of the loop. ?>                   </div><!-- #content --> </div><!-- #primary -->  <?php get_sidebar(); ?> <?php get_footer(); ?>

4. Correspondent Page With Avatar images

Next up in our page template use cases is a contributor folio. We desire to set up a list of authors on our website, including their images and the number of posts they have published nether their name. The finish event will look like this:

The completed custom contributors page. (View big version)

We will once again start out with our hybrid file from before and add the code for the contributor list to information technology. But what if y'all don't know how to create such a thing? No worries, yous tin get by with intelligent stealing.

You encounter, the Twenty Fourteen default theme comes with a contributor page by default. You can discover its template in the page-templates binder with the name contributors.php.

When looking into the file, however, yous will only find the post-obit phone call in there: twentyfourteen_list_authors();. Luckily, equally an gorging WordPress user yous now conclude that this probably refers to a function in Twenty Fourteen'south function.php file and you would be correct.

From what we find in there, the part that interests us is this:

                      <?php // Output the authors list. $contributor_ids = get_users( array(   'fields'  => 'ID',   'orderby' => 'post_count',   'club'   => 'DESC',   'who'     => 'authors', ));  foreach ( $contributor_ids as $contributor_id ) : $post_count = count_user_posts( $contributor_id );   // Move on if user has not published a mail (notwithstanding).   if ( ! $post_count ) {     continue;   } ?>  <div class="contributor">   <div class="contributor-info">     <div course="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>     <div class="contributor-summary">       <h2 class="contributor-proper name"><?php repeat get_the_author_meta( 'display_name', $contributor_id ); ?></h2>       <p course="correspondent-bio">         <?php echo get_the_author_meta( 'description', $contributor_id ); ?>       </p>       <a class="button contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>">         <?php printf( _n( '%d Commodity', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>       </a>     </div><!-- .contributor-summary -->   </div><!-- .contributor-info --> </div><!-- .contributor -->  <?php endforeach; ?>

Nosotros volition once more add it beneath the telephone call for the_content() with the following result:

The unstyled custom contributors page. (View large version)

Now for a little chip of styling:

                      /* Correspondent page */  .contributor {   border-lesser: 1px solid rgba(0, 0, 0, 0.i);   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing:      border-box;   brandish: inline-block;   padding: 48px 10px; } .contributor p {   margin-lesser: 1rem; } .contributor-info {   margin: 0 auto 0 168px; } .contributor-avatar {   border: 1px solid rgba(0, 0, 0, 0.one);   float: left;   line-height: 0;   margin: 0 30px 0 -168px;   padding: 2px; } .contributor-avatar img{   border-radius: 0; } .contributor-summary {   float: left; } .contributor-proper name{   font-weight: normal;   margin: 0 !of import; } .contributor-posts-link {   background-color: #24890d;   border: 0 none;   border-radius: 0;   color: #fff;   display: inline-block;   font-size: 12px;   font-weight: 700;   line-superlative: normal;   padding: 10px 30px 11px;   text-transform: uppercase;   vertical-align: bottom; } .correspondent-posts-link:hover {   color: #000;   text-decoration: none; }

And that should be it. Thanks Twenty Xiv!

5. Customized Archive Page

Xx Twelve comes with its own template for archive pages. It will leap into activeness, for example, when you endeavour to view all past posts from a certain category.

Nonetheless, I want something a picayune more similar what Problogger has done: a page that lets people observe additional content on my site in several different ways. That, again, is done with a page template.

Staying with our mixed template from before, nosotros will add the post-obit beneath the the_content() call:

                      <div class="archive-search-form"><?php get_search_form(); ?></div>  <h2>Athenaeum past Yr:</h2> <ul><?php wp_get_archives('type=yearly'); ?></ul>  <h2>Athenaeum by Month:</h2> <ul><?php wp_get_archives('type=monthly'); ?></ul>  <h2>Archives by Subject field:</h2> <ul> <?php wp_list_categories('title_li='); ?></ul>

Plus, a trivial scrap of styling for the search bar:

                      .archive-search-form {   padding: 10px 0;   text-marshal: middle; }

And the result should look a little bit like this:

The custom archive page. — The custom annal page. (View large version)

For completion'due south sake, hither is the unabridged file:

                      <?php /**  * Template Name: Custom archive template  *  */  get_header(); ?>  <div id="principal" class="site-content">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>        <header class="entry-header">         <?php the_post_thumbnail(); ?>         <h1 class="entry-title"><?php the_title(); ?></h1>       </header>        <div course="entry-content">         <?php the_content(); ?>          <div form="annal-search-form"><?php get_search_form(); ?></div>          <h2>Archives by Year:</h2>         <ul><?php wp_get_archives('type=yearly'); ?></ul>          <h2>Archives past Month:</h2>         <ul><?php wp_get_archives('type=monthly'); ?></ul>          <h2>Archives by Subject:</h2>         <ul><?php wp_list_categories('title_li='); ?></ul>       </div><!-- #entry-content -->        <?php comments_template( ', true ); ?>                    <?php endwhile; // end of the loop. ?>                </div><!-- #content --> </div><!-- #primary -->  <?php get_sidebar(); ?> <?php get_footer(); ?>

Don't forget to assign it to a folio!

WordPress Page Templates In A Nutshell

On your style to mastering WordPress, learning to use page templates is an of import step. They can make customizing your website very, very easy and permit you to assign unique functionality and design to as many or few pages as you wish. From calculation widget areas to showing custom mail service types to displaying a list of your website's contributors — the possibilities are practically endless.

Whether you use conditional tags, exploit the WordPress template hierarchy, or create page-specific template files is entirely upwards to you and what yous are trying to reach. Showtime off small and piece of work your style up to more complicated things. It won't be long before every function of your WordPress website will respond to your every call.

Do yous have experience using page templates in WordPress? What other use cases can you add to the list? Whatever important details to add together? Please tell us almost information technology in the comments.

Image credit: Kevin Phillips

(og, ml)