I have been wrestling with this for some time. I've read the documentation about creating a separate home page and posts page, and so on, and I have managed to create a landing page, and a blog.

But I'd like to have the landing/home page be a dedicated music page with a player, and I can't seem to get rid of the blog posts on the landing page. I've read enough to know it has to do with PHP and the Loop, but I don't where to begin with that, because I'm not sure where to go to find what I need to make the pages separate.


On the most basic level, you could prevent all posts from being displayed by simply ripping the Loop out of the template that is displaying your "landing page." If you only wish to modify the posts being displayed on your "landing page," (say for instance should you be using Wordpress post object as songs and attempting to display a collection of songs) you should make use of the [pre_get_posts][1] action instead. Modifying queries with this hook is beyond the scope of my solution, but I have provided a example of using the hook to prevent posts from being displayed further down the page.

WARNING: Making changes directly to a 3rd party theme can be dangerous as if someone decides to update the theme to a new version provided by the original theme author, the new files downloaded will overwrite any user-made changes. To combat this, Wordpress uses a feature called "child themes," which allow you to specify a pre-existing theme as the child-theme's "base" of sorts off of which to build. I strongly recommend creating a child theme or copying Twenty Eleven before you begin making modifications, and have detailed the process in step #1 under, Removing the Loop via Template Modifications below.

Removing the Loop...

Removing the Loop via Template Modifications

And so we embark on the voyage of creating/modifying template files. As I have no idea regarding what you know or what you have done up to this point, I have written fairly general instructions that will hopefully see you some number of steps closer towards accomplishing your task.

Anyway, from the top:

  1. Create a new theme (henceforth referred to as residing in wp-content/themes/mythemename) if you haven't done so already by either:

    a) copying the twentyeleven directory in /wp-content/themes and renaming it, additionally updating the header of the mythemename/style.css (the top part enclosed in /* ... */). At bare minimum specify the theme's Theme Name parameter. In this scenario you should also leave Text Domain set to twentyeleven.

    b) creating a child theme of Wordpress' Twenty Eleven theme. Do this by creating a new directory in wp-content/themes and creating within it a style.css file containing a header specifying (at bare minimum) a Theme Name parameter. Additionally in the theme header located in mythemename/style.css, set the parameter Template to twentyeleven - this tells Wordpress to use Twenty Eleven as the base for your child theme. Under the closing */ of your theme's header add the line, @import url("../twentyeleven/style.css");- this will pull all of Twenty Eleven's CSS into your new theme. Any modifications to your theme's CSS should be carried out below this new line.

    For more information regarding the specifics of theme development, refer to the codex page on the subject.

  2. The next step is to refer to the Template Hierarchy to figure out which page template Wordpress is trying to load as your "landing page." Following the path ("What Page?" > "Site Front Page") on the diagram to its various terminals, we can see that a number of options are available:

    a) create wp-content/themes/front-page.php, which Wordpress will load before it even considers the blog's "Reading" settings. NOTE: The Twenty Eleven theme does not define this file.

    b) create wp-content/themes/home.php, which Wordpress will load if no front-page.php template is available and the blog's "Reading" settings are set to display posts on the home page.

    c) create wp-content/themes/page-{PageSlug}.php (replacing {PageSlug} with the real slug of the "landing page" as it exists as a Wordpress Page), which Wordpress will load if no front-page.php template is available, the blog's "Reading" settings are set to display a static front page, and that indicated static front page has a slug of {PageSlug}.

    d) create wp-content/themes/{CustomTemplateName}.php and utilize custom page templates, which is beyond the scope of my solution.

  3. As a basis for your new template file (whatever file you've created in following step #2), feel free to copy the contents of wp-content/themes/twentyeleven/index.php. In the first action actually related to your specific question, you can remove any and all posts being displayed on your page by simply removing the Loop in its entirety, i.e. deleting everything between (and including) if( have_posts() ) and endif;.

Removing the Loop via the pre_get_posts Action

The action is executed immediately before Wordpress queries for posts. By testing if it is the front page that is being displayed, we can conditionally trash the query such that it returns no posts for the Loop to display (you may end up with a message detailing the absence of posts). Drop the following into your theme's functions.php file (wp-content/themes/mythemename/functions.php if you happened to follow step #1 in the previous section):

function prevent_frontpage_posts( $query ) {
    if( ( is_front_page() || is_home() ) && $query->is_main_query() )
        $query->init();    //If processing the main query on the main page, reset it.
        //HACK: Modify the query to search for something bogus to ensure that the default values don't provide a result set.
        $query->set( 'post_type', 'dummyPostType' );
add_action( 'pre_get_posts', 'prevent_frontpage_posts' );

Hope that helps. Thanks for letting me use your question to become more familiar with StackExchange markup ;)

  • +1 for the canonical Answer! On this matter, I've learned a lot from @MikeSchinkel style. – brasofilo Jan 8 '13 at 17:30
  • 1
    @brasofilo thanks for the user link! Guy's got mad style - as do you. Time to start integrating more images into my answers - one day they shall be classy enough to join the ranks of you sophisticated gents ;) – bosco Jan 8 '13 at 17:49
  1. Have you tried creating a WordPress Page for the homepage and a separate WordPress Page for the blog posts?

  2. Then go to Settings -> Reading page.

  3. Select the "A Static Page" option on the "Front Page Displays" option

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.