Mia - 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 homepage widgets for your theme. You can choose to import the widgets from any of the three demos:

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

A note about the 3 demo options

The Mia theme has three different demos (Travel, Food, and Fashion). The ONLY differences between the three demos are:

Under the hood, the theme is the same for all three demos. That means that vast majority of the homepage setup is going to be the same no matter which homepage option you want to have.

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 "Your Latest Posts."
  3. Click Save Changes.

Homepage Overview

The Mia homepage has six widget areas:

  • Front Page 1: 3 featured page images
  • Front Page 2: Newsletter signup
  • Front Page 3: Featured blog posts
  • Front Page 4: Affiliate shop widget
  • Front Page 5: Image and About Section
  • Front Page 6: 3 featured page images

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! Easy peasy.

Front Page 1

Front Page 1 has three Genesis Featured Page Advanced widgets:

Configure as shown below:

The Genesis Featured Page Advanced widget is very customizable. You can:

  • Change the widget title.
  • Enable or disable the ability to click on the widget title.
  • Add your own link in the Custom Page Link field.
  • Click "Feature a Page" to select a page on your site.
  • Upload your own image (instructions).
  • Change the image size.
  • In the demo, these widgets are linked to categories. If you aren't sure how to link to a category, click here.

Tip: do not change the Image Alignment settings. This can cause unexpected results. Leave it set to "None."

Front Page 2

Configure the Genesis eNews Extended widget following this tutorial.

Front Page 3

Front Page 3 displays eight featured posts. Configure a Genesis Featured Posts widget as shown below:

Front Page 4

Click here for setup instructions for the product widget.

If you did not import the widgets, here is the code for the button:

<a class="button shop" href="YOUR PAGE LINK HERE">
	Shop All My Favorites &gt;
</a>

Be sure to replace the demo link with your own link.

Front Page 5

Image size in the demo is 800x1200px. Be sure to replace the demo link with your own link.

You can copy this code HERE. Be sure to replace the demo link with your own link.

The three  <br/> at the beginning create additional space to move the text box down in relation to the image. If you want to use more text (less space at the top), remove a <br/> or two. If you want to use less text (more space at the top), you can add an additional <br/> so everything lines up nicely.

Front Page 6

Front Page 6 has three Genesis Featured Page Advanced widgets:

Configure as shown below:

The Genesis Featured Page Advanced widget is very customizable. You can:

  • Change the widget title.
  • Enable or disable the ability to click on the widget title.
  • Add your own link in the Custom Page Link field.
  • Click "Feature a Page" to select a page on your site.
  • Upload your own image (instructions).
  • Change the image size.
  • In the demo, these widgets are linked to categories. If you aren't sure how to link to a category, click here.

Tip: do not change the Image Alignment settings. This can cause unexpected results. Leave it set to "None."

The Custom HTML widget contains the "Keep Exploring" button below the 3 featured page widgets. Be sure to replace the demo link with your own link. In the Mia Travel demo, this button is linked to the Category Index page.

If you did not import the widgets, here is the code for the button:

<a class="button" href="YOUR PAGE LINK HERE">
	Keep Exploring &gt;
</a>