Sketch for a static frontpage in WordPress
We discontinue development of the required+ Foundation theme – here is why.×

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 home.php and front-page.php. To confuse you even more, page templates are joining the game and add another level of complexity to your theme files.

Page templates

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 front-page.php.

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 https://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 https://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:

What your page could look like now

Download the code


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.

Download required+ Foundation »


16 thoughts on “How to create a static front-page in WordPress

    • I do have some questions, I downloaded the code for the custom front page ( the one on your blog with the orbit slider) and it’s not showing up in the template drop down? also I enabled all the plugins and it’s not doing anything when I add [orbit] to the page.

      First of all, as you can read in the post above, the front-page.php is used by WordPress when you enable a static page as the front page under “Settings > Reading”. The [orbit] shortcode does only show images when you upload them to the specific page/post as attachments.

      If it helps I am developing locally on a mac and not using MAMP, although I am tempted to switch back to MAMP because I am getting weird (“you have to enable permissions to make changes to this file” ) in the editor when I try to make simple changes to the pages?

      I personally use MAMP Pro and I’m pretty happy with it. The permissions problem should be easy to Google.

      Any help would be most appreciated. I am pretty new to theme development, usually just make my own themes, but was suggested to make child themes because they are easier. Well I am not finding that it is easy, in fact it’s easier for me to create a theme from scratch lol

      My recommendation is to use child themes, but it takes a while to wrap your head around it, so you know exactly how and what templates you can overwrite from the parent theme. I recommend reading the Codex on Child Themes.

      Please re-read the tutorial above and let me know if you have any further questions.

      • Yes, I guess I have to wrap my head around the child theme. Doesn’t make sense why the front-page.php is not showing up in the template files though? I didn’t know about attaching the photos to the page that gets the [orbit] short code. I’m getting there though, thanks for the tips :)

  1. Peter on said:

    Hi,

    I have tried to follow this tutorial to the point and I still can’t get it working.

    I also think that your answers above are more mystifying than helpful – you refer comnmenteers to the WP codex.

    Can I politely suggest that you simply answer the questions put here – that must be the whole idea of writing a tutorial with a “leave a reply” option…?

    thank you

    Peter

    • Hi Peter, thanks for trying out the tutorial. What exactly doesn’t work for you? What question is unanswered? Of course I link to the WordPress Codex, as it still is the number one ressource for all WordPress related questions and this is a WordPress tutorial.

      When writing a tutorial it is hard to decide what level of experience you expect from your users, we generally strive for simplicity and give away code that works right away, if you read through the tutorial. As mentioned on the homepage of our Themes site, the target group needs to have at least some experience with PHP or WordPress.

      Please let me know what you expected and what doesn’t work for you, but before re-read the whole tutorial and make sure you use required+ Foundation and the Orbit shortcode plugin we link to in the post.

      Thanks, Silvan

  2. Hi Silvan,

    Contrary to others, I found the tutorial very helpful and had no trouble modifying the home page template. I wanted to thank you for your work and I’m really looking forward to the new version of required+ that will be based on version 4 of Foundation. I wanted to point out that some of your links to their documentation aren’t working any more, because things have changed with the release of version 4. [I don’t mean on this page, but for example, I wanted to modify some of the options for the Orbit shortcode plugin and you linked to the Foundation docs from there.] Keep up the great work!

    • Hi Jay, thanks for your kind words and we are glad that the tutorial worked for you. We just started working on required+ Foundation 1.1.0 with Foundation 4, it’s going to be a huge step.

      We are currently updating the links here to match with the old Foundation 3.2.x docs, sorry for the inconvenience.

  3. Why not post the code to that outputs the entire site pictured in the tutorial. I’d like to see how you created the 3 widget areas and the buttons below them.

  4. Oh. You are using a full-width (12 columns) page using shortcodes in the WP editor. I thought each was a widget box. That’s what they looked like. Actually that’s what I wanted… I’d like to find the code for that… maybe it’s on the Foundation site. Still don’t understand why you use front-page and not home-page…. I guess because I don’t understand WP’s explanation of the difference of when one or the other is “called.” Thanks.

  5. Marcus on said:

    Hello

    I have set up a portfolio page with a custom post type I have added the slider code to my single-project.php and the interface shows up. But when i try and add picture via add media on the custom post input field just the image appears above the slider, not attached to it.

    I have included the r+ Orbit Shortcode, added the:

    $
    jQuery(window).load(function() {
    jQuery(“.home-slider”).orbit();
    });

    Having had to change from $ to jQuery no conflict mode. The timers working I se the interface, but no slides inside. I`d love some help please.

    • I guess you installed the Orbit Shortcode Plugin and activated it. Next upload the images to the custom post type item, using the button above the visual text editor, like you would for a [gallery]. You don’t need to add javascript, as the shortcode outputs the javascript needed.

      The shortcode takes all images attached to a post or custom post type and shows them, please provide a link if you are still having trouble with this.

  6. Marcus on said:

    Hi. I got this to work now. Wrapped the images in the shortcode and now it’s fine. I am now however having a problem getting the slides to show in a light box. I am using WP simple lightbox. I see it called in the header, but it doesn’t want to work, any way to integrate lightbox with F4? Or documents that would help.

    Thanks.

    • The shortcode plugin doesn’t create links on the images in the slider. That’s why there are no lightboxes when you click on the images. You could create some custom JavaScript in the child-theme.js to make the images open in a lightbox on click.

      F4 isn’t available from required+ Foundation yet, but we are working on it.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>