A Detailed Guide To A Custom WordPress Page Templates

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, it’s done and that should be it. Kind of like “I’m just going to try it once.” [Links checked March/29/2017]
However, a good chunk of users don’t stop there.

Originally posted here: 

A Detailed Guide To A Custom WordPress Page Templates

5 Tips to Craft a Better Value Proposition

Value propositions are everywhere—some good, some bad. Essentially a value proposition is your statement of what your company does best. But a lot of people have trouble communicating that in an easy-to-understand manner. Let’s imagine that you explain what you do simply and concisely. Clarity alone doesn’t cut the deal. Does your value proposition matter […]

The post 5 Tips to Craft a Better Value Proposition appeared first on The Daily Egg.

See original:

5 Tips to Craft a Better Value Proposition

A Detailed Guide To WordPress Custom Page Templates

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 Codex1 later, it’s done and that should be it. Kind of like “I’m just going to try it once.”

However, a good chunk of users don’t stop there. Instead, they get hooked. Come up with more ideas. Experiment. Try out new plugins. Discover Firebug2. Boom. Soon there is no turning back. Does that sound like your story? As a WordPress user it is only natural to want more and more control over your website. To crave custom design, custom functionality, custom everything.

Luckily, WordPress is built for exactly that. Its flexible structure and compartmentalized architecture allows anyone to change practically anything on their site.

Among the most important tools in the quest for complete website control are page templates. They allow users to dramatically alter their website’s design and functionality. Want a customized header for your front page? Done. An additional sidebar only for your blog page? No problem. A unique 404 error page? Be. My. Guest.

If you want to know how WordPress page templates can help you achieve that, read on. But first, a little background information.

Template Files In WordPress

What are we talking about when we speak of templates in the context of WordPress? The short 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 part of your website, the WordPress platform will figure out what content they want to see and how that specific part of your website should be rendered.

For the latter, WordPress will attempt to use the most appropriate template file found within your theme. Which one is decided on the basis of a set order, the WordPress template hierarchy3. You can see what this looks like in the screenshot below or in this interactive version4.

The WordPress template hierarchy.5
The WordPress template hierarchy. (Image credit: WordPress Codex6)(View large version7)

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

You can 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 hierarchy until it finds the first template file that fits the requested page. For example, if somebody attempted to access the address http://yoursite.com/category/news, WordPress would look for the correct template file in this order:

  1. category-slug.php: in this case category-news.php
  2. category-id.php>: if the category ID were 5, WordPress would try to find a file named category-5.php
  3. category.php
  4. archive.php
  5. index.php

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

Page Templates And Their Use

