Archived topic
Page and Post Width
7 replies · Started by Amit on April 27, 2021
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!