How To Change The Layout For Specific Pages On WordPress

A WordPress blog can consist of a large variety of topics. Some pages are “information only”, yet others play a key role in the decision process. Not all page layouts are appropriate for all situations. For example, you might want to experiment with a new sidebar for certain pages only. In this tutorial, I’m going to show you how to change the layout for WordPress pages programmatically.

This has some advantages over manual page layout changes on a case by case basis.

Disadvantage of Manually Changing the Layout

Many themes like Genesis allow you to select the layout of the page while creating the post. For example, here I can choose from 4 different layouts:

This deals with the placement of the sidebar, and whether or not I want one or two of them, and on which side. By choosing an option that is different from the default, I can have multiple pages with different layouts.

So why not use this instead? Two reasons.

First, it’s not easy to keep track of which pages have a specific layout. For example, over a period of time you’ll start to have dozens of pages with a custom layout, and there’s no easy way to tell which ones have been changed. If you want to revert your changes at a later date, there’s no single listing of all the pages with a unique layout.

The second problem has to do with styling. If you’ve customized your theme at all, you’ve probably messed around with the sidebar CSS to get the exact look that’s right for your site. So you’ll most probably want to add new CSS for the extra sidebars as well.

But this extra CSS is needed only for those particular pages. There’s no need for useless CSS to be added to all posts. So you might be tempted to include the extra CSS on the page settings like this:

These settings are below the text editor, along with the page change layout option. So you include your CSS in a box like this so that it’ll only be loaded for that page, and no other.

But because it’s included like this, it hasn’t been “enqueued” in a formal way, so any tool that relies on these hooks for processing your CSS will fail. Remember, our job is to find a solution that minimizes headaches in the future and forestalls future problems.

All CSS and JS should be enqueued using the proper WordPress hooks. Otherwise you’re setting yourself up for errors down the line that are hard to track.

The “Right” Way to Change the Layout and Insert CSS

To solve this problem in the most efficient manner, we’re going to do two things programmatically:

1. Change the page layout
2. Insert the required CSS

For this, we’ll use the post “slug” to tell WordPress which posts need to have the new layout.

Genesis allows us to use a filter to modify the page layout, so use the statement that fits your needs. Also, I’ve placed my custom CSS into a new file in the child theme folder called “three-column-css”. Change the name according to your requirements.

Here’s the code:

function inclued_three_column_style() {

    $slug = get_post_field( 'post_name', get_post() );
    switch ($slug) {
    case "post-with-duplicate-title":
    case "post-how-to-remove-the-author-info":
        wp_enqueue_style( 'three_column', get_template_directory_uri() . '/three-column-css.css' );
        add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_sidebar_content_sidebar' );
        break; 
    }
}
add_action( 'wp_enqueue_scripts', 'inclued_three_column_style' );

For each page with the new layout, simply add a new “case” statement with the page slug in quotes. In the example above, the layout will apply to two pages:

1. “post-with-duplicate-title”
2. “post-how-to-remove-the-author-info”

As you can see, each has its own “case” statement. Just add another one for each new page and you’re done! This method has the advantage of placing all new layouts in a single maintainable list, so you always know which pages have been modified. Also, removing a page is as easy as removing the “case” statement. No need to edit the post, make the changes, and save it again.

Finally, the CSS for the new page is added programmatically, in alignment with WordPress’s best practices. I hope you found this code useful!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!