For pages, the standard template is usually the aptly named page.php. Unless there is a more specific template file available (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 it might be necessary to change the design, look, feel or functionality of individual parts of your website. This is where page templates come into play. Customized page templates allow you 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 option to change your page to full width, add a second sidebar or switch the sidebar’s location. If that is the case for yours, it was probably done through template files. There are several ways to accomplish this and we’ll go over them later.

First, however, a word of caution: since working with templates involves editing and changing files in your active 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 Any Page In WordPress

There are three basic ways to use custom page templates in WordPress: adding conditional statements to an existing template; creating specific page templates which rank higher in the hierarchy; and directly assigning templates to specific pages. We will take a look at each of these in turn.

Using Conditional Tags In Default Templates

An easy way to make page-specific changes is to add WordPress’s many conditional tags8 to a template already in use. As the 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 “Only perform action X on page Y.”

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

Here are some frequently used conditional tags:

  1. is_page(): to target a specific page. Can be used with the page’s ID, title, or URL/name.
  2. is_home(): applies to the home page.
  3. is_front_page(): targets the front page of your site as set under Settings → Reading
  4. is _category(): condition for a category page. Can use ID, title or URL/name like is_page() tag.
  5. is_single(): for single posts or attachments
  6. is_archive(): conditions for archive pages
  7. is_404(): applies only to 404 error pages

For example, when added to your page.php in place of the standard get_header(); tag, the following code will load a custom header file named header-shop.php when displaying the page http://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 different header image or customized menu on the shop 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 one page. You can make several statements in a row like so:

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

In this second example, two conditions will change the behavior of different pages on your site. Besides loading the aforementioned shop-specific header file, it would now also load a header-about.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 conditional tags, the following resources are highly recommended:

Creating Page-Specific Files In The WordPress Hierarchy

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

One way to do 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 first one it can find that fits. For pages, the hierarchy looks like this:

  • Custom page template
  • page-slug.php
  • page-id.php
  • page.php
  • index.php

In first place are custom page templates which have been directly assigned to a particular page. If one of those exists, WordPress will use it no matter which other template files are present. We will talk more about custom page templates in a bit.

After that, WordPress will look for a page template that includes the slug of the page in question. For example, if you 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 http://www.yoursite.com/about.

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

(BTW, you can find out the ID for every page by hovering over its title under ‘All Pages’ in your WordPress back-end. The ID will show up in the link displayed by your browser.)

Assigning Custom Page Templates

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

Just like creating page-specific templates for the WordPress hierarchy, this requires you to provide a template file and then link it to whichever page you want to use it for. The latter can be done in two different ways you might already be familiar with. Just in case you aren’t, here is how to do it.

1. Assigning Custom Page Templates From The WordPress Editor

In the WordPress editor, you find an option field called ‘Page Attributes’ with a drop-down menu under ‘Template’.

Page Attributes in the WordPress editor.11
Page Attributes in the WordPress editor. (View large version12)

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

Available templates under Page Attributes.13
Available templates under Page Attributes. (View large version14)

2. Setting A Custom Template Via Quick Edit

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

Click on it to edit the page settings directly from the list. You will see 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? But what if you don’t have a custom page template yet? How do you create it so that your website looks exactly the way you want it? Don’t worry, that’s what the next part is all about.

A Step-By-Step Guide To Creating Custom Page Templates

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

1. Find The Default Template

A good way is to start by copying the template which is currently used by the page you want to modify. It’s easier to modify existing code than to write an entire page from scratch. In most cases this will be the page.php file.

(If you don’t know how to find out which template file is being used on the page you want to edit, the plugin What The File15 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 will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>

  <div id="primary" class="site-content">
    <div id="content" role="main">

      <?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><!-- #primary -->

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

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

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

2. Copy And Rename The Template File

After identifying the default template file, it’s time to make a copy. We will use the duplicated file in order to make the desired changes to our page. For that we will also have to rename it. Can’t have two files of the same name, that’s just confusing for everyone.

You are free to give the file any name you like as long as it doesn’t start with any of the reserved theme filenames18. So don’t be naming it page-something.php or anything else that would make WordPress think it is a dedicated template file.

It makes sense to use a name which easily 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.

3. Customize The Template File Header

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

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

// Additional code goes here...

The name under ‘Template Name’ is what will be displayed under ‘Page Attributes’ in the WordPress editor. Make sure to adjust it to your template name.

4. Customize The Code

Now it’s 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 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. As a consequence, my custom template ends up looking like this:

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

get_header(); ?>

<div id="primary" class="site-content">
  <div id="content" role="main">

    <?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><!-- #primary -->

<?php get_footer(); ?>

5. Upload The Page Template

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

  • Your active (child) theme’s folder
  • The folder of your main 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. Activate The Template

As a last step, you need to activate the page template. As mentioned earlier, 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.19
Customized page template without the sidebar. (View large version20)

Not so hard, is it? Don’t worry, you will quickly get the hang of it. To give you a better impression of what to use these page templates for, I will demonstrate additional use cases (including the code) for the remainder of the article.

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. Full-Width Page Template

The first case we will look at is an advanced version of the demo template we created above. Up there, we already removed the sidebar by deleting <?php get_sidebar(); ?> from the code. However, as you have seen from the screenshot this does not actually result in a full-width layout since the content section stays on the left.

To address this, we need to deal with the CSS, in particular this part:

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

The width attribute 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%, however, this will affect all other pages on our site, which is far from what we want. Therefore, the first order here is to change the primary div‘s class in our custom template to something else, like class="site-content-fullwidth". The result:

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

get_header(); ?>

<div id="primary" class="site-content-fullwidth">
  <div id="content" role="main">

    <?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><!-- #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 way across the screen.

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

2. Dynamic 404 Error Page With Widget Areas

The 404 error page is where every person lands who tries to access 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 by 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 error page from scratch is cumbersome, especially if you are not confident in your abilities. A better way is to build widget areas into your template so you can flexibly change what is displayed there by drag and drop.

For this we will grab and edit the 404.php file that ships with Twenty Twelve (template hierarchy, remember?). However, before we 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',
  '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 back-end. To make sure that it 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 replace the search form (<?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" class="site-content">
  <div id="content" role="main">

    <article id="post-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 class="entry-content">
        <?php dynamic_sidebar( '404' ); ?>
      </div><!-- .entry-content -->
    </article><!-- #post-0 -->

  </div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

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

404 page template widget.23
404 page template widget. (View large version24)

If I now take a look at the 404 error page, my newly created widgets show up there:

Customized 404 page.25
Customized 404 page. (View large version26)

3. Page Template For Displaying Custom Post Types

Custom post types are a great way to introduce content that has its own set of data points, design and other customizations. A favorite use case for these post types are review items such as 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 can be done manually or via plugin. One plugin option I can wholeheartedly recommend is Types27. It lets you 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 adding a featured image), adjust any other options, and save.

Now, that we have our portfolio post type, we want it to show up on our site. The first thing we’ll do is create the page in question. Be aware that if you chose ‘portfolio’ as 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.28
Portfolio page without a custom page template. (View large version29)

After adding a few items in the ‘portfolio’ post type section, we want them to show up on our page right underneath the page content.

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

<?php
/*
 * Template Name: Portfolio Template
 * Description: Page template to display portfolio custom post types 
 * underneath the page content
 */
 

However, in this case we will have to make a few changes to the original template. When you take a look at the code of page.php, you will see 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="post-<?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-title"><?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">', '</span>' ); ?>
  </footer><!-- .entry-meta -->
</article><!-- #post -->

As you can see, 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 page.php file. The result 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 class="entry-title"><?php the_title(); ?></h1>
      </header>

      <div class="entry-content">
        <?php the_content(); ?>
      </div><!-- .entry-content -->
      
      <?php comments_template( '', true ); ?>
    <?php endwhile; // end of the loop. ?>

  </div><!-- #content -->
</div><!-- #primary -->

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

To get the portfolio items onto our page, we will add the following code right 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 $post;
    echo '<div class="portfolio">';
    echo '<h3>' . get_the_title() . '</h3>';
    echo '<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 make the CPT show up on the page:

The custom portfolio template.30
The custom portfolio template. (View large version31)

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(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(50, 50, 50, 0.75);
  margin: 0 0 20px;
  padding: 30px;

.portfolio-image 
  display: block;
  float: left;
  margin: 0 10px 0 0;
  max-width: 20%;

.portfolio-image img 
  border-radius: 0;

.portfolio-work 
  display: inline-block;
  max-width: 80%;

.portfolio h3
  border-bottom: 1px solid #999;
  font-size: 1.57143rem;
  font-weight: normal;
  margin: 0 0 15px;
  padding-bottom: 15px;

Much better, don’t you think?

The custom portfolio template with styling.32
The custom portfolio template with styling. (View large version33)

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

<?php
/*
 * Template Name: Portfolio Template
 * Description: Page template to display portfolio custom post types 
 * underneath the page content
 */

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 class="entry-title"><?php the_title(); ?></h1>
      </header>

      <div class="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 $post;
            echo '<div class="portfolio">';
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';
            echo '<div class="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(); ?>

4. Contributor Page With Avatar images

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

The completed custom contributors page.34
The completed custom contributors page. (View large version35)

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

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

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

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',
  'order'   => 'DESC',
  'who'     => 'authors',
));

foreach ( $contributor_ids as $contributor_id ) :
$post_count = count_user_posts( $contributor_id );
  // Move on if user has not published a post (yet).
  if ( ! $post_count ) 
    continue;
  
?>

<div class="contributor">
  <div class="contributor-info">
    <div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>
    <div class="contributor-summary">
      <h2 class="contributor-name"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2>
      <p class="contributor-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 Article', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>
      </a>
    </div><!-- .contributor-summary -->
  </div><!-- .contributor-info -->
</div><!-- .contributor -->

<?php
endforeach;
?>

We will again add it below the call for the_content() with the following result:

The unstyled custom contributors page.36
The unstyled custom contributors page. (View large version37)

Now for a little bit of styling:

/* Contributor page */

.contributor 
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing:      border-box;
  display: inline-block;
  padding: 48px 10px;

.contributor p 
  margin-bottom: 1rem;

.contributor-info 
  margin: 0 auto 0 168px;

.contributor-avatar 
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
  line-height: 0;
  margin: 0 30px 0 -168px;
  padding: 2px;

.contributor-avatar img
  border-radius: 0;

.contributor-summary 
  float: left;

.contributor-name
  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-align: bottom;

.contributor-posts-link:hover 
  color: #000;
  text-decoration: none;

And that should be it. Thanks Twenty Fourteen!

5. Customized Archive Page

Twenty Twelve comes with its own template for archive pages. It will jump into action, for example, when you attempt to view all past posts from a certain category.

However, I want something a little more like what Problogger38 has done: a page that lets people discover additional content on my site in several different ways. That, again, is done with a page template.

Staying with our mixed template from before, we will add the following below the the_content() call:

<div class="archive-search-form"><?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>Archives by Subject:</h2>
<ul> <?php wp_list_categories('title_li='); ?></ul>

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

.archive-search-form 
  padding: 10px 0;
  text-align: center;

And the result should look a little bit like this:

The custom archive page.39
The custom archive page. (View large version40)

For completion’s sake, here is the entire file:

<?php
/**
 * Template Name: Custom archive template
 *
 */

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 class="entry-title"><?php the_title(); ?></h1>
      </header>

      <div class="entry-content">
        <?php the_content(); ?>
      
        <div class="archive-search-form"><?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>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 page!

WordPress Page Templates In A Nutshell

On your way to mastering WordPress, learning to use page templates is an important step. They can 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’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 up to you and what you are trying to achieve. Start off small and work your way up to more complicated things. It won’t be long before every part of your WordPress website will answesr to your every call.

Do you have experience using page templates in WordPress? What other use cases can you add to the list? Any important details to add? Please tell us about it in the comments.

Image credit: Kevin Phillips41

(og, ml)

Footnotes

  1. 1 http://codex.wordpress.org
  2. 2 https://addons.mozilla.org/en-us/firefox/addon/firebug/
  3. 3 http://codex.wordpress.org/Template_Hierarchy#The_Template_Hierarchy_In_Detail
  4. 4 http://wphierarchy.com/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-wp-template-hierarchy-opt.jpg
  6. 6 http://codex.wordpress.org/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/05/01-wp-template-hierarchy-opt.jpg
  8. 8 http://codex.wordpress.org/Conditional_Tags
  9. 9 http://codex.wordpress.org/Conditional_Tags
  10. 10 http://www.themelab.com/ultimate-guide-wordpress-conditional-tags/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-page-attributes-opt.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/05/02-page-attributes-opt.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-choose-page-template-manually-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-choose-page-template-manually-opt.jpg
  15. 15 https://wordpress.org/plugins/what-the-file/
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-default-template-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-default-template-opt.jpg
  18. 18 http://codex.wordpress.org/Page_Templates#Filenames
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-custom-wp-page-template-without-sidebar-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-custom-wp-page-template-without-sidebar-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-custom-full-width-wp-page-template-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-custom-full-width-wp-page-template-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-404-page-template-widgets-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-404-page-template-widgets-opt.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-customized-404-error-page-via-template-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-customized-404-error-page-via-template-opt.jpg
  27. 27 https://wordpress.org/plugins/types/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-portfolio-page-without-custom-page-template-opt.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-portfolio-page-without-custom-page-template-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-custom-portfolio-template-without-styling-opt.jpg
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-custom-portfolio-template-without-styling-opt.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-custom-portfolio-template-including-styling-opt.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-custom-portfolio-template-including-styling-opt.jpg
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-custom-contributor-page-opt.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/05/12-custom-contributor-page-opt.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-custom-contributor-page-without-styling-opt.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/05/13-custom-contributor-page-without-styling-opt.jpg
  38. 38 http://www.problogger.net/archives/
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-custom-archive-page-opt.jpg
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/05/14-custom-archive-page-opt.jpg
  41. 41 http://pixabay.com/en/users/kpgolfpro-27707/

The post A Detailed Guide To WordPress Custom Page Templates appeared first on Smashing Magazine.

Read article here:

A Detailed Guide To WordPress Custom Page Templates

How To Create An Advanced Photoshop Animation

While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.
Even though Photoshop is still a long way off from being able to create the high-end and cinematic animations of such programs as After Effects, it still has enough power to create complex animation — which is especially useful if you don’t want to spend time learning a new application.

Original source: 

How To Create An Advanced Photoshop Animation

Learn to Create Emotionally Engaging Landing Pages with These 4 Examples

Emotional Targeting

40% of web users will leave a page if it takes more than three seconds to load. But they’re not just waiting for a page to load — they’re waiting for you to get to the point. Three seconds to make an impression before they hit “Back”
in their browser.

Of course, it’s not enough for a landing page to load. A landing page has to persuade, and it has to do so immediately. And there’s no better way to do that than to connect with your visitor on an emotional level.

In a recent Unwebinar, Talia Wolf of Conversioner made the case for the value of emotional targeting by examining what is perhaps the most emotional industry of all: dating services. It’s an incredibly crowded field, with each service vying to cut out its own slice of the market by providing unique value.

In the process, she explored how you can emotionally target your audience by helping them envision a better version of themselves (due to your product, of course!).

Read on for Talia’s expert insights on the emotional resonance of three of the world’s biggest dating services, and takeaways from an A/B test of her own.

Dating service #1: match.com

Matchcom

Talia praised Match.com for the combination of already-filled form elements and a call to action that actually promises photos of potential partners. Combined, these two elements are persuasive and make it feel easy to get started.

But the kind words ended there. In particular, Talia slammed Match.com for their poor use of photography. For starters, they miss the opportunity to use the images to actually assist in the conversion.

One of the smart ways you can use photographs of people on your landing pages is as directional cues, with them looking or subtly gesturing in the direction of your call to action. But on Match.com’s page, they serve to distract from the CTA. This could’ve been avoided by heeding Talia’s advice:

60% of our brain is geared towards visual context, so the first thing we see is visual. It’s important to use the images on your page in order to guide user attention.

The other problem is that these photos are stock photos. They look fake, and there are good odds that a visitor could’ve seen the photo elsewhere before. That’s a deal-breaker if you’re trying to seem unique (or even credible).

The images on your page are not mere ornamentation. They are an integral part of your page’s value proposition and its content structure, and Match.com fails that test on both fronts.


Use images on your page to guide visitors to the call to action.
Click To Tweet


Dating service #2: Zoosk

zoosk

Next, Talia looked at Zoosk’s page, and praised their compelling value proposition — “get smart about online dating” — for connecting with the prospect’s desire to be intelligent:

I like this angle. If you use Zoosk, you will feel smarter than others.

Unlike Match.com’s “#1 in dates, relationships, and marriages” headline, which is all about Match.com and the quality of the service it offers, Zoosk’s headline is actually about the user themselves.

Unfortunately, Zoosk fails in the imagery department in much the same way Match.com does. Pretty much all of the imagery is of software — not something that’s likely to resonate emotionally with someone who is looking for love. And as Talia pointed out, it doesn’t really mesh with their value proposition:

I don’t get the sense that this will make me smarter or give me smarter matchmaking.


Use your value proposition to make your reader feel empowered.
Click To Tweet


Dating service #3: Beautiful People

BeautifulPeople

In case the name didn’t make it clear, Beautiful People is “online dating for beautiful people only.”

This is pretty exclusionary, but it’s also a compelling proposition: if you use the service, you must be beautiful, and you’re guaranteed to only meet people who deserve to bask in your radiance. As Talia notes, this value proposition is designed to make you feel better about yourself:

You deserve better. You deserve to find the best looking people.

Physical attraction is definitely the cornerstone of a service like this, and Beautiful People supports this message with their use intimate imagery.

Unfortunately, the copy weakens what could’ve been a very persuasive offer. This page features the dreaded “welcome to domain.com,” a type of fluff message that usability expert Steve Krug refers to as happy talk in his book Don’t Make Me Think:

If you’re not sure whether something is happy talk, there’s one sure-fire test: if you listen very closely while you’re reading it, you can actually hear a tiny voice in the back of your head saying ‘Blah blah blah blah blah….’

Worse, the call to action eschews the sexiness of the rest of the page, opting for the utterly libido-killing “create free membership here.” Yes! That’s why I’m here! I’m ready to embark on a steamy adventure toward membership.


Make sure the tone of your call to action matches the rest of your page.
Click To Tweet


Talia’s A/B testing case study for an unnamed dating service

Emotion Case Study

For her final example, Talia shared a case study for one of the dating sites she optimized herself. The initial example has some good elements already: the couple’s gaze draws attention to the call to action, the form is short and a testimonial provides some social proof. But it doesn’t make a compelling offer, nor does it engage the visitor’s emotions.

Talia tested two variations of the page.

Variant 1

Case Study Variation

The first variant was similar to the original page, but there were some changes made to connect with the visitor on a more personal level. The addition of a headline — “find your perfect match” — is a small but effective way to let the visitor imagine the positive impact of the service.

This variant keeps directing attention to the call to action using the woman’s gaze, but opts to have the man facing forward, using the power of eye contact to instill a sense of trust and reliability.

The biggest change, though, was the addition of a powerful background image. Adding a locale to the image allows the user to imagine themselves not just in a hypothetical relationship, but in an actual, physical situation. The colors are not coincidental, either; as Talia’s own research on color psychology illustrates, green instills a feeling of freshness and renewal, whereas blue is the quintessential color of trust.

This variant lead to a 24% increase in signups and a 48% increase in paying customers. Certainly a solid win, but could it be improved?

Variant 2

Case Study Variant 2

The second variant sacrifices the intimacy of the initial imagery for an increase in variety by opting to show dozens of potential candidates. But there’s something even more interesting at play here.

These headshots have been arranged in such a way as to subtly guide a visitor’s eyes to the form at the center of the page. Look closely; while there are some exceptions, most of the people shown are either tilted slightly towards or glancing directly at the form, even as most of them maintain direct eye contact with the viewer.

What’s perhaps more interesting is that these are all actual members of the service, and each photo has been edited to have a crisp white backdrop and a slightly blue tint, which contrasts against the pink form.

The results speak for themselves: a 38% increase in signups, and a whopping 304% increase in paying customers, proving that this page did its job in attracting the exact right kind of customer.

It’s not about you or your product

Trying to appeal to the emotions of consumers is something that marketers have grappled with understanding pretty much since the advent of marketing. But as Talia notes, the landscape has changed:

Emotion in advertising and marketing has been done for years, but in the offline world.
[…] But they can’t track it. Online, you can combine and track emotion and user experience.

Not only can we now measure the performance of our tactics, we can segment our audiences into smaller groups and create campaigns and landing pages that speak directly to them.

No matter what kind of product you sell, the story that will resonate with your customers is not about your product; it’s about the person your customer wants to be, and how your product can help them realize that dream.

Learn more about emotional targeting by checking out the complete Unwebinar recording here.


Link:  

Learn to Create Emotionally Engaging Landing Pages with These 4 Examples

Creating Advanced Animations In Photoshop

While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.

Even though Photoshop is still a long way off from being able to create the high-end and cinematic animations of such programs as After Effects, it still has enough power to create complex animation — which is especially useful if you don’t want to spend time learning a new application.

In this article, I will share several advanced techniques to help you create complex animations. We’ll look at the Timeline panel and the different properties that can be animated. We’ll also explore the roles that adjustment layers, filters and smart objects can have in animation (and how to combine all three for some amazing effects). Because the topics and techniques in this article are advanced, a moderate level of Photoshop knowledge is expected.

Overview Of Timeline Panel

Opening the Timeline panel (“Window” → “Timeline”) allows you to select between two types of timelines: video and frame. The frame timeline is for frame-by-frame animation and can be very limiting. It generally works by converting the layers in your Layers panel to individual frames. I won’t go into any more detail on this timeline; I want to focus on the video timeline.

Photoshop has two timelines for you to choose from.1
Photoshop has two timelines for you to choose from. (View large version2)

Video Timeline

The video timeline allows for keyframe animation — which is an animation process in which you define key points of animation along a timeline and Photoshop will interpret the in-between frames to create a cohesive animation. Let’s go ahead and create a very simple animation to see how this works.

The Video Timeline panel shows a layer (1) with layer properties (2). The timeline shows the Current Time Indicator (3) and existing keyframes (4).3
The video timeline panel shows a layer (1) with layer properties (2). The timeline shows the current time indicator (3) and existing keyframes (4). (View large version4)

As you probably noticed from the image above, the video timeline shows a representation of layers in the Layers panel. Each layer in the timeline has a dropdown panel that exposes the layer properties (these are the properties that can be animated). To animate a layer property, simply click the stopwatch icon, which enables keyframe animation. Notice that a keyframe is automatically placed at the current time indicator.

The stopwatch icon has been selected for the Position property. A keyframe is automatically added to the timeline.5
The stopwatch icon has been selected for the “Position” property. A keyframe is automatically added to the timeline. (View large version6)

Move the current time indicator to another point in the timeline and reposition the layer. Again, another keyframe will automatically be added to the timeline.

Moving the layer automatically adds a keyframe at the current time indicator's location on the timeline.7
Moving the layer automatically adds a keyframe at the current time indicator’s location in the timeline. (View large version8)

Playing back the animation shows how the object on the canvas moves from one position to the next.


Photoshop automatically creates the animation in between the keyframes.

Layer Types

Now that we have a good idea of how the animation process works in Photoshop, let’s take a closer look at the common layer types that can be animated. Because different layer types have different properties to animate, pay attention to which layer types are being used.

The standard (pixel) layer is a layer that contains pixel information. This is the most common (and most basic) layer in Photoshop. Layer properties include:

  • position,
  • opacity,
  • styles.
A standard layer in the timeline with the layer properties exposed.
A standard layer in the timeline with the layer properties exposed.

Adding a layer mask or vector mask to any layer will introduce additional properties specific to that mask. Layer properties that are added to the layer’s existing properties include:

  • layer or vector mask position
  • layer or vector mask enabling
A layer with a layer mask in the timeline
A layer with a layer mask in the timeline.

A layer with a vector mask in the timeline
A layer with a vector mask in the timeline.

A shape layer contains a shape (whether from one of the shape tools or the Pen tool) or a line segment. Because shapes and line segments are built with vector mask information, those mask properties will appear in addition to the other layer properties. Layer properties include:

  • position,
  • opacity,
  • styles,
  • vector mask position,
  • vector mask enabling.
A shape layer in the timeline with the layer properties exposed
A shape layer in the timeline with the layer properties exposed.

A text layer contains editable text. If text has been rasterized, then the layer will no longer be a text layer, but rather will be a standard layer with pixel information. Layer properties include:

  • transform,
  • opacity,
  • styles,
  • text warp.
A text layer in the timeline with the layer properties exposed
A text layer in the timeline with the layer properties exposed.

