Harper - Homepage Setup

Please note that this image does not include the blog feed or footer elements that will also display on your homepage.

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 Hoe page, go to WordPress > Pages > Add New and create a blank page titled Home)
  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.

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.

The front page widget areas in this theme are super customizable. You can move widgets to different areas, add new widgets, remove ones you don't need, etc. The possibilities are endless!

Front Page 1

This widget displays your two most recent blog posts:

Configure as shown below:

Repeat the same configuration for the other two widgets.

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 has 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.

Copy/paste:

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

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>

Front Page 9

This widget displays your sixth most recent blog post.

Configure as shown below:

Front Page 10

Copy/paste:

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