What Theme Template Does Woocommerce Use?

24 min read
WordPress, Techniques (WP)

Quick summary ↬ I like to think of WordPress as the gateway drug of spider web development. Many people who get started using the platform are initially merely looking for a comfortable (and gratuitous) way to create a simple website. Some Googling and consultation of the WordPress Codex later, it's done and that should be it. Kind of similar "I'm only going to try it once.

I like to recall of WordPress as the gateway drug of web evolution. Many people who become started using the platform are initially merely looking for a comfortable (and gratis) way to create a uncomplicated website, often with the assistance of a WordPress folio architect plugin. Kind of like "I'm merely going to try it one time."

However, a good chunk of users don't end there. Instead, they get hooked. Come up up with more ideas. Experiment. Try out new plugins. Notice Firebug. Blast. Presently there is no turning back. Does that audio like your story? Equally a WordPress user it is only natural to want more and more control over your website. To crave custom blueprint, custom functionality, custom everything.

Template Files In WordPress

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

The slightly longer version: every time someone sends a request to view role of your website, the WordPress platform will figure out what content they want to see and how that specific function of your website should be rendered.

For the latter, WordPress will attempt to use the most appropriate template file found inside your theme. Which one is decided on the basis of a set order, the WordPress template hierarchy. Yous can run into what this looks like in the screenshot below or in this interactive version.

custom wordpress — The WordPress template hierarchy. (Image credit: WordPress Codex)(View large version)

The template bureaucracy is a list of template files WordPress is familiar with that are ranked to make up one's mind which file takes precedence over another.

You can call back of it as a decision tree. When WordPress tries to determine how to brandish a given page, it works its way downwardly the template hierarchy until information technology finds the first template file that fits the requested folio. For example, if somebody attempted to access the address https://yoursite.com/category/news, WordPress would look for the correct template file in this order:

category-{slug}.php: in this example category-news.php
category-{id}.php>: if the category ID were v, WordPress would try to find a file named category-5.php
category.php
archive.php
alphabetize.php

At the lesser of the bureaucracy is index.php. Information technology will be used to display any content which does non have a more specific template file attached to its name. If a template file ranks higher in the bureaucracy, WordPress will automatically use that file in order to display the content in question.

Folio Templates And Their Utilize

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

Notwithstanding, in many cases information technology might be necessary to change the design, look, feel or functionality of private parts of your website. This is where page templates come up into play. Customized page templates let y'all 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 selection to modify your folio to full width, add a second sidebar or switch the sidebar's location. If that is the instance for yours, it was probably done through template files. There are several means to accomplish this and we'll get over them later.

Commencement, however, a word of circumspection: since working with templates involves editing and changing files in your active theme, it's e'er a good idea to get with a kid 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 Whatever Page In WordPress

There are 3 bones ways to use custom folio templates in WordPress: calculation provisional statements to an existing template; creating specific page templates which rank higher in the bureaucracy; and directly assigning templates to specific pages. We will take a look at each of these in plough.

Using Conditional Tags In Default Templates

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

Typically, you would add conditional tags to your theme'south folio.php file (unless, of class, you lot want to customize a different part of your website). They enable you to make changes limited to the homepage, front end page, blog page or any other page of your site.

Hither are some ofttimes used conditional tags:

is_page(): to target a specific page. Can be used with the folio's ID, title, or URL/name.
is_home(): applies to the home page.
is_front_page(): targets the front folio of your site as gear up nether Settings → Reading
is _category(): condition for a category folio. Tin use ID, title or URL/name like is_page() tag.
is_single(): for single posts or attachments
is_archive(): conditions for annal pages
is_404(): applies simply to 404 fault pages

For example, 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 page https://yoursite.com/products.

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

A good employ case for this would be if you have a shop on your site and you need to display a different header image or customized menu on the store page. You could then add these customization in header-shop.php and it would show up in the appropriate place.

However, conditional tags are not limited to ane page. Yous can make several statements in a row like then:

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

In this second example, ii weather condition will change the beliefs of unlike pages on your site. Besides loading the aforementioned shop-specific header file, information technology would at present also load a header-about.php on a page with the ID of 42. For all other pages the standard header file applies.

To larn more almost the use of conditional tags, the post-obit resources are highly recommended:

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

Creating Page-Specific Files In The WordPress Bureaucracy

Conditional tags are a great way to introduce smaller changes to your folio templates. Of course, yous can also create larger customizations by using many conditional statements one later on the other. I detect this a very cumbersome solution, yet, and would opt for designated template files instead.

One style to do this is to exploit the WordPress template hierarchy. As we have seen, the bureaucracy will traverse a list of possible template files and choose the starting time i it tin discover 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 take been straight assigned to a particular page. If ane of those exists, WordPress volition employ it no affair which other template files are present. We volition talk more than almost custom folio templates in a fleck.

