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.
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.
PermalinkSetting up the header
Proceed as follows to set up the large header image and the elements above it:
- Open the automatically generated Front Page for editing.
- Specify your own featured image, which has a width of at least 1500 px. This image will be displayed as your header image.
- 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.
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.
- 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.
- Show New Products: You can show products sorted by date of publication on a slider.
- Show Product Categories: The product categories are displayed on a slider.
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:
- Open the front page with the Editor for editing.
- 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.
- Simply add text, images, etc. to create your very own front page.
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:
123456789101112131415161718// Delete the previously generated frontpage and its image.// Caution! The content will be irretrievably lost!wp_delete_attachment( absint( get_theme_mod( 'frankfurt_installed_frontpage_image' ) ), TRUE );wp_delete_post( absint( get_theme_mod( 'frankfurt_installed_frontpage' ) ), TRUE );// Remove theme mod to generate the frontpage completely new, when the theme is next enabled.remove_theme_mod( 'frankfurt_installed_frontpage' );// Temporarily set the WordPress option: “Show posts on frontpage”.update_option( 'show_on_front', 'posts' );// Enable the default theme.update_option( 'template', WP_DEFAULT_THEME, TRUE );update_option( 'stylesheet', WP_DEFAULT_THEME, TRUE );// Redirect to the “Themes” page in the back end.wp_redirect( admin_url( 'themes.php' ) );exit;
- Open the Frankfurt file functions.php for editing in a text editor.
- The setup function function frankfurt_setup() begins in line 35. Copy the following code snippet into the next line:
- Save the file and call up any page one time in the front end or back end.
- 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.
- Now you can remove the code snippet from the functions.php in Frankfurt again, and save the file.
- 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.