This blog has a static front page with blog posts below the introduction. This is not a part of the core of the theme I’m using, Simone by Morten Rand-Henriksen, so I had to do some developing to achieve the result I desired.

I started my quest by reading the WP codex and different tutorials on how to create a static front page. I thought using Static Front Page Plus Blog would do the trick, but no luck. After searching and testing I came up with this solution. I hope this tutorial might help someone else looking for the same feature I did. My solution might not be kosher, so be careful using it.

Step 1: Create a child theme

Never ever make changes to the main theme, create a child theme and do all your tweaks and changes there. If you do not know how to, please google WordPress Child Theme. All the files I create in this tutorial are in the child theme folder.

Use a ftp-program to upload your files. I edit and transfer my files in Dreamweaver.

Step 2: Create a new page template and a page

Create a new template. I named mine forside.php, call it whatever you like, except the standard WP-filenames.

Copy the content of page.php in the parent theme and edit the code or just copy-paste my code here. Comment out the highlighted code in line 27 for now. Remove the comment // after step 4.:

[code language=»php» highlight=»12, 25, 27″]
<?php
/**
 * Template Name: Forside //GIVE THE TEMPLATE A NAME
 */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <?php // GET TTHE CONTENT OF THE PAGE (code from page.php ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( ‘content’, ‘page’ ); ?>
                <?php //REMOVE COMMENTS if you are sure you do not want comments on your frontpage ?>
            <?php endwhile; // end of the loop. ?>

             <?php // GET THE BLOG POSTS
            $temp = $wp_query; $wp_query= null;
            $wp_query = new WP_Query(); $wp_query->query(‘showposts=10’ . ‘&paged=’.$paged);
            if ( $wp_query->have_posts() ) : ?>
                <?php /* The loop */ ?>
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
                    <?php // Display content of posts ?>
                    <?php get_template_part( ‘content’, get_post_format() ); ?>
                <?php endwhile; ?>
            
                <?php //GET THE PAGING NAVIGATION
                    simone_child_paging_nav();
                ?>
            <?php else : //If there are no blog posts?>
                <?php get_template_part( ‘content’, ‘none’ ); ?>
            <?php endif; ?>

        </main><!– #main –>
    </div><!– #primary –>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

[/code]

You may replace line 25 with this:

[code language=»php»]

<?php get_template_part( ‘content’, ‘frontpost’ ); //content_frontpost.php to get the posts in the way you want ?>

[/code]

I made this code based on A Page of Posts in the WP Codex and Display Blog Posts on any Page by Digging Into WordPress.

A list of posts based on a tag

The code in line 12 above could be replaced with this if you want a list of posts based on a tag as I do.

<?php get_template_part( 'content', 'front' ); ?>

You have to create a copy of content-page.php and name it content-front.php. Insert this code after :

<?php the_content(); ?>

[code language=»php» highlight=»4″]
<?php //LIST OF RECENT POST BY TAG ?>
<ul>
<?php
    $args = array( ‘post_status’ => ‘publish’, ‘tag’=>"arbeid", );
    $recent_posts = wp_get_recent_posts( $args );
    foreach( $recent_posts as $recent ){
        echo ‘<li><a href="’ . get_permalink($recent["ID"]) . ‘">’ .   $recent["post_title"].'</a> </li> ‘;
    }
?>
</ul>
<?php //LIST END ?>
[/code]

Change the tag «arbeid» to your desired tag. I got this code from WP Codex: Function Reference/wp get recent posts

The excerpt of posts

On the default frontpage the automatic excerpt (the 50 first words or so) of a post is shown. On my frontpage I wanted to show the manual excerpt, or so many words or a parapgraph I set for each post with the more tag. I wanted the loop to do:

1. Check if the post has a manual excerpt (the paragraph you may write in the excerpt area below the content area).
2. If yes, print (echo) the excerpt.
3. If no, print all the words/paragraph up until the more-tag.

   [code]"<!–more–>"[/code]

If there is no excerpt or no more-tag, the entire post will be printed!

Make a copy of content.php, name it content-frontpage.php. Go to line 75, replace
[code] <?php the_excerpt(); ?>[/code]
with this

