Harper - Homepage Setup

Before You Begin

We HIGHLY recommend importing the widgets for your theme. Importing the widgets will make theme setup go significantly faster, and you can skip most of this tutorial (it's the longest one!).

Configure Reading Settings

For the homepage to display like the demo, make sure that your reading settings are configured correctly:

  1. Go to WordPress > Settings > Reading.
  2. Under Your Homepage Displays, select "a static page."
  3. For the Homepage, select the Home page. (If you don't have a Home page, go to WordPress > Pages > Add New and create a blank page titled Home. Set the page layout to full-width).
  4. For the Posts page, select the Blog page. (If you don't have a Blog page, go to WordPress > Pages > Add New and create a blank page titled Blog)
  5. Save changes.

Featured Images

The Harper theme displays several blog posts on the homepage, and each blog post requires a featured image in order for the post to display as shown in the demo. If you didn't import the demo content, make sure that each of your blog posts has a featured image set.

Homepage Overview

The Harper homepage has ten widget areas:

  • Front Page 1: 2 featured blog posts
  • Front Page 2: About section ("Hey Friend")
  • Front Page 3: Third blog post 
  • Front Page 4: Subscription widget ("Join the Club")
  • Front Page 5: Fourth blog post
  • Front Page 6: 3 featured categories ("Browse by Topics")
  • Front Page 7: Fifth blog post
  • Front Page 8: Affiliate shop widget ("Shop My Picks")
  • Front Page 9: Sixth blog post
  • Front Page 10: Load More Posts button

Below we'll go over what is inside each of these widget areas. If you imported the demo widgets, all of the homepage widgets will already be set up for you, so all you'll need to do is fill in your own details in a few areas! Easy peasy.

Front Page 1

This widget displays your two most recent blog posts:

Configure as shown below:

Front Page 2

If you'd like to copy/paste this:

<h3>
hey friend!
</h3>

<p>
I'm Harper. Blogger. Homebody. Aspiring fashionista. Dog mama. City dweller. Social media strategist. Lover of Starbucks, sushi, + San Francisco.
</p>

<a class="button white" href="LINK TO YOUR ABOUT PAGE">
Learn More
</a>

If you want your image to appear in a circle, make sure to upload an image that is perfectly square (i.e. 800x800px).

Front Page 3

This widget displays your third most recent blog post.

Configure as shown below:

Front Page 4

Configure as shown below:

Click here for instructions on linking the subscription widget to your mailing list provider.

Front Page 5

This widget displays your fourth most recent blog post.

Configure as shown below:

Front Page 6

Front Page 6 contains five widgets:

  1. Custom HTML Widget: This widget is solely for the "Browse by Topic" title. There is no code or text inside the Custom HTML content box, although you could add wording if you want.
  2. Genesis Featured Page Advanced Widget (Lifestyle)
  3. Genesis Featured Page Advanced Widget (Travel)
  4. Genesis Featured Page Advanced Widget (Fashion)
  5. Custom HTML Widget: This widget contains the "See All Categories" button.

Configure Genesis Featured Page Advanced widget as shown below:

Repeat the same configuration for two additional Genesis Featured Page Advanced widgets.

<a class="button white" href="LINK TO A PAGE">
   See All Categories >
</a>

If you imported the demo widgets, replace https://demo.17thavenuedesigns.net/harper/category-index with the link to your own Category Index page (or whatever page you'd like the button to link to).

Front Page 7

This widget displays your fifth most recent blog post.

Configure as shown below:

Front Page 8

Copy/paste:

<div class="shop-widget">

<!-- PASTE SHOP WIDGET CODE BELOW HERE -->

<!-- AND ABOVE HERE --> 

<a class="button shop" href="LINK TO A PAGE">
	Shop All My Favorites >
</a>
	
</div>

If you imported the demo widgets, replace https://demo.17thavenuedesigns.net/harper/shop-my-favorites with the link to your own Shop My Favorites page (or whatever page you'd like the button to link to).

Front Page 9

This widget displays your sixth most recent blog post.

Configure as shown below:

Front Page 10

<a class="button more" href="LINK TO BLOG PAGE">
   Load More Posts
</a>

If you imported the demo widgets, replace https://demo.17thavenuedesigns.net/harper/blog/page/2 with the link to your own blog page!