After that, WordPress will wait for a page template that includes the slug of the folio in question. For case, if you lot include a file named page-about.php in your theme files, WordPress will use this file to display your 'About' page or whichever page can be found under https://www.yoursite.com/virtually.

Alternatively, you can achieve the aforementioned by targeting your page's ID. So if that same page has an ID of 5, WordPress will use the template file page-v.php earlier page.php if it exists; that is, only if there isn't a higher-ranking page template bachelor.

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

Assigning Custom Folio Templates

Besides providing templates in a course that WordPress will use automatically, it is too possible to manually assign custom templates to specific pages. As you tin can run into from the template hierarchy, these will trump any other template file present in the theme folder.

Only similar creating page-specific templates for the WordPress hierarchy, this requires you to provide a template file and then link it to whichever page y'all desire to use information technology for. The latter can be done in two different means you might already exist familiar with. Simply in instance you aren't, here is how to do it.

1. Assigning Custom Page Templates From The WordPress Editor

In the WordPress editor, you detect an option field chosen 'Page Attributes' with a drop-down menu nether 'Template'.

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

Clicking on information technology will give you a list of available page templates on your WordPress website. Cull the i you desire, salve or update your folio and you are done.

Available templates under Page Attributes. — Bachelor templates under Page Attributes. (View large version)

2. Setting A Custom Template Via Quick Edit

The same can likewise be achieved without entering the WordPress editor. Go to 'All Pages' and hover over any item in the list in that location. A menu will become visible that includes the 'Quick Edit' item.

Click on information technology to edit the folio settings straight from the list. Y'all volition run into the same drop-down menu for choosing a different page template. Pick one, update the page and you are done.

Not so hard after all, is it? Merely what if you don't take a custom page template yet? How do you lot create it so that your website looks exactly the way you want it? Don't worry, that'southward what the adjacent role is all about.

A Step-Past-Stride Guide To Creating Custom Page Templates

Putting together customized template files for your pages is not that hard but here are a few details yous accept to pay attention to. Therefore, let's go over the process chip-past-bit.

1. Detect The Default Template

A skilful way is to start past copying the template which is currently used past the folio you want to modify. It'south easier to change existing code than to write an entire page from scratch. In most cases this will exist the page.php file.