A smart object can contain any one or combination of the above layer types. A smart object acts like a wrapper for any layer, preserving the original layer while using a new set of properties. These properties include:

  • transform,
  • opacity,
  • styles.
A text layer in the timeline with the layer properties exposed
A text layer in the timeline with the layer properties exposed.

A word of warning when using smart objects. Because a smart object preserves the original quality of the layer or the set of layers it contains, it can be scaled and rescaled without losing quality. However, it cannot be scaled any larger than the size of the original layer it contains. Doing so would cause the smart object to lose quality.

At this point, I want to mention two other layer types — a video layer and a 3D layer. Both of these layers are completely unique from the other layer types mentioned. The video layer is actually a layer group that contains its own set of properties, while the 3D layer — besides containing a unique set of properties — is manipulated in an environment entirely separate from the other layers, adding to the level of complexity. Due to the uniqueness of these two layer types, I will not go into detail here. You can see how both layers are represented in the timeline below:

A video layer group in the timeline with the layer properties exposed
A video layer group in the timeline with the layer properties exposed.

A 3D layer in the timeline with the layer properties exposed
A 3D layer in the timeline with the layer properties exposed.

I encourage you to explore these two layer types on your own. For the rest of this article, I will be focusing only on the traditional layer types, excluding video and 3D.

Layer Properties

Now that we have a grasp of the different layer types, let’s examine the different properties that we are able to animate. Knowing how each property works is important to understanding their limitations and how to get around them. Let’s look at the common animation properties.

The Position property allows for movement along the X- and Y-axis. Manipulate the position of an object by using the Move Tool.


The object’s Position property was keyframed to move the ball back and forth along the x axis.

Opacity allows you to keyframe the opacity of a layer. The Opacity control can be found in the Layers panel.


The object’s opacity was keyframed at 100% and 0% to create a fading animation.

The Style property allows you to keyframe the layer styles of a layer. Access the layer styles by double-clicking a layer in the Layers panel.


The object’s layer styles (Bevel & Emboss, Color Overlay, and Drop Shadow) were all keyframed to create a pulsing animation.

The layer mask or vector mask position keyframes the x and y positions of each mask. It works best when the mask is not linked to the layer.


The mask’s position is keyframed to scrub across the layer, revealing the background layer.

Enabling or disabling a layer or vector mask is also possible. To enable or disable a layer mask, go to “Layer” → “Layer Mask” and select either “Enable” or “Disable.” For vector masks, go to “Layer” → “Vector Mask.” Alternatively, you can “Shift + Click” the mask in the Layers panel to toggle on or off.


The mask is keyframed to be enabled, then disabled after a short time, causing a reveal.

Specific to text layers, the Text Warp property allows you to keyframe any text warp applied to a text layer. You can access a list of text warp effects by going to “Type” → “Warp Text.”


A Flag warp was applied to the text and keyframed to create a warping animation.

The Transform property allows you to keyframe transformation to a layer. Various transformations (such as Rotate and Scale) can be accessed by going to “Edit” → “Transform,” or by pressing Control + T to enter Free Transform mode.


The object’s Scale and Rotation are keyframed to create a spinning star that grows and shrinks.

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-01-overview-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-01-overview-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-02-timeline-1-opt.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-02-timeline-1-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-03-timeline-2-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-03-timeline-2-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-04-timeline-3-opt.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-04-timeline-3-opt.jpg

The post Creating Advanced Animations In Photoshop appeared first on Smashing Magazine.

View original post here – 

Creating Advanced Animations In Photoshop

Split Testing 101: A Crash Course in Optimization

Growing up, I always wanted to be a professional split tester. Although, I thought this meant I’d be eating banana splits all day. Split tests in the business world involve a lot less ice cream, but a lot more profit. I’d say they about even out. If you’re looking to improve your profits per lead […]

The post Split Testing 101: A Crash Course in Optimization appeared first on The Daily Egg.

Link: 

Split Testing 101: A Crash Course in Optimization

The Impact of Headlines and Tone of Voice on Conversion

Concepts like “building trust” and “presenting a consistent brand” don’t get as much attention as they should. Actually, let’s rephrase that. They get lots of attention but—while many marketers know they need to take these things into account—they’re not exactly sure how or why. It’s easy to measure the ROI of an AdWords campaign or […]

The post The Impact of Headlines and Tone of Voice on Conversion appeared first on The Daily Egg.

Original article: 

The Impact of Headlines and Tone of Voice on Conversion

A Legendary Copywriting Formula 4 U [PODCAST]

blog-cover
This simple formula will help you delight readers and attract qualified customers… every time. Image by J. Pellgen via Flickr.

In this episode of the Call to Action podcast, we explore how to write amazing landing page copy.

First, we tell a story of what happened when we made our “About Us” page copy a little bit too much… about us.

Then, Unbounce’s Dan Levy talks to direct response copywriter Marc Aarons about embarrassing writing habits and an easy-to-remember landing page copywriting formula for making sure you’re simultaneously delighting readers and attracting qualified customers.

Listen to the podcast


Listen on iTunes.
Prefer Stitcher? We got your back.

Mentioned in the podcast

Read the transcript

In this episode: Dan Levy, Unbounce’s Content Strategist, interviews direct response copywriter, Marc Aarons.

Dan Levy: Copywriting is kind of a tough thing to talk about because it, on the surface, seems kind of personal and specific to each company and their audience. Can it really be boiled down to a formula?

Marc Aarons: Yes and no. So it’s such a great question because formulas – I like to think of formulas almost like frameworks. They get us started, and they get us very close to the target. But at the end of the day, you’re always going to want to customize your entire sales message, your landing page, your sales page, video sales letters – whichever advertisement you’re actually creating for your audience. You always want to customize it specifically for them. We always start with the audience.

Dan Levy: So tell us about the 4 U Formula. How did that come about, and what are those 4 U’s anyway?

Marc Aarons: The 4 U Formula was actually developed by Michael Masterson, and he is best known as a serial entrepreneur. He is also a direct response copywriter, and he helped grow Agora Inc. – I think their financial division – from somewhere in the single digit millions to a nine-figure company. And he developed a number of techniques and innovative strategies that are now taught through the American Writers and Artists Incorporated, one of them being the 4 U Formula. And the 4 U Formula really breaks down into four questions. Is this useful? Is this unique? Is this urgent? And is it ultra-specific to our audience?

Dan Levy: Right. I want to get a little more specific there. But first, this post is about using the 4 U Formula on your landing pages in particular. And you say to either pick your headline or your subheadline or your benefits, which are usually in the bullet points of your landing page, when going about using this formula on your pages. Is there a particular one that you should start with?

Marc Aarons: So the beautiful thing about writing copy for landing pages is every single direct response copywriter that I’ve spoken to, they start in one of two places. Either they start in the body copy, which here, would be the benefits. Or they start with the headline/subheadline. So it’s either an inside/out or outside/in approach, if you will.

