Creating the “Home” Page (Front Page)

Like any web­site, your web­site needs a front page and Listable has a ded­i­cat­ed set of options in order to achieve this. Fur­ther below there is a step-by-step guide.

Step 1 — Create a “Home” page

From your site, WP dash­board, add a new page and name it “Home” or sim­i­lar. Then find the Page Attrib­ut­es sec­tion in the right side­bar area and set the Tem­plate to Front Page. This tem­plate allows you to dis­play a Search field inside the Hero Area.

Con­fig­ure the Hero Area

After select­ing the Front Page tem­plate, new options appear, so you can man­age the back­ground or the high­light­ed cat­e­gories.

  • Hero Area (Back­ground): use this block to dis­play a ran­dom back­ground between a gallery of images and a list of videos (self-host­ed). To ensure the high con­trast for text over image, we reduced the opac­i­ty to 50%.
  • High­light­ed Cat­e­gories: this sec­tion will dis­play a list of select­ed cat­e­gories to the bot­tom of the Hero Area. Using their slugs, you can spec­i­fy which one to high­light. Also if their names are too long to fit into one row you can use a place­hold­er to show an alter­na­tive, small­er ver­sion: eg. cat­e­go­ry (Cat)
  • Search Fields: to extend the search form, you can add the Cat­e­gories and Loca­tion fields direct­ly to the Hero Area (see screen­shot). We were going with the sin­gle-field option for the demo as it has a bet­ter con­ver­sion rate, but depend­ing on your sit­u­a­tion, the oth­er two fields might be more rel­e­vant to the user search.

Step 2 — Set a Static Front Page

Before going fur­ther, let’s put the above-cre­at­ed page on front page. By default, Word­Press dis­plays the lat­est posts there — to change that and show your new sta­t­ic “Home” page, fol­low these easy steps:

  1. Launch the site Cus­tomiz­er and click on the Sta­t­ic Front Page tab on the left.
  2. Select the Sta­t­ic Page option, then choose your new page from the Front Page drop-down.
  3. Click on the Save & Pub­lish but­ton to save your sta­t­ic page set­tings.

Step 3 — Customize the “Home” Page Layout through Widgets

Beneath the Hero area, you can add new sec­tions through a Wid­getized area. Go to your site Home page and on the top Admin bar, you will see a blue but­ton called Cus­tomize Front Page Sec­tions. This is a use­ful short­cut to the  Appear­ance → Cus­tomiz­er → Wid­gets → Front Page area, where you can man­age the con­tent and order of the fol­low­ing wid­gets:

  1. List­ing Cat­e­gories — Dis­play a list of list­ing cat­e­gories based on dif­fer­ent cri­te­ria (eg. most pop­u­lar, ran­dom) or spec­i­fy which ones you want to show.
  2. List­ing Cards — Dis­play a list of list­ings based on var­i­ous cri­te­ria (eg. lat­est or fea­tured list­ings from a spe­cif­ic cat­e­go­ry).
  3. Spot­lights — Empha­size some fea­tures of your web­site or use it as a step-by-step explain­ing process (eg. How it Works sec­tion).
  4. Recent Posts — A list of the lat­est posts from your Blog sec­tion.


This article applies to Listable, as they share the same underlying structure.

Updated on May 31, 2017

Was this article helpful?