How to expand the page in WordPress. WordPress Theme Width Change

Often, when selecting a WordPress template, a problem occurs is an insufficient block width. Many immediately occur the desire to change the width of the template. For those who are well versed in HTML or PHP, it will not create special problems. But in order to write in detail how to make changes in the size of the WordPress template for an unprepared person, you will need a whole brochure.

The simplest thing is to order, but the one who is trying to do it independently receives knowledge. In the future, he does not have to contact specialists for each little things. Knowing the "basis" to make it quite possible. Before starting, any changes, be sure to make a spare copy of all pages of your resource. In case of inaccurate work, you can easily restore the initial site of the site.

WordPress templates are an incredible set, they are all different and everyone changes in their own way. But such basic blocks like: the width of the main page, the hat, the left and right column, the basement have everything. To work, we will need:

Web browser Mozilla Firefox..
Firebug plugin installed on Firefox.

When everything you need downloaded, installed and ready to work, open the selected template in Mozilla Firefox and run Firebug by pressing the beetle icon.

Plain panel

Downstairs the plugin panel is opening in which we will work. All made changes will immediately be displayed at the top of the monitor. On the right tab, we see CSS the style of the selected item, on the left hTML code pages. To increase or decrease the width of the template, the first thing we need to find out the current base size. Click on the cursor icon of our plugin.

Elements on the page will be highlighted by different colors, and you can highlight each page element, familiar with the structure of your site. Getting a name, learn exact dimensions. After the current width is installed, the left mouse button is pressed to this value. We create the most appropriate width and test, its display.

You can safely experiment with any items and values. Current changes can not affect your page on the server, they are active only in the plug-in window (current mazyl cache). When updating, all settings are reset.

Rules style.css

Now it remains to save these changes for WordPress template. Typically, the template width is prescribed in style.css. We enter the administrative panel of the website → Appearance → Editor → STYLE.CSS → Row 79, change the value width. We save.

Some wordPress templates Pretty narrow in the side menu, the so-called sidbar, or vice versa narrow in the section of articles and naturally some webmasters need to expand certain borders, for example, the banner accompanied. In this article, I will tell you how change the sizes of the header, template, partition of articles or side menu.

For which it may be necessary to change the size of the template.

The size of the template you may want to change both at the very beginning, as soon as installed and after they wrote a number of articles and you began to appear the first dozens of visitors. For example, I needed to expand the template after I wanted to try to earn the first couple of cents on advertising from my work - a blog. For these purposes the system was selected banner advertising from Google- Adsense. But in order to earn at least the unfortunate two cents need to take into account two parameters:

To someone clicked on advertising, it is necessary for the banner that the system will be issued in certain places. On the Internet they write that this is the left slider, there are a square banner, and three times inside the article. At the very top, in the center, after some kind of header, and at the very end. Such a location will be ideal for people click on the banner. Of course there are also other options, for example in the pictures, but we do not consider them within this article.
Google issues a banner of certain sizes.

those. We need to combine the first and second item, namely, to make the banner from Google or Yandex to be placed in the place allocated for this, left Sidebar and in articles. Since my template was too narrow for these purposes, and the small banner hang out does not make sense, because nobody will not be on them, then only one thing remains - stretch sidebar and section of articles.

How to increase the pattern horizontally part 1, we understand the numbers

To understand how much it is necessary, we need to increase the width of one or another item. We need not to threaten at the glance "enough centimeter there, and half a centimeter there", and learn these numbers exactly in pixels. Almost any browser will help us in this, for example:

Safari.
Firefox.
Google Chrome.

Personally, I will show on the example of Safari, and you are on any browser convenient for you. Differences should only be in one button.

So, the base is our site size consists of 4 elements, the size of the template itself, the page size, the size of the article block and the left menu unit. Will we all take turns, do not worry, it is not scary.

To change the width of the left menu.

In this case, you can change both pixels, as we did in paragraph 3-5 and the percentage on the page. To do this, it is enough to change the parameter instead of pixels

1	width: 31.8%;

These values \u200b\u200bmean how many percent of the width can be occupied by one or another element. The main thing is that in the amount of Sidebar and the article occupied 100%, and not more, otherwise you will be swollen on the page.

That's all. Now we know what values \u200b\u200bwe need to change, so that everything is in bulk. It remains small, to make the necessary data in the style file.

How to enlarge the horizontal pattern part 2, change the width

