Tutorials

Sidebar Tweaks and Basics To Make Your Theme More Awesome

Pinterest LinkedIn Tumblr

WordPress is improving in each of its updates visually and functionally. Navigating the dashboard is a little different, but if you have spent any amount of time with earlier WordPress versions, then it shouldn’t take long to figure it out. WordPress sidebars have had a major change with version 3 to onwards, and, in my opinion, some of them are good and some are excellent.

Getting to sidebar widgets is just a little different from earlier versions in that the “Presentation” menu is now called “Appearance“. Once in the “Widgets” submenu, you will see it has a completely different look and feel.

WordPress Sidebar tweaks

Today we will look at some of the most common sidebar tweaks to help you in your WordPress theme setup and development.

How To Add Sidebar To Your Theme?

Whether you are using a WordPress default theme or any customized theme, it may or may not have a sidebar. Furthermore, If you are using the static front page option for themes that don’t have default sidebar, you may want to add the WordPress sidebar on pages as well. If this is the case, you can add the sidebar to the any WordPress theme pages very easily.

Before continue, you will also need to change the file permissions on your current theme template files to edit them.

Step 1: Click on Appearance from the main panel and then Theme Editor.

WordPress Theme Editor

Step 2: On the right side, you will see a list of the current theme’s templates. If you see a “page.php” (Page Template) Click that, and the code will appear in the editor box. Copy all the code in the editor and paste it into Notepad for backup. (It is wise to Schedule a Backup to be done before modifying anything on your blog.)

Step 3: Now at the very bottom of the editor box, you should see this bit of code:

</div>
<?php get_footer(); ?>

That is telling the page template to get the themes footer, what we are going to do is tell the page template also to get the sidebar. Replace the above code with the following code and click “Update File”

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Note: If you don’t see a “page.php” (page template) then try the same steps above with the “index.php” (Main Index Template) But be sure to copy the unedited code first into Wordpad or Notepad so you can put things back if they don’t work. Keep in mind that all WordPress themes are a little different and made by many different people, so the files in them will vary.

Important Information

If you managed to corrupt your theme files and it’s not displaying correctly or worse you can’t even see your blog; go back and paste in the unedited text you saved in Notepad and click “Update File” to put things back.

What? Didn’t you save a backup? Well, then you will need to delete the corrupt file in your hosting account and upload an unedited version of it. Not sure what file you messed up? Man, you are a butcher! Then upload a completely unedited version of the entire template to your hosting account.

How To Remove Sidebar From your Theme?

There may be times you want to create a page, not a post, on your blog but don’t want to show the sidebar on it. This is a pretty easy thing to do if you are not afraid to hack around in the theme’s files.

To start you need to create a custom page template and I have already posted instructions about that here: How To Create A Custom WordPress Page Template.

After you make the custom page template, all you need to do is delete the sidebar from it by removing the following code. This code is usually placed at the bottom of the file, but it may be elsewhere depending on your WordPress theme.

<?php get_sidebar(); ?>

And yes, always do keep a backup of your theme files.

How To Add a background color to your Theme Sidebar?

Wow is that title long enough for you? I searched for the answer to this for hours and what seems like second nature to the geeks drove me nuts! Let’s learn how to add a background color to your WordPress theme sidebar like below in the image.

add background color to sidebar

So here we are going to customize WordPress sidebar further to get everything looking uniform throughout the entire blog by adding a background color to the sidebar.

Let’s Get Started

Step 1: First, you need to be able to either edit the theme’s files through the WordPress dashboard or edit them from your hosting accounts control panel. Here we do it from WordPress dashboard.

Step 2: From the WordPress dashboard go to Appearance > Theme Editor.

Step 3: Click the “style.css” (Default WordPress Theme Stylesheet Template) on the right side and the style.css file code will be visible in the editor.

Warning if you are not experienced with editing these files copy all the text in here and paste it into Wordpad or Notepad and save a copy of it on your computer.

