• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Change The Layout For Specific Pages On WordPress

Bhagwad Park

Published on: December 19, 2018

Categories: WordPress 0

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:

Genesis Allows you to Change the Layout

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:

Add Header Scripts

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 Profile Picture
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!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA