The front page of your website deserves special attention, as it is often the first page your visitors get to see. With WordPress, you can either show the latest posts or specify a static page.

Frankfurt comes with an own template for the front page with a large Header image across the whole width of the page, including a Call to Action Element – conversion optimization is therefore integrated in the theme architecture.

Frankfurt front page header
Frankfurt front page header

What do you have to do to get the benefit of the Frankfurt-specific front page? Not much, because once you activate the theme for the first time, Frankfurt will generate this page automatically.
(Do you want to generate the page once more?)

You will find it in the back end under Pages, its title is Front Page, and the assigned page template is also Front Page.

All you have to do now is to configure it and change the layout the way you want it. You can manually generate the front page again if you delete it by mistake.

Important: For the front page, Frankfurt distinguishes between Installations with enabled WooCommerce (Shops) and Installations without WooCommerce (blogs/static websites). Both share the same large header area. We will show you here how to set up the header, and what design options are available to you with or without WooCommerce.

PermalinkSetting up the header

Proceed as follows to set up the large header image and the elements above it:

  1. Open the automatically generated Front Page for editing.
  2. Specify your own featured image, which has a width of at least 1500 px. This image will be displayed as your header image.
  3. Open the Editor and edit your text. It is best to use the Text Editor here, and not the Visual Editor. You will then be able to see what markup is needed for the various elements, so that they are displayed just like in the Theme Demo. The first element with markup <aside>...</aside> can be deleted, we only included it for the note to you.
    Editing the front page.
    The Frankfurt front page in the back end.

    PermalinkLayout and Design with WooCommerce

    Once you have installed and enabled WooCommerce, go to the front end and open the Customizer. In the section Static Front Page, you will find three options for displaying elements from your shop on your front page.

    1. Show Featured Products: Up to four products you have marked as “Featured” can be displayed. You set a product to “Featured”, by selecting the star next to the relevant product in the back end under Products.
    2. Show New Products: You can show products sorted by date of publication on a slider.
    3. Show Product Categories: The product categories are displayed on a slider.
    Options for the Frankfurt frontpage with enabled WooCommerce
    Options in the Customizer for the Frankfurt frontpage with enabled WooCommerce

    PermalinkLayout and Design without WooCommerce

    The options above are meaningless for you if you don’t want to operate a shop. In that case, the setup of your Frankfurt front page will be similar to a regular static front page:

    1. Open the front page with the Editor for editing.
    2. You will find the more tag after the elements that are located above the header image. Everything you insert after the more tag will be output as regular page content below the header image.
    3. Simply add text, images, etc. to create your very own front page.

    Frankfurt front page with more tag
    The Frankfurt homepage with additional “more” tag, and content for websites without WooCommerce.

    Frankfurt front page without WooCommerce
    And this is how it all looks in the front end – header image and page content.

    PermalinkGenerating the front page again

    Once you have activated Frankfurt for the first time in your WordPress installation, it will automatically generate its sample front page one time. The process will set a Theme Modification (theme mod). This will prevent a new generation of the sample homepage when you activate the theme again – a good function, as front pages generated over and over again could quickly become annoying when you are testing your theme.

    If you do want the frontpage generated again for some specific reason, you can use the following code snippet to delete the relevant theme mod, and the initially generated front page with its image. The next time you enable Frankfurt again, another front page will be generated.

    The following procedure requires that Frankfurt is enabled as the theme:

    1. Open the Frankfurt file functions.php for editing in a text editor.
    2. The setup function function frankfurt_setup() begins in line 35. Copy the following code snippet into the next line:

    1. Save the file and call up any page one time in the front end or back end.
    2. The code in functions.php was executed if you land in the back end on the page Themes after reloading, and the default theme is enabled.
    3. Now you can remove the code snippet from the functions.php in Frankfurt again, and save the file.
    4. Enable Frankfurt once again as your theme in the back end: the theme-specific front page will be regenerated, and you will be forwarded to the new front page.