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.:
<?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(); ?>
You may replace line 25 with this:
<?php get_template_part( 'content', 'frontpost' ); //content_frontpost.php to get the posts in the way you want ?>
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(); ?>
<?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 ?>
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:
- Check if the post has a manual excerpt (the paragraph you may write in the excerpt area below the content area).
- If yes, print (echo) the excerpt.
- If no, print all the words/paragraph up until the more-tag.
"<!--more-->"
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
<?php the_excerpt(); ?>
with this
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' ) ); }
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.
<?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' => __( '← Previous', 'simone' ), 'next_text' => __( 'Next →', '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;
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.
<?php /** functions.php * * Simone Child Theme functions */ require get_template_directory() . '/../simone-child/inc/template-tags.php';
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!
Notice: Trying to access array offset on value of type null in /home/1/a/altern/www/ingy/wp-content/plugins/wpdiscuz/class.WpdiscuzCore.php on line 944
Notice: Trying to access array offset on value of type null in /home/1/a/altern/www/ingy/wp-content/plugins/wpdiscuz/class.WpdiscuzCore.php on line 977
Hello!
I really like your tutorial idea and I am going to implement in my simone based site Pauthake Blog. This blog site is based on a child-theme of my Khorunga theme that I developed from Morten’s course.
One more thing (if you can help me to customize), I would like to have my header box moved to the top but I am having problem (and I am not a developer but learning my way up!). Any help or code sniplets would be appreciated!
Thak You
Nice to know 🙂
I’m afraid I don’t understand your question. Give me the div of what you call your header box and exact where you want it to be, and I’ll se what I can do.
Thanks for your prompt response. Would it be posible for me to send you in your e-mail (because I don’t want to have all those info in public forum).
Also, have got your tutorial files for download.
I’ll send you an email when I’m at my desktop 🙂
Further to my earlier response, I wanted to bring site-branding, site-title, and title-box to top (with zero top margin) but I don’t seem to customize it. Your any guide would be appreciated!
In general I recommend the Firefox web developer, very handy, but I’ll see if I can help you tonight. 🙂
As far as I can tell, it’s the padding of the elements that make them appear pushed down from the top a bit. Take a look at the padding of .title-box (line 261) and .site-branding (line 239). Google «css margin padding» and you will get many good explanations on padding and margins.
I hope this helps!
Hello Ingy,
As part of my learning, I was interested to customize Simone theme blog page (index.php) in my child theme without right sidebar widget & panaramic feature image something like in theme Sidekick , which is alo available from wordpress.org for download.
Is it lot of customization work? I thought you might give me some clue?
With many thanks?
As far as I remeber there are some other page templates than the standard. Have you taken a look at those?
As far as I know, it is defined mainly in functions.php and page-nosidebar.php in page-template folder. I will take a closer look and write you back (probably through your e-mail). Thanks
I reviwed my notes and have e-mailed you just while a ago. Thank you