How to Change a Page Layout on WordPress

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Phone

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "2", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_2" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_2"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_2" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [2, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 2, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );

We get the question all the time.

How do I change the layout of my WordPress theme?

Well, now we have an easy answer. Introducing the new Content Layouts tab for our WordPress themes. Find out how to easily set the look and feel of your website using our powerful new feature. Also, learn about our newest plugin Conductor and how you can use it for truly custom WordPress page layouts on the front page and other pages of your website. The conductor plugin is actually 4 years old as of this post revision.

Content Layouts from Slocum Themes

Content layouts enable the user to change the look and feel of their website on the WordPress.org platform. This is a WordPress feature and applies to most WordPress Themes.

Putting a left sidebar on your home page but a right sidebar on a single blog post, for example, has never been easier than with this feature built into some of our themes.

Our layout editor is also responsive, so when people view your home page on a smartphone or tablet, the sidebars and content adjust accordingly.

Where to go to Change WordPress Layout on our themes

Like our one-click child themes and social media options, finding the Layouts section is as simple as installing and activating one of our themes on WordPress and then going to Appearance > Theme Options > Layouts.

Once you have navigated there, you can see all of your options for which types of pages you can modify the layout of.

This includes:

The Global Site
The Home Page
The Main Blog Page (designated under Settings > Reading)
Single Posts
Landing Pages
Archives
Category Archives
Tag Archives
EVEN THE 404 PAGE CAN BE CHANGED!

Create a Custom Layout for a WordPress Category or Custom Post Type

You can also modify the layout of specific post types and/or categories, which is truly awesome.

Simply go to the custom layouts section at the bottom of the layouts tab and select the from the Post Types or Categories radio button. This will give you access to all of the available post types or categories that you can modify.

Select the item you would like to modify and click the “Add Custom Content Layout” button. This will create a new section for that post type or category. You can do this for as many categories and post types as you have.

Make sure to save your options once you have adjusted to the layout that you would like.

Page Layouts are Available on these WordPress themes:

Try the Free Version of Our Themes First, Before you Buy!

How to Change Blog Layout and Front Page Layout in WordPress

If you are not interested in getting your feet wet with our themes, you can change the layout of a WordPress page on a rudimentary level by going to the Settings section.

From the Settings section, you can navigate to Reading. This features two drop-downs to tweak what is displayed on the home page and what page is the blog page.

Note:

Adjusting the Blog Page from this settings area may be required before the layout for the Blog Page in our Theme Options will take effect.

For example, if your blog page is a page titled “Pictures of Kittens”, you may have to go into this settings page and make “Pictures of Kittens” the proper Blog Page before you can go into our Theme Options and make the outline look a certain way.

Custom WordPress Page Layouts with Conductor

Additionally, we have also launched Conductor, a plugin that truly allows you full control over your content and how it is displayed.

With Conductor, you can set the content layouts like above, but you can also set what content appears where on a page. Do you want specific posts or pages to appear above or below other pages, posts, images, etc.? Conductor can handle that.

Better yet, Conductor is theme agnostic (works with many themes, not just ours), so if you have an existing website, Conductor is a plugin that should work with your theme.

Here is a video showing how Conductor works to make your life much easier. You can check out more information about Conductor here.

If you have any questions about your theme working with Conductor, contact us before you buy it!

Get Conductor

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Share Tweet Share