We help IT Professionals succeed at work.

How do I get a Wordpress page template show 100% width?

kloklo asked
OK there is a template I can use that stretches my pages at 100% and  another  template  that includes the sidebars I need. How do I mix them? Anyone please have a look at the template I need to edit.
Watch Question

Alicia St RoseOwner & Principle Developer/Designer

Can you provide more information. Some links to the templates perhaps?
are you sure the templates only offer one settings?
many themes provide 100% width and side bar as an option when writing a page content (look on the right hand set of options).
otherwise have a look at this theme editor
Alicia St RoseOwner & Principle Developer/Designer

chilternPC, I believe kloklo is speaking about the template files in the theme. The .php files.
Is that correct? If so we need to see the files and the CSS.
you can add sidebars to a theme that has noside bars by following the code mentioned in the link at wordpress https://wordpress.org/support/topic/how-to-add-a-sidebar-4

this will gives the ability to add sidebars to a theme.
then you can add widgets to the side bar.


Thank you all and Yes laughhearty .
My theme does not provide  100% and sidebars at the same time.
I am trying to work on "page-mix.php"  file which has all sidebars I need. The "page-section.php" template makes everything 100% width but it is not the layout I need. I tried to mix and match these two templates for hours but I couldn't make it work - I'm not a coder...
Owner & Principle Developer/Designer
are you trying to have a graphic spread 100% behind primary content and sidebar? Is there away for you to mock up the layout you are trying to achieve in photoshop or on a piece of paper and scan it?

I know I often need 100% width for a lot of the custom themes I build. For instance, I'd like the header and footer background to stretch 100% or a full width slider. Yet, I'd like to keep the content centered. This fix is most often achieved by creating a wrapper div around the content or finding the most outer div and making that 100% width and constraining the content to a max-width (for responsive purposes). Sometimes you have to add several selectors to the max-width: the branding, the menu, main content and footer content, whatever they happen to be called in your theme.

You also may be mixing and matching the wrong templates. A good way to test is to add some words to each template you are using and see if they show up. If they don't then templates you are using are not the ones effecting your frontend output.

Also, it would behoove you to take a look at WordPress Template Hierarchy. This is a nice post the breaks it down in plain English. Without this basic understanding you may indeed spend hours working on something to no avail.

Do you have the theme on a remote server for us to view. It's still rather difficult to attend to this issue without a live working site.


THanks so much laughhearty I used this tag  inside a div wrapper
and all went 100% width..
Is there something more I should do to keep the theme responsive?? You are saying something about constraining the content to a max width.
Thank you!
Alicia St RoseOwner & Principle Developer/Designer

Hi Kloklo,
Constraining to max-width makes sure that on a desktop the maximum width is reached and cannot become any wider. Otherwise, as the browser window got wider for larger screens, the content would continue to stretch 100% across. Not a good look! Most sites put max-width somewhere between 960px and 1032px.


Thank you!