[code language=»php»]
global $more; // Declare global $more (before the loop).
$more = 0; // Set (inside the loop) to display content above the more tag.
if ( empty( $post->post_excerpt ) ) {
// This post has no excerpt
the_content( __( », ‘simone’ ) );
} else {
// This post has excerpt
the_excerpt( __( », ‘simone’ ) );
}
[/code]

Create a new page

In WP admin panel, go to Appearance > Themes and activate your Child Theme.

Create a new page in WP admin and title it Home or something else. Use your new page template (Forside). Please take a look at the WP documentation or Elegant Themes Blog if you don’t know how.

Make a note of the id-number of your new page. Look in the url while you are editing it, mine says post=229.

Step 3: Make a copy of the page navigation

In the Simone theme the page navigation is placed in inc/template-tags.php. Make a copy of the folder and the file in the child theme. Delete everything except the function ‘simone_paging_nav’. Rename the function, as I did below. All I changed was the highlighted lines.

[code language=»php» highlight=»3,9,27,28″]
<?php
//Custom Function to Include
if ( ! function_exists( ‘simone_child_paging_nav’ ) ) :
/**
 * Display navigation to next/previous set of posts when applicable.
 *
 * @return void
 */
function simone_child_paging_nav() {
    // Don’t print empty markup if there’s only one page.
    if ( $GLOBALS[‘wp_query’]->max_num_pages < 2 ) {
        return;
    }
    $paged        = get_query_var( ‘paged’ ) ? intval( get_query_var( ‘paged’ ) ) : 1;
    $pagenum_link = html_entity_decode( get_pagenum_link() );
    $page_link = html_entity_decode( get_page_link() );
    $query_args   = array();
    $url_parts    = explode( ‘?’, $pagenum_link );

    if ( isset( $url_parts[1] ) ) {
        wp_parse_str( $url_parts[1], $query_args );
    }

    $pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
    $pagenum_link = trailingslashit( $pagenum_link ) . ‘%_%’;
    $format  = $GLOBALS[‘wp_rewrite’]->using_index_permalinks() && ! strpos( $pagenum_link, ‘index.php’ ) ? ‘index.php/’ : »;
    $format .= $GLOBALS[‘wp_rewrite’]->using_permalinks() ? user_trailingslashit( ‘page/%#%’, ‘paged’ ) : ‘?paged=%#%&page_id=229’;
//REPLACE 229 with the id-number of your home page. If we don’t put the page_id=229 here, the pagination of the frontpage will not work.

    // Set up paginated links.
    $links = paginate_links( array(
        ‘base’     => $pagenum_link,
        ‘format’   => $format,
        ‘total’    => $GLOBALS[‘wp_query’]->max_num_pages,
        ‘current’  => $paged,
        ‘mid_size’ => 2,
        ‘add_args’ => array_map( ‘urlencode’, $query_args ),
        ‘prev_text’ => __( ‘&larr; Previous’, ‘simone’ ),
        ‘next_text’ => __( ‘Next &rarr;’, ‘simone’ ),
        ‘type’      => ‘list’,
    ) );

    if ( $links ) :

    ?>
    <nav class="navigation paging-navigation" role="navigation">
        <h1 class="screen-reader-text"><?php _e( ‘Posts navigation’, ‘simone’ ); ?></h1>
            <?php echo $links; ?>
    </nav><!– .navigation –>
    <?php
    endif;
}
endif;
[/code]

Remember to replace 229 with the id-number of your home page.

Step 4: Get the function

Now you need to make a file named functions.php and insert the code below, nothing else.

[code language=»php»]
<?php
/** functions.php
*
* Simone Child Theme functions
*/

require get_template_directory() . ‘/../simone-child/inc/template-tags.php’;
[/code]

Remove the comments// before this code in the page template.

simone_child_paging_nav();

Step 5: Set WP to use Static Front Page

In WP admin panel, go to Appearance > Customize and Static Front Page.
Choose A static page and set Front page to be the home page you created in step 2.

Take a look at your new home page! I hope it looks ok!