Dan Levy: Okay, so either start with the first thing you see on the page, or start with – well, actually, how about the call to action button? Where does that come in? Because I was going to say that’s sort of what the page is culminating toward, right?

Marc Aarons: Right. You know, the call to action, I would personally leave that to be the very last thing that I actually write because in the writing process, it’s like Anne Lamott says in Bird by Bird, “You have characters in your story. And as you write your story, they’re going to involve because you’re still getting to know your characters.” And writing a landing page or a sales page or even a video sales letter, it’s very much the same. You’re going to be learning a bit more about your audience and the message that you want to convey as you write the first draft, then re-edit the first draft to get to your second and third. And once you’ve got to your third, once you’ve got the final core message to offer the benefits, then the call to action button – and for some copywriters, the headline – is almost like the icing on the cake.

Dan Levy: That’s really interesting. The copywriter Joanna Wiebe talks about starting with your page goal, the call to action button, and working backwards. But here what you’re saying is as the page evolves, sometimes that call to action button might change.

Marc Aarons: Yes, absolutely. It can change. However, we always start with the plan, and the purpose of the plan is not just to stick to the plan, but to allow you to deviate from the plan if a better plan starts to make itself available to you.

Dan Levy: That’s what you were saying before. A formula is a great place to start, but you have to remain flexible.

Marc Aarons: Yes.

Dan Levy: So the goal here is to nail at least three out of those four U’s. But if you don’t, how would you go about revising that copy?

Marc Aarons: This is also a great question because it brings us right back to the heart of every single landing page and sales message: who is our audience? What is it that they want to accomplish? So if we’re going to ask ourselves – say, for example, we want to make a headline more useful. The question that we’re asking is: does this provide value to the visitor? Or, does it imply that there’s going to be value found if they actually click through and opt in or purchase something? So we start with that question, and then we contextualize it for the audience.

Dan Levy: Okay. Before we go into some examples of this, I’d love to hear a little bit more about your writing process. Do you have any specific techniques for getting started writing a landing page, like templates or a spreadsheet filled with notes and ideas?

Marc Aarons: I love this one because my writing process is something that I’ve refined for maybe five plus years now, and it always starts with research, and there are actually three kinds of research. And this is getting, probably, a little bit deeper than we need or –

Dan Levy: No, I love it. Let’s get into the weeds here.

Marc Aarons: Oh, cool, perfect.

Dan Levy: Let’s get nerdy.

Marc Aarons: I totally love this part. So we have three kinds of research. You have customer research, you have product research and you have competitor research. And the purpose of customer research is to understand what it is that your audience finds most valuable. What are their burning pains? What are their hopes, fears and dreams? What are their wants and aspirations?

And from there, we get into product research. We are going to look at our product, or even maybe our service, to then find out, “Okay, what’s the unique selling proposition, what differentiates us from everybody else that’s out there? And how does our product specifically address the wants and the fears and the frustrations that our customers are going through that we uncovered in our customer research?”

The third kind of research is competitive analysis, or competitor research. Then we look at everyone else, maybe even just the top three competitors that are out there, to see what it is that they’re offering, what their unique selling propositions are. Because once we know what else our customers are looking at, then we know how to differentiate ourselves from the competition and everything else that’s out there.

Dan Levy: Right. So once you’ve done all this research, how do you collect that into one place and then go about turning that into great copy?

Marc Aarons: Oh, so that’s also a great question. I like to use just one document to brain dump everything in, and it’s almost like writing the first draft. The research – you want to separate your research process into collecting and then organizing your data. And if you’re doing it for a client, then there’s also the reporting process as well where you’re going to make it legible or understandable for your client. So the first step, you go through the research process, you collect everything, and you put it into those three different sections – the customer, the product research and the competitor research.

Dan Levy: Is that like an Excel spreadsheet or Google doc or something like that?

Marc Aarons: Great question – Google doc. You can use an Excel spreadsheet. However, I actually use a combination of both. I use Google spreadsheets as well as Google Docs. Google spreadsheets, especially, if I’m going to be going through a lot of blogs and blog comments and reviewing a lot of books on Amazon and things like that because that just keeps it neatly in one place. Then I’ll actually go into a Google document to create the narrative because I need to summarize it to about just one to two pages, which allows me to glance at it as I’m actually writing so I don’t get stuck in the writing process.

Dan Levy: Yeah, I feel like we all have these secretly shameful, messy documents where we dump all our ideas, and then we have to go about cleaning that up and putting it into some sort of narrative for our client or just to make some sense out of it.

Marc Aarons: Always. I definitely get messy in my process as well. And then afterwards, to make myself feel like a good human being, I’ll go clean it up.

Dan Levy: Totally. In your post, you take a close look at a landing page by Noah Kagan for an email marketing course that he was involved with. So the page passes the 4 U test, but you suggest that he could actually improve on one of his 4 U’s by adding more urgency. Can you break this one down for us?

Marc Aarons: Yeah, sure thing. He did many things there as well, but for us to up the urgency factor, we could show through social proof how many other people are actually taking this course as well. So if we say something like, “Join 5,000 other sharp marketers,” or whatever the specific number is right now, then that may trigger someone who’s reading it to say, “Oh, wow. Everyone else is doing this, and they’re getting ahead of me, and I don’t want to get left behind. So let me go ahead and opt in right now before all of my other competitors and everybody else gets the jump on this.”

Dan Levy: You also say later in the post, though, that urgency can actually backfire sometimes. How so?

Marc Aarons: Totally. So if you push too hard – and this comes right back to knowing specifically who it is that you’re talking to – because if you push the envelope too hard, it’s almost like the used car salesman who’s trying to get you to buy, buy, buy, buy now. It is like, “Whoa, why are you trying to push this so hard?” Maybe it actually isn’t that good, which totally goes into this whole deeper thing of demand and supply and all that kind of stuff. But if you push the urgency factor too high, it will actually repel the person that you’re trying to target, and it may actually attract the wrong kind of person because if you use too much urgency, then you’re going to be attracting people who act on impulse and who respond to that. And you’ll have to continue to sell to them because that’s the customer that you now have in your sales funnel.

Dan Levy: There’s a carpet store that’s on my corner that’s been going out of business, I think for six or seven years now. So it’s like, “Act fast,” and I think a lot of customers can see through that. But that’s an interesting point, too, about attracting the wrong kind of customer on unqualified leads or customers that are ultimately going to be a drain on your resources – maybe on the customer success side.

Marc Aarons: Absolutely.

Dan Levy: You mentioned a statistic that Brian Clark of Copyblogger and others have written about, which is that 95 percent of the most effective headlines from the early years of magazine advertising were actually eight words or fewer. Eight words aren’t that much, really, but are eight words really enough to be ultra-specific about a complex offer?