(If you don't know how to find out which template file is being used on the page yous desire to edit, the plugin What The File will prove useful.)

I will exist using the Twenty Twelve theme for demonstration. Hither is what its standard folio template looks like:

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

As you can come across, nothing likewise fancy hither: the usual calls for the header and footer, and the loop in the center. 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, information technology's fourth dimension to make a re-create. We will use the duplicated file in lodge to make the desired changes to our page. For that we will also accept to rename it. Can't take two files of the aforementioned proper noun, that'southward just confusing for everyone.

You are free to give the file whatever name you similar as long every bit it doesn't start with whatsoever of the reserved theme filenames. So don't be naming it folio-something.php or annihilation else that would make WordPress remember it is a defended template file.

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

Next nosotros accept to tell WordPress that this new file is a custom page template. For that, we will take to adapt the file header in the following way:

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

The proper name under 'Template Proper noun' is what will be displayed under 'Page Attributes' in the WordPress editor. Make certain to adjust it to your template name.

4. Customize The Lawmaking

Now information technology'southward fourth dimension to get to the meat and potatoes of the page template: the code. In my case, I merely want to remove the sidebar from my demo page.

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

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

5. Upload The Page Template

After saving my customized file, information technology is now time to upload it to my website. Custom page templates can be saved in several places to exist recognized by WordPress:

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

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

6. Actuate The Template

As a final stride, you demand to activate the folio template. Every bit mentioned before, this is done under Page Attributes → Templates in the WordPress editor. Save, view the page and voilà! Here is my customized page without a sidebar:

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

Not so difficult, is it? Don't worry, you will quickly get the hang of information technology. To give you a better impression of what to use these page templates for, I will demonstrate additional use cases (including the lawmaking) for the balance of the commodity.

Five Different Ways To Use Page Templates

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

1. Total-Width Folio Template

The first case we volition look at is an advanced version of the demo template nosotros created in a higher place. Upwardly there, we already removed the sidebar by deleting <?php get_sidebar(); ?> from the code. However, as y'all have seen from the screenshot this does non actually result in a full-width layout since the content section stays on the left.

To address this, we demand to deal with the CSS, in particular this role:

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

The width aspect limits the element which holds our content to 65.1042% of the available space. We want to increase this.

If we just change it to 100%, nevertheless, this will bear upon all other pages on our site, which is far from what we desire. Therefore, the start order hither is to change the primary div'south class in our custom template to something else, similar grade="site-content-fullwidth". The result:

                      <?php /*  * Template Proper noun: Custom Full Width  * clarification: >-   Page template without sidebar  */  get_header(); ?>  <div id="primary" course="site-content-fullwidth">   <div id="content" role="main">      <?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 we can adjust the CSS for our new custom class:

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

As a result, the content now stretches all the style across the screen.

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

The 404 error page is where every person lands who tries to access a folio 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 little importance. Its content can 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 lot are not confident in your abilities. A ameliorate way is to build widget areas into your template so you lot tin can flexibly alter what is displayed there past drag and driblet.

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

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

This should display the newly created widget in your WordPress dorsum-end. To brand sure that information technology actually pops up on the site, you need to add the following line of code to your 404 page in the appropriate place:

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

In my case, I want to supersede the search course (<?php get_search_form(); ?>) inside the template with my new widget, making for the following code:

                      <?php /**  * The template for displaying 404 pages (Not Found)  *  * @package WordPress  * @subpackage Twenty_Twelve  * @since Twenty Twelve 1.0  */  get_header(); ?>  <div id="primary" grade="site-content">   <div id="content" role="main">      <commodity id="mail service-0" class="post error404 no-results not-found">       <header class="entry-header">         <h1 class="entry-title"><?php _e( 'This is somewhat embarrassing, isn&amp;rsquo;t it?', 'twentytwelve' ); ?></h1>       </header>        <div course="entry-content">         <?php dynamic_sidebar( '404' ); ?>       </div><!-- .entry-content -->     </commodity><!-- #post-0 -->    </div><!-- #content --> </div><!-- #primary -->  <?php get_footer(); ?>

After uploading the template to my site, it's time to populate my new widget surface area:

404 page template widget. (View large version)

If I now accept a wait at the 404 fault folio, my newly created widgets show up at that place:

3. Page Template For Displaying Custom Post Types

Custom post types are a not bad way to introduce content that has its ain ready of data points, design and other customizations. A favorite use case for these postal service types are review items such equally books and movies. In our case we want to build a page template that shows portfolio items.

We first need to create our custom post type (CPT). This tin be done manually or via plugin. One plugin option I tin wholeheartedly recommend is Types. It lets y'all easily create custom postal service types and custom fields.

Install and activate Types, add a custom post, make certain its slug is 'portfolio', customize any fields you demand (such as adding a featured image), adjust any other options, and save.

At present, that nosotros have our portfolio post blazon, nosotros want it to show upwardly on our site. The starting time matter we'll practise is create the page in question. Exist aware that if you chose 'portfolio' every bit the slug of your CPT, the page can not have the same slug. I went with my clients-portfolio and also added some example 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, nosotros desire them to show up on our page right underneath the folio content.

To accomplish this we will again utilise a derivative of the page.php file. Copy it, call information technology portfolio-template.php and change the header to this:

                      <?php /*  * Template Proper name: Portfolio Template  * description: >-   Page template to display portfolio custom postal service types   * underneath the folio content  */

However, in this case we will have to make a few changes to the original template. When you take a expect at the lawmaking of page.php, you will see that it calls some other template file in the center, named content-page.php (where information technology says <?php get_template_part( 'content', 'page' ); ?>). In that file nosotros discover the following code:

                      <commodity id="postal service-<?php the_ID(); ?>" <?php post_class(); ?>>   <header class="entry-header">     <?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>     <?php the_post_thumbnail(); ?>     <?php endif; ?>     <h1 class="entry-championship"><?php the_title(); ?></h1>   </header>    <div grade="entry-content">     <?php the_content(); ?>     <?php wp_link_pages( assortment( 'earlier' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'later on' => '</div>' ) ); ?>   </div><!-- .entry-content -->   <footer class="entry-meta">     <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span form="edit-link">', '</span>' ); ?>   </footer><!-- .entry-meta --> </article><!-- #post -->

As you tin meet, it is here that the page championship and content are called. Since we definitely want those on our portfolio site, we will need to re-create the necessary parts of this template to our page.php file. The result looks like this:

          get_header(); ?>  <div id="primary" grade="site-content">   <div id="content" role="principal">      <?php while ( have_posts() ) : the_post(); ?>       <header course="entry-header">         <?php the_post_thumbnail(); ?>         <h1 class="entry-title"><?php the_title(); ?></h1>       </header>        <div form="entry-content">         <?php the_content(); ?>       </div><!-- .entry-content -->        <?php comments_template( ', truthful ); ?>     <?php endwhile; // stop of the loop. ?>    </div><!-- #content --> </div><!-- #principal -->  <?php get_sidebar(); ?> <?php get_footer(); ?>

To get the portfolio items onto our folio, nosotros will add together the following code right beneath the the_content() telephone 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 $post;     echo '<div class="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>';     repeat '</div>';   endwhile;   endif; ?>

This will make the CPT testify upwards on the folio:

The custom portfolio template. (View big version)

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

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

Much better, don't yous call back?

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

And here is the entire code for the portfolio folio template:

                      <?php /*  * Template Proper name: Portfolio Template  * description: >-   Page template to brandish portfolio custom post types   * underneath the page content  */  get_header(); ?>  <div id="chief" grade="site-content">   <div id="content" office="master">      <?php while ( have_posts() ) : the_post(); ?>        <header class="entry-header">         <?php the_post_thumbnail(); ?>         <h1 course="entry-title"><?php the_title(); ?></h1>       </header>        <div course="entry-content">         <?php the_content(); ?>         <?php           $args = assortment(             'post_type' => 'portfolio', // enter custom post type             'orderby' => 'date',             'society' => '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-epitome">'. get_the_post_thumbnail( $id ).'</div>';             echo '<div form="portfolio-work">'. get_the_content().'</div>';             echo '</div>';           endwhile;           endif;         ?>       </div><!-- #entry-content -->       <?php comments_template( ', true ); ?>                    <?php endwhile; // end of the loop. ?>                   </div><!-- #content --> </div><!-- #primary -->  <?php get_sidebar(); ?> <?php get_footer(); ?>

iv. Correspondent Page With Avatar images

Next up in our page template use cases is a contributor page. Nosotros want to set upwards a list of authors on our website, including their images and the number of posts they have published under their name. The terminate result volition look similar this:

The completed custom contributors page. (View large version)

We will again start out with our hybrid file from earlier and add the code for the contributor list to it. Simply what if you don't know how to create such a matter? No worries, you can get by with intelligent stealing.

You see, the Twenty Fourteen default theme comes with a contributor page by default. You lot tin can detect its template in the page-templates folder with the name contributors.php.

When looking into the file, however, you volition merely find the following telephone call in there: twentyfourteen_list_authors();. Luckily, as an avid WordPress user you now conclude that this probably refers to a office in Twenty Fourteen's function.php file and you would be right.

From what we detect in there, the office that interests us is this:

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

Nosotros volition again add information technology beneath the phone call for the_content() with the following result:

The unstyled custom contributors page. (View large version)

At present for a piffling scrap of styling:

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

And that should exist it. Thank you Twenty Fourteen!

five. Customized Archive Folio

Twenty Twelve comes with its ain template for archive pages. It will bound into activeness, for example, when y'all try to view all past posts from a certain category.

Yet, I want something a little more than similar what Problogger has done: a page that lets people observe boosted content on my site in several dissimilar 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 Year:</h2> <ul><?php wp_get_archives('type=yearly'); ?></ul>  <h2>Archives by Month:</h2> <ul><?php wp_get_archives('type=monthly'); ?></ul>  <h2>Athenaeum past Subject:</h2> <ul> <?php wp_list_categories('title_li='); ?></ul>

Plus, a little bit of styling for the search bar:

                      .archive-search-class {   padding: 10px 0;   text-align: center; }

And the consequence should look a little bit like this:

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

For completion'south sake, here is the unabridged file:

                      <?php /**  * Template Name: Custom archive template  *  */  get_header(); ?>  <div id="main" class="site-content">   <div id="content" role="main">      <?php while ( have_posts() ) : the_post(); ?>        <header class="entry-header">         <?php the_post_thumbnail(); ?>         <h1 course="entry-title"><?php the_title(); ?></h1>       </header>        <div class="entry-content">         <?php the_content(); ?>          <div course="annal-search-grade"><?php get_search_form(); ?></div>          <h2>Archives by Year:</h2>         <ul><?php wp_get_archives('type=yearly'); ?></ul>          <h2>Archives by Month:</h2>         <ul><?php wp_get_archives('type=monthly'); ?></ul>          <h2>Athenaeum 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 information technology to a folio!

WordPress Folio Templates In A Nutshell

On your way to mastering WordPress, learning to use page templates is an important step. They tin make customizing your website very, very easy and allow you to assign unique functionality and design to as many or few pages as you wish. From adding widget areas to showing custom post types to displaying a list of your website'southward contributors — the possibilities are practically endless.

Whether you use conditional tags, exploit the WordPress template bureaucracy, or create page-specific template files is entirely up to you lot and what you are trying to achieve. Start off small and work your way upward to more than complicated things. Information technology won't be long before every part of your WordPress website volition answer to your every call.

Do you have feel using page templates in WordPress? What other employ cases can you add to the listing? Any important details to add? Please tell u.s. nigh it in the comments.

Image credit: Kevin Phillips

(og, ml)