Editing the Sidebar

On most of the sites I have created there is a sidebar, sometimes there are two, and sometimes there is a single content panel.

Page Templates

You can control the page width based on the page templates available on your site. Typically they will be full width or with a side bar. You can select them using the menu on the right in Page view. With this particular site which is based on the 2015 template, there is no control of the sidebar. It is on all pages. Your site may be different.

The Sidebar

The sidebar generally contains information that can be seen on all of the pages that support the sidebar. There are some plugins that allow you to have different content on different pages in the sidebar, but then it starts to look very complex to edit. For this reason I recommend having a sidebar that contains the same information across your site.

It is fairly obvious how to access and edit posts and pages, but not so obvious where the sidebar is controlled from.

If you are in the Dashboard, go to the Appearance Menu and then the Widget Menu. Your screen may look similar to the one below.

Widget Screen

The left 2/3rds of the screen are “widgets” you can add to the Widget area on the right of the screen. The “Widget Area” in this case is the side bar on this site.

A widget is basically a function that can be inserted into the side bar (or other areas). An example is the site search box. Other examples in the case above are a subscription form to a newsletter, recent posts (news items), recent comments from people and categories or tags that applied to posts on the site.

Widget AreaIf we take a closer look at the side bar you can see that each one has a small triangle or arrow head on the right. If you click on this you can open the widget and in some cases edit some of the information there.

If you wish to change or add something into the side bar then you need to do it here.

A widget that has been edited can be removed from the side bar with the edits intact and held in the inactive widget area (see first image bottom right). This removes it from the website, but retains the customisation so you do not lose it in case you need it again in the future.

You can also control the sequence of the widgets by clicking  on one and dragging it up or down the stack.

The Text Widget

Widgets-3A very easy one to work with is the text widget. Grab one of those from the left side of your screen and drag it across to the Widget Area and insert it in the stack.

If you click on the triangle to the right of the widget it will open up and show you two fields which you can fill in. The first is the title and the second is the content area of the widget. You can place HTML in here if you wish, or simply write something as I have done in this case.

When you have finished editing it you can save it. Then view the website to see the end result. I have copied the end result below based on this site.

Tips and Tricks

Widgets-4One method I use quite frequently is that I will build the content for the sidebar on a temporary page. I can use the formatting tools on the page to make the area look exactly as I want it to look. This might include images for example. While you are in the Widget menu you do not have any formatting tools or editors available to you other than a very basic one.

Once I have the page looking as I would like it to look I switch the editor to “Text mode” (rather than Visual Mode).  I then grab the HTML code that was created for the page and copy it.

Switch to the Widget menu item, open the Text Widget and paste it in. Then save it.

If you use this method you can add an image, then select the image and assign a link to it, for example an image of the Easyfundraising.org.uk logo or promotional image could be linked to a client’s Easyfundraising account. Test it and make sure it works. Then copy all of the HTML (Text view) code to the text widget. Now you have an icon in the sidebar that links to EasyFundRaising.

Return to Home