WP SITES

2948 Tutorials & 189 Plugins

Change Layout Based On Any Conditions

You can easily change the layout settings on any page or post in Genesis. But what if you want to change the layout automatically on multiple pages or posts for some reason?

An example of this is changing the layout for logged in members. You can easily do this using the conditional tag:

is_user_logged_in

Add the conditional tag to a custom function with any of the standard i.d’s used for different layouts and it works perfectly.

Change Layout Of Single Posts For Logged In Members

Here’s a working example which you can add to your child themes functions.php file.

This code will change the layout of all single posts tagged with the name ‘members’ from your default layout to full width.

add_filter( 'genesis_pre_get_option_site_layout', 'change_layout_loggedin_members');
function change_layout_loggedin_members( $opt ) {
if (is_user_logged_in() && is_single() && has_tag('members') ) {
$opt = 'full-width-content';
return $opt;
    }
}

The code also includes a conditional tag for single posts so archive pages which include posts aren’t changed. It also includes another conditional for posts which are tagged with the name ‘members’.

You can easily modify the code above and change the conditionals to suit your needs.

Change Layout For Posts In A Category

Another example would be to display the sidebar-content-sidebar layout on all posts assigned to a specific category.

You can do this simply by using the conditional tag:

in_category

This layout will give you 2 sidebars on each side of your content and reduce the width of the main content area.

Rather than change all layout settings manually, you can easily change them using a custom function.

In this example you would use the layout i.d for sidebar-content-sidebar

add_filter( 'genesis_pre_get_option_site_layout', 'change_layout_posts_in_category');
function change_layout_posts_in_category( $opt ) {
if (in_category('add-category-slug') ) {
$opt = 'sidebar-content-sidebar';
return $opt;
    }
}

You can use either the category name, slug or i.d for your category in the code.

Change Layout On Home Page or Blog Page

This depends on your Reading Settings. If you use the default settings and display posts on the front page, this code will display a full width layout. If you select a static page as your front page and a custom blog page as your posts page, this code will change the layout on your custom blog page and not your front page.

add_filter( 'genesis_pre_get_option_site_layout', 'change_layout_blog_page');
function change_layout_blog_page( $opt ) {
if (is_home() ) {
$opt = 'full-width-content';
return $opt;
    }
}

Full Width Layout On Single Posts

This code will change the layout on all single posts from the default to full width.

add_filter( 'genesis_pre_get_option_site_layout', 'full_width_layout_single_posts');
function full_width_layout_single_posts( $opt ) {
if (is_singular('post') ) {
$opt = 'full-width-content';
return $opt;
    }
}

Changing Layout On All Archive Pages

If you use dozens of categories and want to change the layout on all these pages, you can.

This code will change the layout on all archive pages for tags, categories and author archives.

add_filter( 'genesis_pre_get_option_site_layout', 'change_layout_archives');
function change_layout_archives( $opt ) {
if (is_archive() ) {
$opt = 'content-sidebar-sidebar';
return $opt;
    }
}

You could also add the conditional tag to include your blog page archives:

if (is_archive() || is_page_template( 'page_blog.php' ) ) {

Layout Choices

Layout Settings Genesis

Simply change the i.d using any these default layouts included in Genesis.

  • content-sidebar
  • sidebar-content
  • content-sidebar-sidebar
  • sidebar-sidebar-content
  • sidebar-content-sidebar
  • full-width-content

Change Layout in Template File

Rather than use custom functions with conditional tags to change layout from your functions file, you can also add one line of PHP directly to any template file.

This example creates a full width layout. You’ll find this line of code is already included in most front.page.php, home.php or page_landing.php template files.

Change front-page.php or home.php layout

Simply add this code directly to your home.php or front-page.php file to add a sidebar.

Conditional Tag Based on Layout

This code enables you to execute code based on the page layout used. In this example, the code is executed on any page or post which uses the full width layout. You can change the layout in the code to any other layout your Genesis child theme includes.

add_action( 'loop_start', 'execute_on_full_width_layout' );
function execute_on_full_width_layout() {
if ( 'full-width-content' === genesis_site_layout() )
    echo 'Hello World';
}

Related Posts

4 responses to “Change Layout Based On Any Conditions”

  1. […] Change Layout Based On Any Conditions […]

  2. Keith Davis Avatar
    Keith Davis

    Hi Brad
    Powerful things the old conditionals.
    This is a piece on conditionals related to Thesis theme, but it holds good for any theme / framework.

    Might be a good read in combination with your post.
    http://diythemes.com/thesis/wordpress-conditional-tags/

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Keith

      I read that post awhile ago and know Andrew Norcross is one of the contributing Developers of Genesis.

      However l’ll just point out the code in that post won’t work in any Genesis child themes functions.php file so be careful.

      The example of conditionals will if you know how to include them in a custom function using Genesis hooks.

      The WordPress Codex has working examples and a full list of all the conditional tags you can use in your template files or better still, you child themes functions file.

      1. Keith Davis Avatar
        Keith Davis

        Thanks for the heads up Brad.

Was This Tutorial Helpful?