How to change the sidebar size - manual method and editing using the Visual Sidebar Editor. WordPress increase the width of the template, or stretch the side menu and articles section Wordpress template to the full width
WordPress is a fantastic blogging tool, but unfortunately it's not perfect. Even after many updates and hundreds of new features, some basic UI improvements are still needed to provide a great experience.
I've been writing a lot of long list articles lately, and in the process I discovered an issue with WordPress's built-in visual post editor that I wasn't aware of or didn't really bother me with.
In this short tutorial, I'll show you how to change the width of the main text column in the WordPress visual post editor.
Problem
When creating large posts (mostly with pictures), I often had to save and preview the post to make sure the list was formatted correctly. Additionally, I often had to write text directly on my image because the size of the editor window is almost one and a half times larger than any of my images (as well as the main content block on my site):
Solution
The solution is relatively simple, but you need to know how to implement it. First, you need to know the current width of the content block on your site. In my case, the width of my blog block is 650 pixels.
Then you will need to open your file functions.php and add the following code at the bottom of the file:
Function fb_change_mce_buttons($initArray) ( $initArray["width"] = "650px"; return $initArray; ) add_filter("tiny_mce_before_init", "fb_change_mce_buttons");
Result
As a result, you will see a post editor that matches the width of your content block on the site itself. This way, you can be sure that when you create an entry through the admin console, it will look as close as possible to the final result.
Please be aware that some screen resolutions will change your settings and, for example, only show one column - this will depend on the width of your content.
Some WordPress templates are quite narrow in the side menu, the so-called sidebar, or, on the contrary, narrow in the articles section, and naturally some webmasters need to expand certain boundaries, for example, to accommodate banners. In this article I will tell you how change the size of the header, template, article section or side menu.
Why you may need to change the template size.
You may want to change the size of the template either at the very beginning, as soon as you installed it, or after you have written a number of articles and your first dozens of visitors have begun to appear. 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 banner advertising system from Google-AdSense was chosen. But in order to earn at least two unfortunate cents, you need to take into account two parameters:
- In order for someone to click on an advertisement, the banners that the system will issue must be in certain places. On the Internet they write that this is the left slider, we place a square banner there, and three times inside the article. At the very top, in the center, after some heading, and at the very end. This arrangement will be ideal for people to click on the banner. Of course, there are other options, for example in the pictures, but we are not considering them within the framework of this article.
- Google provides banners of certain sizes.
those. we need to combine the first and second points, namely, make sure that banners from Google or Yandex are placed in the designated places, the left sidebar and in articles. Since my template was too narrow for these purposes, and it makes no sense to hang small banners, because no one will click on them, there is only one thing left to do - expand the side menu and the articles section.
How to enlarge a template horizontally part 1, understand the numbers
To understand how much we need to increase the width of this or that element, we need not to estimate at a glance “a centimeter here is enough, and half a centimeter there,” but to find out these numbers exactly, in pixels. Almost any browser will help us with this, for example:
- Safari
- FireFox
- Google chrome
Personally, I will show Safari as an example, and you will use any browser convenient for you. The differences should only be in one button.
So, the base - 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 block. We will increase everything one by one, don’t worry, it’s not scary.
To change the width of the left menu.
In this case, you can change both the pixels, as we did in steps 3-5, and the percentage on the page. To do this, just change the parameter instead of pixels
These values mean how many percent of the width can be occupied by one or another element. The main thing is that the sidebar and the article take up 100% in total, and not more, otherwise everything will float across the page.
That's all. Now we know what values we need to change so that everything fits. All that remains is to enter the necessary data into the style file.
How to increase the template horizontally part 2, change the width
After we understand the numbers and write them down somewhere on a piece of paper, let's now change them for everyone, and not just for ourselves. To do this:
- Login via FTP to the site
- Find and copy the file /wp-content/themes/Your theme/style.css to your computer
- Make a backup copy of this file, i.e. copy it to your documents folder. So that there are two copies of the file on the computer, one on which we will work, the second which we will not touch. The second serves in case we change something wrong and forget what.
- Open the file in a convenient editor. Now we are faced with a fairly simple task of changing the old values to new ones. There are two ways, the first is easy and the second is hard. The first is to find the old value by searching and write a new one instead. The second way is to look for the name of the styles, look for the width inside the styles and change the value.
Personally, I chose the first, easy method for myself, since it allows you to make changes in just a couple of seconds. So, we are looking for the value 980. A search in the file returned only two parameters, which I need to change.
The first one is responsible for the width of the entire 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 for 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);
All we have to do is change the values from 980 to 1080 and load it back.
That's all, but if you still have any questions, write in the comments, or email me, I will be glad to help you.
A problem that often arises when choosing a WordPress template is the insufficient width of the blocks. Many people immediately want to change the width of the template. For those who are well versed in html or php, this will not create any special problems. But in order to write in detail about how to make changes to the dimensions of a WordPress template for an unprepared person, you will need a whole brochure.
The simplest thing is to order, but those who try to do it themselves gain knowledge. In the future, he will not have to contact specialists for every little detail. Knowing the “basis” it is quite possible to do this. Before making any changes, be sure to make a backup copy of all pages of your resource. In case of inaccurate work, you can easily restore the original appearance of the site.
There are an incredible variety of WordPress templates, they are all different and each changes in its own way. But such basic blocks as: the width of the main page, the header, the left and right columns, and the footer are all there. For work we will need:
-
Web browser Mozilla Firefox.
-
Firebug plugin installed on Firefox.
When everything you need is downloaded, installed and ready to go, open the selected template in Mozilla Firefox and launch Firebug by clicking the beetle icon.
Plugin panel
The plugin panel in which we will work opens at the bottom. All changes made will be immediately displayed at the top of the monitor. On the tab on the right we see the CSS style of the selected element, on the left the html code of the page. To increase or decrease the width of the template, first we need to know the current size of the base. Click on the cursor icon of our plugin.
Elements on the page will be highlighted in different colors, and you can highlight the structure of your site in detail by highlighting each element of the page. Once you receive the name, you will find out the exact dimensions. After the current width has been set, left-click on this value. Using the trial method, we create the most suitable width and test its display.
Feel free to experiment with any elements and values. Current changes cannot in any way affect your page on the server; they are active only in the plugin window (the current Mozilla cache). When updating, all settings are reset.
Editing style.css
Now all that remains is to save these changes for the WordPress template. Typically, the width of the template is specified in style.css. We enter the administrative panel of the website → appearance → editor → style.css → line 79, change the width value. Save.
From the author: Greetings, friends. In the next article on the topic of WordPress, we will look at the question of how to change a WordPress template. If you have never encountered the need to modify a WordPress template, then be sure to read this article, because sooner or later you will most likely have to deal with the issues of customizing and editing a WordPress template.
First, let's define the most frequently asked questions that users encounter when customizing a WordPress template for themselves. Here is an approximate list of them:
how to edit a wordpress template
change template width on WordPress
how to resize wordpress template
how to change wordpress template color
how to change font in wordpress template
And this is just a small list of problems that you may encounter or that you can help others solve, including for a fee, if you develop custom websites.
All the questions in the list above can be solved in two ways depending on the theme that is used for the site. Let's start with the simplest option, which does not require layout knowledge. This option is suitable if the template supports editing from the settings.
Let's go to the Appearance - Customize section and see the main page of the site and the available site settings on the left side of the page. These may include design settings.
As an example, let's try changing the color scheme of the site. Let's go to the Colors menu and change the background of the side and central parts of the site.
As you can see, this is quite convenient and changing the color of a WordPress template is quite simple - we see the result immediately and can evaluate it.
However, not every theme offers all the WordPress template settings we need. For example, there are unlikely to be settings that allow you to change the width of the template on WordPress, for example, even in the current theme there are no settings that allow you to change the font in the template, and so on. What to do in this case? This is where we will have to resort to the second option, and here some layout skills are already needed.
So, most often we only need to edit one file - the style.css file. It is located in your theme folder. Let's change the font color as an example. By the way, you can do this directly from the WordPress admin area. Just be careful and attentive so as not to accidentally “break” the site. It's best to back up your theme before changing anything to it. So, go to the Appearance - Editor menu and by default you should have the theme styles file open for editing.
If this is not the case, then select this file from the list on the right, it is called Style Sheet (style.css). Most often, the font color is set in the body, so let’s find the styles for this element and set red as the font color.
After saving the file, we can refresh the site and see the red color for the main font on the site.
As you can see, customizing a WordPress template for yourself is a fairly simple task. With just a little knowledge of CSS, you can modify your WordPress template and make any necessary template customizations. Using the same scheme, we can solve other similar problems. With this I say goodbye to you. Good luck and see you again!