Step 4: Now, add the below code to the end of your stylesheet. #1171b0 is a color code. Try to use the color code that matches your theme color scheme. Almost, every WordPress theme is somehow different and it may be hard to give you the exact id/class for your sidebar. So, I put three most commonly used IDs to try out first. If it doesn’t work, simply ask me in the comments section below.

#secondary {
  background-color: #1171b0;
}

OR Try this code.

#sidebar {
  background-color: #1171b0;
}

Or Try this one.

#main-sidebar {
  background-color: #1171b0;
}

Click “Update File” and check out your blog to make sure you did it correctly. If your WordPress blog is all messed up just paste the code back in from the backup file you made. And don’t blame me if you didn’t make a backup of the files, I warned you twice!

You should always make a backup of your blog before you install a plugin, update WordPress and edit any theme file.

Creating a list of links in a WordPress text widget is not hard to do if you know a bit about HTML coding. If you don’t have any HTML knowledge you can still create a list in a WordPress text widget too, if you know where to find the right code to copy. This WordPress sidebar tweak will show you how to find and copy the code to match the other lists shown on your WordPress sidebar.

First, let’s just create a simple list, this can be done using simple HTML code. Remember WordPress sidebar text widgets can accept HTML, plain text or scripts. Below is an example of a list of links, your theme may have a style for this type of list in its stylesheet. If it does, it will pick up the style that matches your sidebar. If not you will just have a simple list. Notice the first and third links open in the same window, the second link will open the link in a new window by using target=”_blank in the URL. The names of the sites; “Site One Name”, “Site Two Name” and “Site Three Name” are the anchor text or what will be shown as the link to be clicked.

Notice the first and third links open in the same window, the second link will open the link in a new window by using target=”_blank in the URL. The names of the links are; “WPArena”, “WordPress Hosting” and “WordPress Deals” are the anchor text or what will be shown as the link to be clicked.

<ul>
<li><a href=”https://wparena.com/”>WPArena</a></li>
<li><a href=”http://wparena.com/wordpress-hosting/” target=”_blank”>WordPress Hosting</a></li>
<li><a href=”https://wparena.com/deals/”>WordPress Deals</a></li>
</ul>

Here is a little trick you can use to find the same code to use to match an existing WordPress widget list. Depending on what browser you are using, you are using Firefox, right? No? Well, you should be.

Anyway, when you are looking at your WordPress blog’s main page with Firefox click “View“, then “Page Source” on the toolbar and the code for your current page will show. Internet Explorer is similar click “View” then “Source“.

Now you will see the source code of your blog. Next look for the area where the sidebar begins which is usually something like this: <div class=”sidebar”>. Now look for the type of widget you want to copy for your new text widget.

In the case below, I have used the Archives widget class to generate my list of links to look exactly like the Archives widget. Now, pay close attention to the code to make sure you get all the proper opening and closings tags.

And In this case, I am showing where to change the name from Archives to “Change The Title Of The Widget Here”. Placing all of that code in the text area will eliminate the need to use a title for the text widget, this is taken care of using “widgettitle” class. Simply copy all the code from the widget found in the source code and change the title of the widget, the URLs, and the anchor text.

<li id=”archives” class=”widget widget_archives”><h2 class=”widgettitle”>Change The Title Of The Widget Here</h2>
<ul>
<ul>

<li><a href=”https://wparena.com/”>WPArena</a></li>
<li><a href=”http://wparena.com/wordpress-hosting/” target=”_blank”>WordPress Hosting</a></li>
<li><a href=”https://wparena.com/deals/”>WordPress Deals</a></li>

</ul>
</li>

Remember it is essential to close all tags or you can mess up the sidebar! You shouldn’t use the code here either, use the specific code from your current WordPress theme, and it may need to be changed when changing themes. When you are done save your changes, check your blog and marvel at your handiwork!

Remember if the girls don’t find you handsome they should at least find you handy!

How to Display Subcategories under Parent Categories in Sidebar?

Have you added a WordPress subcategory under a parent category and it still shows like a separate main category on the WordPress sidebar? Have you wondered how to get subcategories to show under the parent category on the WordPress sidebar?

