Site logo

Archived topic

Page and Post Width

7 replies · Started by Amit on April 27, 2021

Viewing posts 1–8 of 8

Currently I am using a Layout element to control the width of pages and CSS to control the width of posts. It feels a little messy or unorganized as there is a list of exceptions that I need to control in the element.
Can you help me put things in an organized way -
1. I need few pages like Home, Contact Us, Subscribe and a few more to be of wider width with some padding at left or right.
2. I need posts and a few content pages to be 800px wide.

Let me know how this can be done by just using the Content container option or something easy!

Hi there,

I believe you only need 1 Layout for this. (unless you have multiple width you want for other pages/posts.)

Here's my recommendation.

As for the wider pages/post, just use the customizer settings. Set the desired content with on Appearance > Customize > Layout > Container and set the "wider" container-width value of your preference. With this, we're basically making the "wider page width" as our default.

You then create a layout element for the pages/post you want to set 800px on. Set the display rule to pages/post you want this applied on.

Now the issue is, this won't have any padding. Let's just add that manually with custom CSS.

Try #content { padding: 40px }

Alternative to Layout element, you can try a PHP filter.

Example: Applying a different with to "about-us" and "contact-us" page slugs.

add_filter( 'option_generate_settings','lh_single_posts_settings' );
function lh_single_posts_settings( $options ) {
    if ( is_page(array('about-us','contact-us')) ) {
       $options['container_width'] = '800';
    }
    
    return $options;
}

But this will be tedious if you need to specify a lot of pages or specific posts.

What are Content Containers in the Page Edit area? Can I choose 'full-width' page for wider look and make 'Default' as 800 pixels? What is the 'contained' option there

Hi there,

how many different widths do you require ? And is there any other criteria to choose a different width eg. has a sidebar

I just need 2 kinds of width - posts and pages both 800px.
I only need some pages to be full width with some padding option, specific ones like front, about, contact us, and some category pages.
For that, I have added a layout element with width of All pages and posts to be 800px with some exceptions. But those exception pages are growing long, so I thought to use the 'Content Containers' option at the side of pages when editing, but 'Full-width' option didn't worked.

There is a workaround - see this topic here:

https://generatepress.com/forums/topic/header-layout-control-for-client/#post-1421567

It registers a custom taxonomy ( like categorites or tags ) in your post/page editor called Element Controls.
Like a normal Category you can add terms such as Wide Width.

Then you can simply create a single Layout Element that is applied to all Pages and Posts, and set the Exclusion to Post Element Controls > Wide Width. Then any post/page you add that term to will be excluded.

Works like charm! Now that is what I call a great solution! Thanks David

Glad to be of help!

This archived topic is closed to new replies.