Marc Aarons: The answer is, again, yes and no. It depends on the offer so I actually want to give both examples. So in the example where it’s “yes,” then sometimes it’s actually possible to really boil it down and really just get the core benefit or the core driving question down. And speaking of core driving question, that gets a little bit into the “no” part because the real purpose of any headline and subheadline is to just get them to continue reading the copy. That’s it. You just want them to read on. That is the whole purpose. And once they read the first line, the purpose of the first line is to get them to read the second line, and so on and so forth until they get to the call to action. And then finally, the whole purpose of all of that buildup is to then get them to click that button, opt in, or make a purchase.

Dan Levy: Right. To go back to the yes and no thing and your post – with the caveat that of course all of this needs to actually be tested on your landing page. But you say if all else fails, you could seduce them with empathy. Recently, I actually spoke to Andy Crestodina about approaching your content marketing with empathy, but what does empathy mean in regards to copywriting?

Marc Aarons: So this is a great question, and I actually think of Brené Brown and her Ted talk on empathy, which if everyone hasn’t gotten a chance to look at it, I would highly recommend it. But what she says is empathy is feeling the emotions that someone else is feeling, and it can actually be taught and practiced. And the way that comes into copywriting is the best sales pages of – I was actually recently at a nine figure direct response company just earlier on this weekend, and everybody agreed that as you’re writing the copy, the more you can visualize one single person that you’re writing this letter to is the better the copy comes out. Because that’s exactly what it is – it’s writing a letter. So if you can have empathy for the single person who is the customer avatar of your audience, then you’re headlines get stronger, your subheadlines get stronger, your calls to actions get stronger, and your bullets and benefits also get stronger.

Dan Levy: I have to admit that as a writer myself, sometimes the idea of applying formulas to the writing process feels – I don’t know. I’m not going to say soulless, but in some ways, the opposite of a more human-centered approach. You seem to be suggesting that this kind of framework can actually help you be more empathetic, which is interesting.

Marc Aarons: Yes. It’s so funny because formulas I kind of see as boundaries. They’re almost like the walls of a house. We know that when we walk into a house that we’re safe. We’re home. Those boundaries allow us the freedom to express ourselves within this safe space. So in some ways its structure can provide freedom.

Dan Levy: Yeah, that’s the way it is with any parts of the creative process. When you’re given just a blank page and told, “Free write,” it’s super, super daunting. But when you’re given some sort of boundary, some sort of guideline, then all of a sudden, it kind of opens that creative part of your mind.

Marc Aarons: Absolutely.

Dan Levy: Great. Thank you so much for taking the time.

Marc Aarons: Likewise.

Transcript by GMR Transcription


Link:

A Legendary Copywriting Formula 4 U [PODCAST]

Responsive Typography With Sass Maps

Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.

Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.

If you’ve tried to tackle responsive type, this may look familiar:

p  font-size: 15px; 

@media screen and (min-width: 480px) 
  p  font-size: 16px; 
}
@media screen and (min-width: 640px) 
  p  font-size: 17px; 
}
@media screen and (min-width: 1024px) 
  p  font-size: 19px; 
}

Sass variables are great for making values reusable throughout a project, but managing them for responsive font sizes easily becomes a mess.

$p-font-size-mobile : 15px;
$p-font-size-small  : 16px;
$p-font-size-medium : 17px;
$p-font-size-large  : 19px;

$h1-font-size-mobile: 28px;
$h1-font-size-small : 31px;
$h1-font-size-medium: 33px;
$h1-font-size-large : 36px;

// I think you get the point…

This is where Sass maps1 and loops are powerful: They’ve helped me manage z-index values2, colors3 and, as you’ll see in a moment, font sizes.

Organizing Font Sizes With Sass Maps

Let’s start by creating a Sass map with key-value pairs — breakpoints as keys and font sizes as corresponding values.

$p-font-sizes: (
  null  : 15px,
  480px : 16px,
  640px : 17px,
  1024px: 19px
);

With mobile-first in mind, we see that the key null represents the default font size (not in a media query), and breakpoints are in ascending order.

Next, the mixin, which iterates through a Sass map and generates the appropriate media queries.

@mixin font-size($fs-map) 
  @each $fs-breakpoint, $fs-font-size in $fs-map 
    @if $fs-breakpoint == null 
      font-size: $fs-font-size;
    
    @else 
      @media screen and (min-width: $fs-breakpoint) 
        font-size: $fs-font-size;
      
    }
  }
}

Note: It’s worth mentioning that this mixin, along with the ones to follow, feature some basic programming logic. Sass, with the help of SassScript4 (a set of extensions that comes baked in), makes basic programming constructs possible, like if/else statements, each loops and a ton more. I encourage you to take some time to read through the documentation5. Sass’ “power features” will introduce you to a new dimension of things you can do with Sass.

We’ll then use the mixin for paragraphs:

p 
  @include font-size($p-font-sizes);

… which results in the following CSS:

p  font-size: 15px; 

@media screen and (min-width: 480px) 
  p  font-size: 16px; 
}
@media screen and (min-width: 640px) 
  p  font-size: 17px; 
}
@media screen and (min-width: 1024px) 
  p  font-size: 19px; 
}

Managing and keeping track of font sizes for elements becomes a whole lot easier! With every new element, create a map and call the mixin in the appropriate selector.

$h1-font-sizes: (
  null  : 28px
  480px : 31px,
  640px : 33px,
  1024px: 36px
);

h1 
  @include font-size($h1-font-sizes);

Keep font sizes consistent for various elements:

p, ul, ol 
  @include font-size($p-font-sizes);

Solving Breakpoint Fragmentation

But wait! What if we decide that we want the font size of ps to be 17 pixels and of h1s to be 33 pixels at a breakpoint of 700 pixels, instead of 640 pixels? With the solution above, that would require manually changing every instance of 640px. By trying to solve one problem, we’ve inadvertently created another: breakpoint fragmentation.

If we can manage font sizes in Sass maps, surely we can do the same with breakpoints, right? Exactly!

Let’s create a map for common breakpoints and assign each value an appropriate name. We’ll also change the font-sizes map a bit by using the breakpoint names we assigned in $breakpoints to establish a relationship between the breakpoints and font-sizes maps.

$breakpoints: (
  small : 480px,
  medium: 700px, // Previously 640px
  large : 1024px
);

$p-font-sizes: (
  null  : 15px,
  small : 16px,
  medium: 17px,
  large : 19px
);

$h1-font-sizes: (
  null  : 28px
  small : 31px,
  medium: 33px,
  large : 36px
);

The last step is to tweak the mixin a bit so that when it iterates through the font-sizes map, it’ll use the breakpoint name to get the appropriate value from $breakpoints before generating the media query.

@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) 
  @each $fs-breakpoint, $fs-font-size in $fs-map 
    @if $fs-breakpoint == null 
      font-size: $fs-font-size;
    
    @else 
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) 
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      
      @media screen and (min-width: $fs-breakpoint) 
        font-size: $fs-font-size;
      
    }
  }
}

Note: The mixin’s default breakpoints map is $breakpoints; if your breakpoints variable’s name is different, be sure to change it in the second argument of line 1.

Voila! Now, what if we want an element to have a font size for a custom breakpoint that doesn’t exist in $breakpoints? In the font-sizes map, simply drop in the breakpoint value instead of a name as the key, and the mixin will do the work for you:

$p-font-sizes: (
  null  : 15px,
  small : 16px,
  medium: 17px,
  900px : 18px,
  large : 19px,
  1440px: 20px,
);

p 
  @include font-size($p-font-sizes);

The magic happens in the mixin thanks to Sass’ map-has-key function6. It checks to see whether the key name exists in $breakpoints: If it exists, it’ll use the value of the key; if not, it’ll assume the key is a custom value and use that instead when generating the media query.

p  font-size: 15px; 

@media screen and (min-width: 480px) 
  p  font-size: 16px; 
}
@media screen and (min-width: 700px) 
  p  font-size: 17px; 
}
@media screen and (min-width: 900px) 
  p  font-size: 18px; 
}
@media screen and (min-width: 1024px) 
  p  font-size: 19px; 
}
@media screen and (min-width: 1440px) 
  p  font-size: 20px; 
}

Improving Vertical Rhythm With Line Height

Line height is also an important part of achieving consistent vertical rhythm. So, without going overboard, let’s include line height in the solution.

Extend the font-sizes map by including both font size and line height in a list as the value of the desired key:

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px
);

$p-font-sizes: (
  null  : (15px, 1.3),
  small : 16px,
  medium: (17px, 1.4),
  900px : 18px,
  large : (19px, 1.45),
  1440px: 20px,
);

Note: Although line-height values can be defined using any valid CSS unit (percentages, pixels, ems, etc.), “unitless” values are recommended7 and preferred8 in order to avoid unexpected results due to inheritance.

We then need to modify the mixin to include line height when generating the CSS.

@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) 
  @each $fs-breakpoint, $fs-font-size in $fs-map 
    @if $fs-breakpoint == null 
      @include make-font-size($fs-font-size);
    
    @else 
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) 
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      
      @media screen and (min-width: $fs-breakpoint) 
        @include make-font-size($fs-font-size);
      
    }
  }
}

// Utility function for mixin font-size
@mixin make-font-size($fs-font-size) 
  // If $fs-font-size is a list, include
  // both font-size and line-height
  @if type-of($fs-font-size) == "list" 
    font-size: nth($fs-font-size, 1);
    @if (length($fs-font-size) > 1) 
      line-height: nth($fs-font-size, 2);
    
  }
  @else 
    font-size: $fs-font-size;
  
}

The mixin checks to see whether the value of the key in the font-sizes map is a list as opposed to a font-size value. If it’s a list, then it gets the correct value from the list by index value, with the help of the nth function9. It assumes that the first value is the font size and the second is the line height. Let’s see it in action:

p 
  @include font-size($p-font-sizes);

And here’s the resulting CSS:

p  font-size: 15px; line-height: 1.3; 

@media screen and (min-width: 480px) 
  p  font-size: 16px; 
}
@media screen and (min-width: 700px) 
  p  font-size: 17px; line-height: 1.4; 
}
@media screen and (min-width: 900px) 
  p  font-size: 18px; 
}
@media screen and (min-width: 1024px) 
  p  font-size: 19px; line-height: 1.45; 
}
@media screen and (min-width: 1440px) 
  p  font-size: 20px; 
}

This final solution is easily extensible to accommodate a host of other attributes, such as font weights, margins, etc. The key is to modify the make-font-size utility mixin and use the nth function to get the appropriate value from the list.

Conclusion

There are various ways to approach responsive typography and consistent vertical rhythm, and they are not limited to my suggestion. However, I find that this works for me more times than not.

Using this mixin will likely generate duplicate media queries in your compiled CSS. There’s been a lot of discussion about duplicate media queries versus grouped media queries, using @extend instead of mixins10, and performance and file size; however, tests have concluded that “the difference, while ugly, is minimal at worst, essentially non-existent at best11.”

I also realize that my solution is not robust (it’s not designed to handle media-query ranges, max-width or viewport orientation). Such features can be implemented in the mixin (my personal version also converts pixel values to ems), but for complex media queries, I prefer to write by hand. Don’t forget that you can use the map-get function12 to retrieve values from existing maps.

Alternatives

Viewport units13 (vh, vw, vmin and vmax) can also be used to create responsive typography:


An example of viewport units in action. One viewport unit = 1% of the viewport’s width or height. (For a 1000-pixel-wide viewport, 1vw = 100px; for a 500-pixel-high viewport, 1vh = 5px.)

For example, viewport-width units can be used to build fluid hero text14. However, because the text will be scaled to the width or height of the viewport (as opposed to the size of the content area of the page) and because CSS currently lacks min and max values for the font-size property, viewport units aren’t suitable for body text: No matter what value you choose, body text sized in viewport units will always end up being too large or too small at extreme browser sizes, necessitating intervention by media query.

FitText.js15 does a similar job, with a focus on sizing text so that it always rests on a single line or measure. SVG techniques can also be used to achieve a similar effect.

Finally, Erik van Blokland16 has been working on some very exciting possibilities for responsive typography17, such as letterforms that actually alter with viewport size to preserve space, rather than simply get smaller.

Further Resources

Modular Scale18 is a great tool to achieve responsive typography, and Sara Soueidan has a great article on responsive typography techniques19.

Image source20 of picture on front page.

(ds, ml, al)

Footnotes

  1. 1 https://jonsuh.com/blog/sass-maps/
  2. 2 https://jonsuh.com/blog/organizing-z-index-with-sass/
  3. 3 https://jonsuh.com/blog/sass-maps/#loops-and-maps
  4. 4 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript
  5. 5 http://sass-lang.com/documentation/file.SASS_REFERENCE.html
  6. 6 http://sass-lang.com/documentation/Sass/Script/Functions.html#map_has_key-instance_method
  7. 7 https://css-tricks.com/almanac/properties/l/line-height/
  8. 8 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values
  9. 9 http://sass-lang.com/documentation/Sass/Script/Functions.html#nth-instance_method
  10. 10 https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/
  11. 11 http://sasscast.tumblr.com/post/38673939456/sass-and-media-queries
  12. 12 http://sass-lang.com/documentation/Sass/Script/Functions.html#map_get-instance_method
  13. 13 https://css-tricks.com/viewport-sized-typography/
  14. 14 http://demosthenes.info/blog/739/Creating-Responsive-Hero-Text-With-vw-Units
  15. 15 http://fittextjs.com/
  16. 16 https://twitter.com/letterror
  17. 17 http://letterror.com/dev/mathshapes/page_20_Excellence.html
  18. 18 http://www.modularscale.com/
  19. 19 http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/
  20. 20 http://www.flickr.com/photos/r2i-social-networking/6925301398/sizes/m/in/photostream/

The post Responsive Typography With Sass Maps appeared first on Smashing Magazine.

Credit: 

Responsive Typography With Sass Maps

Just another WordPress site