categories in sidebar
This is a short little WordPress sidebar tweak that will show you how easy it is to get your categories and subcategories to show like this:

subcategories sidebar
This WordPress guide assumes your theme is widget ready and you know how to Work with WordPress text widgets.

Step 1: In your WordPress dashboard go to Appearance > Widgets.

Step 2: If the categories widget is not showing on the sidebar drag it from the available widgets area up to the sidebar.

Step 3: Now click the little blue icon on it to open it. Click the box next to “Show hierarchy“, close the widget and click save changes.

I told you this tweak would be short, didn’t I?

Read more about text widgets here: Work with WordPress text widgets.

A question inspired this post from a recent client of mine I just setup a new WordPress blog for.

You may have come across a cool WordPress theme that you want to use on your WordPress blog, but it might need just a bit of tweaking to make it stand out or, sometimes work correctly. In this example what to do if your new theme’s widgets aren’t working.

This tweak is taken from the “Ask WPArena” page where I try to answer your questions about WordPress.

First off, I ask those posting questions on that page not to get too technical or into things such as template coding and things of that nature. And in this case, the question wasn’t of that nature, but the answer is.

Here is the Question:

When I try to customize the sidebars, nothing changes! No matter how I drag and drop widgets on them, they always look the same with same default categories & archives on the left and calendar blogroll, and meta on the left. Any idea why that is? Thanks.

After looking at the theme and dealing with the arrogance on a certain forum that is supposed to help people with their WordPress blog, I figured out what the problem with the theme is.

The WordPress widgets are not working on this theme meaning that moving them around in the dashboard didn’t register a change on the blog itself. The first issue with this two sidebar theme was the “functions.php” file. so let’s fix that first and without going into an in-depth explanation I am just going to show you the proper code to use in your functions.php file.

Warning! Before you change any code in your theme’s template files create a backup so you can restore it if it doesn’t work for you!

Below is the code needed in the functions.php file to use for a two sidebar theme. It says to get sidebar1 and sidebar2 if they exist. Replace the all the code in your functions.php file with this:

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<div id=”%1$s” class=”side-c %2$s”>’, // Removes <li>
‘after_widget’ => ‘</div>’, // Removes </li>
‘before_title’ => ‘<h3>’, // Replaces <h2>
‘after_title’ => ‘</h3>’, // Replaces </h2>
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<div id=”%1$s” class=”side-c %2$s”>’, // Removes <li>
‘after_widget’ => ‘</div>’, // Removes </li>
‘before_title’ => ‘<h3>’, // Replaces <h2>
‘after_title’ => ‘</h3>’, // Replaces </h2>
));

?>

Next, the sidebar file in this particular theme was calling up two sidebars that the functions.php file didn’t know about. We just fixed the functions.php file above, and now we need to add the proper code in the sidebar.php file. Open your sidebar.php file and look for these two areas of text, the red text is the problem that needs to be addressed:

This is for the left sidebar:

<div id=”left-sidebar”>

<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘Sidebar_1′) ) : else : ?>

<div id=”categories”>

And a little further down is the right sidebar:

<div id=”right-sidebar”>
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(‘Sidebar_2′) ) : else : ?>

You can see that these are calling for Sidebar_1 and Sidebar_2, but again the functions.php file had no reference to them. So now replace the red text in your sidebar.php file with this code:

For the left sidebar use this:

<div id=”left-sidebar”>

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar1′) ) : ?>

And for the right sidebar use this:

<div id=”right-sidebar”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar2′) ) : ?>

This is the fix for WordPress sidebar widgets that don’t work on the particular theme mentioned above. It may work on other broken WordPress themes, but I offer no guarantees.

If you need help customizing or fixing your WordPress blog post a comment or click here to send me an email, you will find my fees very reasonable.

Please let me know about this post in the comments section below.

Editorial Staff

Editorial Staff at WPArena is a team of WordPress experts led by Jazib Zaman. Page maintained by Jazib Zaman.

Write A Comment

Pin It