After we understand the numbers, and recorded them somewhere on the leaves, let's now change them for everyone, and not just for yourself. For this:

Go to FTP to the site
Find and copy to your computer / WP-Content / Themes / Your Theme / Style.css
Make a backup of this file, i.e. Copy it to my documents folder. To make two copies of the file, one over which we will work, the second that we will not touch. The second serves in case if we change something wrong and forget that.
Open the file in a convenient editor. Now we have a pretty simple task to change the old values \u200b\u200bto new ones. There are two ways, the first light second is heavy. The first is searching for the old value and write a new one instead. The second way - we are looking for the name of the styles, inside the styles looking for the width and change the value.

Personally, I chose the first one for myself, an easy way, since it allows you to make changes literally in a couple of seconds. So, we are looking for a value of 980. The search for the file was given only two parameters that I need to change.

The first one is responsible for the width of the site:

1 2 3 4 5 6 7 8

#page (Min- Height: 100px; Clear: Both; width: 96%; padding: 0; padding- top: 24px; max- width: 980px; overflow: hidden;

#page (min-height: 100px; Clear: Both; width: 96%; padding: 0; Padding-top: 24px; max-width: 980px; overflow: hidden;

The second is the width of two elements, the list of articles, and the left menu:

1 2 3 4 5 6 7 8 9 10 11

