In this tutorial we create a static front-page with a responsive slider and a full-width content column. As you might know, WordPress offers multiple ways to create a static homepage for your site, we will also look at the different techniques too.
Page templates, home.php and front-page.php
As WordPress grew over time the naming of features and files sometimes is more confusing than it actually should be. This is the case with
front-page.php. To confuse you even more, page templates are joining the game and add another level of complexity to your theme files.
For example as I wrote this tutorial, required+ Foundation had 6 custom page templates. These are the ones you can manually select when writing a page in WordPress in the meta box Page Attributes with the Template select box.
To create a new custom page template, create
your-template-name.php file in your WordPress theme directory or in the
page-templates folder if your theme supports this.
/** * Template Name: Your page template * Description: A description of your page template */
You could define a template for your front page this way, but there is a better way, so your editors don’t have to switch templates or accidentally change the page template of a page.
Template hierarchy – home.php and front-page.php
Already familiar with the WordPress template hierarchy? You can skip this part and dig right into the code from here.
The template hierarchy shows what file WordPress tries to load on each request. As you can see on the picture linked from the WordPress template hierarchy page, if you request the homepage of your site, it tries to load the
front-page.php file. This is the file we are going to create, if you are looking for a custom blog front page, try creating a
home.php, but be aware that this tutorial is for the
Creating a front-page.php
Think about the design and content of your sites homepage, what elements are needed? Do you need a slider or widgets, do you actually need the content from the visual editor and the title on your homepage?
In this tutorial we pretend that we identified the following elements:
- Slider – we need a slider below the navigation with all the images attached to the page
- No sidebar – we want a full width page so we don’t need a sidebar
- Content – we use the visual editor for content creation on the homepage
1. Create the file
In your theme folder or child theme folder, create a file named
front-page.php and open it in the text editor of choice. Add the following code to your file:
<?php /** * Custom front-page.php template * * Used to display the homepage of your * WordPress site. * * @link http://themes.required.ch/?p=606 */ get_header(); ?>
The code above is very simple and if you are familiar with WordPres you have probably seen this code in many templates before. The only thing we do here, is including the
header.php from your theme.
2. Add the responsive Slider
Next we create the code for the responsive Slider. We use Orbit from Foundation wrapped in the required+ Orbit Shortcode plugin to easily create a responsive slider from the images attached to your page. Let’s have a look at the code:
<?php /** * Check for the responsive slider plugin */ if ( class_exists( 'REQ_Orbit' ) ) : ?> <div class="home-slider"> <?php /** * Use the shortcode to create the slider */ echo do_shortcode('[orbit]'); ?> <hr> </div> <?php endif; ?>
As you can see we check if the class
REQ_Orbit exists, to make sure the Orbit plugin is available. The line
echo do_shortcode('[orbit]'); is used to create the responsive slider. With
do_shortcode you can place shortcodes almost everywhere in your theme.
3. The complete code
Let’s have a quick look at the complete code used in this tutorial. Of course you can download the complete code as a zip file if you wish:
<?php /** * Custom front-page.php template * * Used to display the homepage of your * WordPress site. * * @link http://themes.required.ch/?p=606 */ get_header(); ?> <!-- Row for main content area --> <div id="content" class="row"> <div id="main" class="twelve columns" role="main"> <?php /** * Check for the responsive slider plugin */ if ( class_exists( 'REQ_Orbit' ) ) : ?> <div class="home-slider"> <?php /** * Use the shortcode to create the slider */ echo do_shortcode('[orbit]'); ?> <hr> </div> <?php endif; ?> <div class="post-box"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div> </div><!-- /#main --> </div><!-- End Content row --> <?php get_footer(); ?>
With the default child theme required+ Starter still in place, your new homepage could look like this:
Getting started with required+ Foundation
The required+ Foundation parent theme is a powerful responsive WordPress theme that gets you started in no time. Read the docs, download the theme and create something awesome.