Clover [Genesis] - Blog Homepage Setup

Clover Blog Homepage

Before You Begin

We strongly recommend importing the demo for your theme. Importing the demo, particularly the widgets, will make setting up your homepage much easier! All of the widgets shown below will be automatically imported and pre-configured, and then it's up to you to insert your own text and images.

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.

Homepage Overview

The Clover Blog Homepage has ten widget areas:

  • Front Page 1: Post Carousel
  • Front Page 2: 3 featured page images (linked to categories)
  • Front Page 3: Newsletter signup widget
  • Front Page 4: Featured posts
  • Front Page 5: About section
  • Front Page 6: 3 service box widgets
  • Front Page 7: Affiliate shop widget
  • Front Page 8, 9, & 10: Not utilized in blog demo (but can be used for additional widgets if you'd like!)

The Widgets page is located at Appearance > Widgets. Below, we'll go over what is inside each widget area. If you imported the demo widgets, all of the homepage widgets will already be set up for you. All you'll need to do is fill in each area with your own images and content. Super easy! 

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

Front Page 1

If you did not import the Customizer settings, do the following prior to setting up Front Page 1:

  1. Go to Appearance > Customize > Clover Theme Settings > Front Page.
  2. Remove any images that are set for Front Page 1. Click Publish to save.

There are lots of ways you can customize the carousel!

  • Select a specific category of posts to display.
  • Change the parameter by which posts are displayed (most recent, alphabetical, by comment count, etc).
  • Display or hide the entry content/excerpt.
  • Edit the post info with different Genesis shortcodes.
  • Change the alignment of the entry content: Right, Left, or Center. Selecting Center will overlay the post title/excerpt on top of the featured image.

Front Page 2

If you did not import the Customizer settings, do the following prior to setting up Front Page 2:

  1. Go to Appearance > Customize > Clover Theme Settings.
  2. Under Front Page > Featured Page Widget Style, select "Title on top of image (caps font)." Click Publish to save.

Tip! To link to a category, select the "Feature a Custom Page Link" option in the Genesis Featured Page widget settings. Then, go to Posts > Categories and click View on the category you'd like to link to. Copy the URL in your address bar and paste it in the Custom Page Link field.

There are also alternate display styles for the Genesis Featured Page widget. To change the style, go to Appearance > Customize > Clover Theme Settings > Front Page > Featured Page Style. There are four style options you can choose from:

Front Page 3

To connect the Genesis eNews Extended to your mailing list provider, visit this tutorial.

Front Page 4

There are lots of ways you can customize this widget!

  • Select a specific category of posts to display.
  • Change the number of posts, which will automatically change the number of columns. 2 posts = 2 columns, 3 posts = 3 columns, 4 posts = 4 columns. We recommend a maximum of 4 posts (4 columns).
  • Change the number of posts to offset. E.g. if the offset is set to "4", the widget will display posts starting at your 4th post.
  • Use a different featured image size.
  • Display or hide the entry content/excerpt.
  • Edit the post info with different Genesis shortcodes.
  • Display a custom button that can link anywhere on your website (some ideas could be the blog page, category index page, or a specific category page).

Front Page 5

The image size in the demo is 1000x1250px. If your selected image in the image widget is displaying smaller than expected, click here.

Front Page 6

The Custom HTML widget just serves as a title for this section. You're welcome to place text in the Content box if you'd like text to display above the service boxes.

FontAwesome Icons

The  17th Ave - Service Box widget supports icons from FontAwesome, an icon library containing over 1,600 free icons, plus thousands more premium icons. It's super easy to add these icons to your website!

1. Go to FontAwesome.com and click "Icons" at the top of the website.

2. You can browse the full list of icons, sort/filter icons on the left, or search for a specific icon.

3. When you find an icon you'd like to use, click on the icon. You'll be taken to a page for that individual icon, which looks like this:

4. Click on the HTML code right above the icon image (always starts with <i class=>). Clicking on the code will automatically copy it for you.

5. Head back to your Widgets page and paste the icon code in the "FontAwesome Icon Code" box. Recommend only using one icon per widget.

Front Page 7

If you need to copy/paste this code, click here.

This is one area that involves a bit of code — but it's super easy and we'll explain it all below!

ShopStyle or RewardStyle widget

This section requires an account with either ShopStyle or RewardStyle. The widget shown in the demo is from ShopStyle. You can configure your shop widget in any manner that you'd like, but here are the widget settings we used in ShopStyle:

With ShopStyle, once you've created your widget, you'll be directed to a page called "Share." On that page, you can copy the HTML code for your ShopStyle widget. You'll paste that code in place of the ShopStyle code from the demo.

Tip! You can also use RewardStyle if that is your preferred affiliate network. Just be sure to grab the HTML code for the widget, and NOT the shortcode. More info on this here.

Shop More Button

This is a simple text button. All you'll need to do is replace https://demo.17thavenuedesigns.net/clover-blog/shop-our-favorites with your own page URL. Be sure to leave the quotes around your link. And feel free to change the shop more text to whatever you need!