. Main- Container (width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #FFF; Position: relative; - WebKit- Box - Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17) ; - Moz- Box- Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17); Box- Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17);)

Main-Container (width: 980px; margin: 0 auto; overflow: hidden; padding: 0; background: #FFF; Position: relative; -Webkit-Box-Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17) ; -Moz-Box-Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17); Box-Shadow: 0px 0px 10px RGBA (50, 50, 50, 0.17);)

All that we have remained to change the values \u200b\u200bof 980 to 1080 and download back.

That's all, but if you have some questions, write in the comments, or I will be glad to help you.

It often happens that the topic you like has a narrow area for recordings and in its settings does not provide a change in the width. In this case, it can be increased, with minimal knowledge HTML. and CSS. . For example, we use the popular, free Patagonia theme. You can expand the topic with the help of a wonderful plugin Firefox.— Firebug.. First, it should be installed by downloading from here. Then turn on plugin., as it shown on the picture - Tool tab — Web development — Firebug. — open Firebug.:

After that, at the bottom of the screen, it is necessary, tipping the cursor and click the mouse, choose different elements. At the same time, on the right side, will be displayed. styles CSS., and in the page of the page, this or that region will be highlighted - the main one sidebar, header.. We are also interested in the main area on which we will fall when "will come out" by tag

. File fragment will be displayed on the right side style.css.. And here it can be seen that the width of the main area is 580 pixels. And this is not enough for our needs.

For instance, running width The main area with 550 pixels, up to 620. To do this, you need to make changes to the string width: 550px File style.css.. If the topic is already installed, you can edit this file, directly from the admin, if not, you must unpack the archive with the topic and make changes to the file using the editor. In our case, the topic is installed, so we go into adminca— Appearance — Editor - Open the STYLE.CSS file, we find the Width: 550px string and change the value of the 550px width to 620px. Zhmem. Update file..

We go to the site and see that the area of \u200b\u200bthe posts expanded, but in places "hit" on the right column. In this case, we need to proportionally narrow this area. For this we will also use plugin Firebug., as in the previous case. Find tag.

\u003e. In file style.css., we see that the SideBar width is not specifically using the property. width, but using margin: 0 0 0 580px;

We do the tight procedure with editing style.css, as in the previous case with the main area, only now edit the string margin: 0 0 0 580px;We change the value of the incidence from 580px to 630px. Now everything is fine. The area of \u200b\u200brecords has become wider and does not run to the area sidebar. It also happens that the styles are spelled not only in the style.css file, but also in the file screen.css.

Do you want to create a full-size page on WordPress?
Then let's go back to why we are here.

Method 1: Using Built-in Width Template in WordPress theme
This method is recommended if your WordPress theme is already equipped with a full-sized page template. If you do not have it, contact your next choice and get it.
First, you must edit the page or create a new one by visiting " Pages\u003e Add New page
In the page editing window, select Full width As a template under the page attribute attributes.
After selecting the model Full widthYou must register your page. You can continue the page configuration to add more content, or click previewto see it in action.
If you do not have the "Full Width" option - "Full Width Template" - on your page editing screen, this means that your WordPress topic does not have this page.
But, do not worry, we will show you how easy it is to create a full-size page without changing the WordPress theme.
Method 2: How to Create Page Page with Full Width
This method requires you from editing the WordPress files that you use, and for the basic understanding of PHP, CSS and HTML.
By the way, we also invite you to consult with
First you need to open text editor, such as "Notepad", and insert the following code into a blank file:

This code simply defines the name of the file template and asks WordPress to remove the title template.
Then you need the content part of the code. Connect to your site using the FTP client ( or file manager in cpanel) then go to / WP content / Topics / Your thematic catalog / .
Then you must find the file named " page " This is the default page template file for your topic.
Copy everything after the function " get_header () And insert it into the file Full width.php. That you created on your computer.
Now you need to see the contents of the file "Full-width.php" and delete this code string:

This string simply restores the sidebar and displays it in your WordPress theme. Removing it, your topic will not display the sidebar when using a template Full width.
You can see that this string appears several times in your WordPress theme. If your WordPress theme has a few you will see each side panel, which refers to once in the code. You must decide which side panels you want to save.
Your website is loaded slowly, discover for yourself
If your topic does not display the sidebar on your page, you can not find this code in your file.
Here's how our Full-width.php code takes care of making changes. Your code may differ slightly depending on your topic.

Then you need to download the file Full width.php. In your WordPress theme folder with.
You have successfully created and downloaded a custom full width page template for your theme. The next step will be to use this template to create a full-size page.
Go to the toolbar and edit or create a new page.
On the page editing screen, find the page attribute check box and click the drop-down menu under the "Model" option.
You can see your model. Forward, select it and save or update the page.
Now you can visit your website, and you will see that the side panels disappeared, and your page is displayed as a page with one column. Perhaps he is not yet filled, but now you are ready to spread it differently.
Make your site popular, discovering
You will need to use the INSPECT tool to detect the CSS classes used by your topic to determine the content area.
You can then configure its width to 100% using CSS. We used the following CSS code:
Software template full width zone .content (width: 100%; margin: 0px; border: 0px; Uphony: 0px;). Full width template.
That's how it will look like twenty seventeen.
This is all for this lesson, I hope that it will allow you to create full-size pages.
The above methods are free for those who can afford and want to quickly create full or full width layouts.
Discover also a few premium WordPress plugins
You can use other WordPress plugins to give a modern look and optimize your blog management or website.
We offer you a few premium WordPress plugins that will help you do it.
1. Divi Builder.
Divi Builder is a high-quality page designer, which is highly valued Elegant themesAlthough it is usually used as part of the WordPress Divi theme, Divi Builder is also a separate plugin that can be used in other WordPress topics.
Divi Builder allows you to edit your content using the visual interface on the interface side, as well as the interface on the server side, although most users prefer the first interface.
In fact, instead of the side panels, everything is in pop-up windows and floating buttons. It provides you with access to predefined templates 316, distributed on various Presentations 40 packages, and also allows you to save your own designs as templates.
We suggest you open
One of the features of Divi has always been control over the styles that he gives you. On three different tabs, you can configure various parameters, including adaptive controls, configurable interval and much more.
You can even add a custom CSS because its CSS editor combines basic check and auto-filling.One of the critics Divi Builder has always been that it is based on, it means that if you turn it off once, a bunch of shortcods will remain in your content. Although this is a little depressing, but now there are fewer problems with such plugins as Shortcode Cleaner.
2. Builder
It is not surprising that Themify Builder is the offer of Themify team. He integrates it to many of his WordPress, to provide customers with simple settings. But you can also buy it as a separate plugin and use it with any WordPress theme.
Like Divi Builder and WPBakery Page Builder, Themify Builder allows you to create layouts in the interface or backend.Another good thing - this plugin allows you to configure your responsive control Points (But only at the level of the entire site).
Discover create an online store and easily sell your products on the Internet.
An interesting feature of Themify Builder is that it still allows you to use the standard WordPress editor, while other page designers make you use the Page Builder interface for everything.
3. Fakir
Initially launched in 2016, the Wordpress Elementor plugin is one of the youngest developers of this list. Despite the late launch, Elementor quickly accumulated more active settings 1,000,000 on WordPress.org, which makes it one of the most popular WordPress designers.
If you have suggestions or comments, leave them in our section