How to extend wordpress theme. How to resize a sidebar - manual method and editing with the Visual Sidebar Editor
From the author: hello friends. In another article on the WordPress theme, we will consider the question of how to change 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.
To begin with, let's define the most common questions that users face when customizing a WordPress template for themselves. Here is a sample list of them:
how to edit wordpress template
change template width in wordpress
how to resize a wordpress template
how to change the color of a wordpress template
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 are developing websites to order.
All 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 section Appearance- Adjust and see home page site and on the left side of the page available site settings. Among them, there may be design settings.
For example, let's try to change color scheme site. Go to the Colors menu and change the background of the side and central parts 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 customizations 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. How to be in this case? This is where we will have to resort to the second option, and here some layout skills are already needed.
So, we need to edit most often only one file - this is the style.css style 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 panel. Just be careful and careful not to accidentally "break" the site. best to do backup themes before changing anything in it. So, go to the menu Appearance - Editor and by default you should have the theme style file open for editing.
If it is not, then select this file from the list on the right, it is called Stylesheet (style.css). Most often, the font color is set in the body, so let's find the styles of this element and set the red color for as the font color.
After saving the file, we can update 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 a WordPress template and produce necessary setting template. By the same scheme, we can solve other similar problems. On this I say goodbye to you. Good luck and see you soon!
You must be able to resize the template if you want to create a good site. By default, many themes offer awkward template frame sizes. Narrow topics are just as bad as being too broad. You should have a middle ground that is just right for the functions on the site. Only in this way the content of your resource will be displayed correctly, and all widgets will fit into the sidebar. In this article, you will learn what are the ways to adjust the size of the side columns.
Without a sidebar, the site looks useless. If you want to somehow visually dilute the content of the page, you should change the WordPress template by adding a sidebar of a certain size. Usually the side columns are already installed in it by default. But not always the width of the sidebar is optimal for a particular project. Let's look at the methods of how to change the width and height of the side of the WordPress site.
What should be the size of the sidebar
You may not need to change anything. Change the sidebar only if it looks “crooked” and unnatural. First, make sure that the sidebar has a smaller width than the body of the page that contains the content. The sidebar is not a key part of the site, so it should not be given much attention - at most it can take up 40% of the visible part of the page. Please note that if you have two sidebars (or several), their width should not exceed 50% of the width of the entire page. It is better to use only one side column - this way it is more efficient.
There is a “golden rule” of designers for sites that use only one sidebar. This rule states that if there is only one sidebar on a page, it should not take up more than 38% of the site's width. Many eminent web designers talk about such a mysterious figure (for example: Jarel Remik).
As for the height, it is important that the sidebar does not stick out on top of the site. Its height size in the upper limit should be similar to the main part of the page. But the lower limit can be changed so that the base part of the site is longer. No need to try to cram everything on the site into the sidebar - just the main thing. And if there is really a lot of information, then make two sidebars, but you don’t need to stretch the sidebar to the footer of the site.
How to change sidebar size manually
Now let's talk about how to independently change the size of the side columns and the template frame itself without using any add-ons. This method involves changing source code pages. It is in the html tags that the template size parameter is enclosed. Please note that resizing may have negative consequences if you upload a custom-sized image as a background. Therefore, it is better to change the frame parameters at the site layout stage.
The sidebar parameters in the code are in the form of a block. To change the size of the entire frame, including the side columns, you will need to get into the code and alternately adjust the numerical parameters of the width and height of each element. Namely:
- header - responsible for the size of the site header;
- bg - this is the main content, that is, the part of the page on which the articles will be placed (it is in this part that the sidebar is located);
- footer is the footer of the site, that is, its lower part.
To find out the dimensions of a particular block, you need to click on the wrapper item in the “Page Code View”. On the side of the CSS section of the browser, you'll see the numeric values for the element's width in pixels. To change the size of the entire wireframe, you need to edit the main element, and then make changes to other elements as well. It is recommended to do this on local server so that your site does not “jump” in front of users. And, in general, it is better to do this even before the launch of an Internet project.
To change the size of the sidebar, find something like this line
This line is responsible for the parameters of the middle part of the page, that is, for the content block and for the side columns. Don't touch the "main" line - this is the main part of the site. You need to find the "mainnav" tag - this is the sidebar. All you need is to change the width item in CSS, which is responsible for the width - to enter a different size value. You can make the sidebar smaller or larger, but remember to follow the sizing tips above to ensure your site displays correctly.
In order for the changes to be saved, they must be made on the server. That is, you can initially test the adjustments on local hosting, but then be sure to copy the edited style.css file, and add it to the databases of the main server. Only then will the changes take effect.
sidebar resizing plugin
If you don't want to wade through the cascading style sheets and look for elements that need to be edited, then you can use the Visual Sidebar Editor for WordPress plugin. This is a special module that is specifically designed to generate sidebars. It is part of the larger Visual Composer tool.
The Visual Composer plugin is a natural page builder for WordPress. With it you can create from scratch ready template. The module works with shortcodes, and is very easy to install. If resizing the sidebar isn't the only thing you need to do, download the Visual Composer plugin and add the Visual Sidebar Editor as an add-on. If the problem is only in the size of the sidebar of the page, then the Visual Sidebar Editor module will be enough.
The advantage of using a plugin to change the sidebar is that it does everything automatically. That is, you show what you want to change using the Drag & Drop system, and the module independently corrects the element code based on your requests. If you want to try your hand at editing html tags, then the plugin will provide you with such an opportunity. In addition, it has special shortcodes for making additional features on the site - more than 40 extensions.
Another plus of using such a plugin for editing pages is that changes are saved, regardless of the version of the engine. Even if you update WordPress, the template will not change - it is controlled by a module. Therefore, you can switch to older versions or update WordPress - this will no longer harm the dimension of the sidebar. In addition, the plugin works with convenient import and export - that is, you can copy sidebars from one site and transfer them to another. And, most importantly, the module works according to an extremely clear principle - even a beginner will quickly master it.
If you like the work of the Visual Sidebar Editor, consider installing the complete set of add-ons - the Visual Composer module. Then it will be easy for you to edit any element on the portal pages.
Do you want to create a full size WordPress page?
Then back to why we're here.
Method 1: Using the Built-in Width Template in a WordPress Theme
This method is recommended if your WordPress theme already comes with a full page template. If you don't have it, refer to the next choice and get it.
First, you must edit the page or create a new one by visiting " Pages > Add New page
In the page edit window, select Full Width as a template under the page attributes checkbox.
After choosing a model Full Width You must register your page. You can continue customizing the page to add more content, or click the preview button to see it in action.
If you don't have the "Full Width" option - "template full width' - in your page edit screen, it means that your WordPress theme does not have this page.
But don't worry, we'll show you how easy it is to create a full page without changing your WordPress theme.
Method 2: How to Create a Full Width Page Template
This method requires you to edit the WordPress theme files you are using and have a 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 paste the following code into an empty file:
This code simply determines the name of the file template and asks WordPress to extract the header template.
Then you need the content part of the code. Connect to your site using an FTP client ( or file manager in cPanel) then go to /wp-content/themes/your-theme-directory/ .
Then you should find a file named " page.php". This is the default page template file for your theme.
Copy everything after the " get_header() And paste it into a file Full width.php This is what you have created on your computer.
Now you need to look at the contents of the "full-width.php" file and remove this line of code:
This line simply restores the sidebar and displays it in your WordPress theme. By removing this, your theme will not display the sidebar when using the template Full Width.
You can see this line appearing multiple times in your WordPress theme. If your WordPress theme has multiple, you will see each sidebar referenced once in the code. You must decide which sidebars you want to keep.
Your website is loading slowly, discover
If your theme does not display sidebars on your page, you may not find this code in your file.
This is how our full-width.php code takes care of making changes. Your code may be slightly different depending on your theme.
Then you need to download the file Full width.php In your WordPress theme folder with .
You have successfully created and uploaded a custom full width page template for your theme. The next step is to use this template to create a full size page.
Go to the dashboard and edit or create a new page.
On the page edit screen, locate the page attributes checkbox and click the drop-down menu under the Model option.
You will be able to see your model. Go ahead, select it and save or refresh the page.
Now you can visit your website and you will see the sidebars are gone and your page is showing as a single column page. It may not have been filled yet, but now you are ready to distribute it in a different way.
Make your site popular by discovering
You will need to use the Inspect tool to discover the CSS classes your theme uses to define the content area.
You can then adjust its width to 100% using CSS. We used the following CSS code:
.page-template full-width zone.content(width: 100%; Margin: 0px; border: 0px; padding: 0px; ) .page-template fullwidth.Output(margin: 0px; )This is what Twenty Seventeen will look like.
That's all for this tutorial, I hope it will allow you to create full size pages.
The above methods are free for those who can afford it and want to quickly create full or full width layouts.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern look and streamline your blog or website management.
We offer you several premium WordPress plugins to help you do just that.
1. Divi Builder
Divi Builder is a high quality page builder that is highly regarded Elegant themes Although it is commonly used as part of the Divi WordPress theme, Divi Builder is also a standalone plugin that can be used in other WordPress themes.
Divi Builder allows you to edit your content using a visual interface on the interface side as well as a server side interface, although most users prefer the former interface.
Basically, instead of sidebars, everything is in popups and floating buttons. It gives you access to 316 predefined templates distributed across 40 different presentation packages and also allows you to save your own designs as templates.
We invite you to open
One of the hallmarks of Divi has always been the control over the styles it gives you. On three different tabs, you can adjust various options including responsive controls, custom spacing, and more.
You can even add custom css because its css editor bundles basic check and autocomplete.One of the criticisms of Divi Builder has always been that it is based on . This means that if you disable it once, you will be left with a bunch of shortcodes in your content. While a little depressing, there are now fewer issues with plugins like Shortcode Cleaner.
2. Builder
No wonder Themify Builder is the offering of Themify team. It integrates it into many of its WordPress themes to give customers easy customization options. But you can also buy it as a standalone plugin and use it with any WordPress theme.
Like Divi Builder and WPBakery Page Builder, Themify Builder allows you to create layouts in the frontend or backend.Another good thing is that this plugin allows you to customize your responsive breakpoints (but only on a site-wide level).
Discover create an online store and easily sell your products online
An interesting feature of Themify Builder is that it still allows you to use the standard WordPress editor while other page builders force you to use the Page Builder interface for everything.
3. Fakir
Initially launched in 2016, the WordPress Elementor plugin is one of the youngest developers on this list. Despite its late launch, Elementor has quickly amassed more than 1,000,000 active installs on WordPress.org, making it one of the most popular WordPress builders.
If you have any suggestions or comments, please leave them in our section
It often happens that the theme you like has a narrow area for posts and its settings do not provide for changing the width. In this case, it can be increased, with minimal knowledge HTML and css. For example, we use the popular free theme Patagonia. You can extend the theme with the help of a wonderful plugin Firefox— Firebug. First you need to install it by downloading it from here. Then turn on plugin, as it shown on the picture - Tools tab — Web development — Firebug — open firebug:
After that, at the bottom of the screen, it is necessary, by pointing the cursor and clicking with the mouse, to select various elements. In this case, on the right side, will be displayed css styles
, and in the page area, this or that area will be highlighted - the main, sidebar, header. We are now interested in the main area that we will get to when we "go out" to the tag For example, increase the width main area from 550 pixels to 620. To do this, you need to change the line width: 550px file style.css. If the theme is already installed, you can edit this file directly from the admin panel, if not, then you need to unpack the archive with the theme and make changes to the file using the editor. In our case, the theme is installed, so go to admin panel— Appearance — Editor- open the style.css file, search for the line width: 550px and change the width value of 550px to 620px. Click Update file. We go to the site and see that the area of posts has expanded, but in some places it has “run into” the right column. In this case, we need to proportionally narrow this area. For this we will also use firebug plugin, as in the previous case. Finding a tag We do the same procedure with editing style.css as in the previous case with the main area, only now we edit the line margin: 0 0 0 580px; Change the indent value in it from 580px to 630px. Now everything is fine. The recording area has become wider and does not run into the area sidebar. It also happens that styles are written not only in the style.css file, but also in the file screen.css
