Default and older WordPress themes use nested lists to present their sidebar information. A nested list is simply a list of unordered items inside one another. A simple example of a nested list is below:

  • Flowers
    • Lilies
    • Roses
  • Dogs
    • Boxer
    • Poodle

You may have your own nested lists you wish to add to your sidebar for your selected Wordpress theme. This article demonstrates how to add nested lists of items into your theme's sidebar. Note this example uses the Twenty Twelve default theme found in WordPress 3.5

  1. Log into your Wordpress Admin dashboard.
  2. Once logged into the Admin area, look to the left hand menu and click on the Appearance mneu category. This will reveal several sub-options. Click on the Editor option to continue.
  3. You are now on the main Editor page for all php and css files for your theme. Look to the menu on the right-hand side, scroll down until you see the Sidebar option. Click on that link to open the sidebar.php file in the editor.
    select editor menu option
  4. Once the file opens you will see the php code that governs the sidebar display and behavior. The highlighted line of code below is the code that calls the widgets. To add a nested list before the widgets, you will add your code before this line. To add the nested list after the widgets, add the code after the line. We will add the same list as above to our sidebar. The exact code for that list is below.
    sidebar code editor
    <ul style="list-style-type: disc;">
        <li>Flowers
            <ul style="margin-left: .5em;">
                <li>Lilies</li>
                <li>Roses</li>
            </ul></li>
        <li>Dogs
            <ul style="margin-left: .5em;">
                <li>Boxer</li>
                <li>Poodle</li>
            </ul></li>
    </ul>
  5. Insert your own custom code into the appropriate spot in the file editor. Our sample list will be added before the widgets as shown below. Click the Update File button and the new code will be saved to the sidebar.php file. Below is a screenshot of the blog with the nested list in the sidebar. Note that your particular format (font, indentation,e tc) may vary according to your theme.
    add new code to sidebar

    Before After
    before nested list add add-list-after
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2168
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5561

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!