Wordpress Coding Help

Happy Coding Tuesday: How To Make Your Sidebar Larger In WordPress Example

UGH! Coding a WordPress site seems like a chore right? Well, not really if you have the right tools at your disposal and someone to walk you through everything. This week I am starting my new venture, and that includes helping you to make your blog beautiful. Most of us have a theme that we already adore (if you don’t message me on Facebook and I can help). Sometimes that theme is just not how we want it to be right? Today I wanted to share an easy way for you to make your sidebar a bit larger.

I tend to link just a little bit bigger sidebar so that the graphics that I take my time to make can be seen. Of course, you don’t want your sidebar to overwhelm your actual posting but having a larger sidebar can give you more options about what you put in it! Below you will find a screenshot of my blog with the layout that it came with.

 

I am actually happy with the size, but it could be a bit bigger for some of my images that I would like to put into my sidebar. To do this and if you don’t want to get into your code files, I would suggest the easiest way is to go to your dashboard in WordPress and to the customizer. In there you will find “additional CSS.” You can use this area to put in any additional code that you might like without going through all the hassle of using the code files (which is the proper way to do things). This just makes it so much easier, so let’s take a look.

 

Once we are in the additional CSS, we need to find out a couple of things. Firstly the name of your sidebar. You can use “Inspect” to get the name of your sidebar in the code. Inspect is my BFF and will be yours as well. To get “inspect” simply right click on the item you would like to look at.

 

Now you might be thinking, “OH MY LORD,” but really this is super simple. As I can see in my example, the sidebar has a div call of secondary, but since I am using the sticky sidebar the div class is “theiaStickySidebar”. This is what I will be using to make my sidebar a bit larger. The code that I used is below. NOTE: This might change with different themes but play around till you are happy.

.theiaStickySidebar {
width: 115%;
}

The first picture is with this code and the second is without.

 

It is not a huge difference but made all the difference in how easily the images can be read. The last thing you want to do is to check different screen sizes. You can do this again through your Customizer or just get different tables you may have or phones. Everything on my end checks out just fine. Make sure that you save your code in the customizer so that your changes are made 🙂

Disclosure:

In my product postings, most of the products have been received free for my honest review. I will always give my honest opinion. All images and posts are property of Hello Betty.