In this tutorial I go through every step of adding buttons to your WordPress Sidebar. No plugins required! I will show you how to create easy links, add them to your sidebar and then style theme to make them look like buttons. You can highlight specific pages on your site, categories or perhaps some social media links – up to you!

At the end of the tutorial, your buttons will loo like below (pink and black on hover). I’ll also show you how you can change colour to fit with your own site.

Wordpress Sidebar Links

 

Step 1: Create a New Sidebar Menu

Image 2015 10 07 At 5.27.05 PM

Steps:

  1. Go to Appearance > Menus
  2. Create a New Menu
  3. Add Links (you can use existing pages, posts, categories or create custom links).
  4. Save Menu

 

Step 2: Add the Menu to Your Sidebar 

Image 2015 10 07 At 5.29.27 PM

Steps:

  1. Go to appearance > Widgets
  2. Find the Custom Menu Widget
  3. Drag it to your Sidebar Area
  4. Select the Sidebar Menu you Created
  5. Save

 

Step 3: Add Your CSS

Image 2015 10 08 At 9.27.46 AM

Steps:

  1. Go to Appearance > Editor
  2. Copy the CSS below into your style.css file
  3. Click Update

Note: You may not be able to update this file because of settings on your server. If you don’t know how to update those permissions, you can also use this plugin to edit your css. Bah! I promised no plugins but let’s blame your host! 🙂

.widget_nav_menu ul {
margin: 0px;
padding: 0px; 
}
.widget_nav_menu ul li {
margin: 0px;
padding: 0px;
margin-bottom: 10px; }

.widget_nav_menu .menu-item a {
background-color: #EF1F87;
color: #FFFFFF;
padding: 6px 10px;
font-weight: bold; 
display: block;
width: 100%;
text-align: center;
text-decoration: none;
}
.widget_nav_menu .menu-item a:hover {
background-color: #000000;
text-decoration: none; 
}

 

Step 4: Change Colours!

Steps:

  1. Look for places in the code where I’ve used hex colours  ie: #EF1F87 (that’s pink), #FFFFFF (that’s white) and #000000 (that’s black)
  2. Replace those colours with your own hex colours Pick your hex colours from a colour wheel here OR! if you already have a website, you can plugin in your url and find your colours using this tool

 

 

Check out the Step-by-Step Video …

 

Leave a Reply

5 thoughts on “Add Sidebar Buttons to WordPress

  1. This is a great tool! I must admit the CSS part makes me nervous so I may check out that plugin. 😉

    Posted on October 8, 2015 at 4:48 pm
    1. haha.. I can understand that! 😉

      Posted on October 8, 2015 at 4:54 pm
  2. I’ve been adding links to my sidebar with the image widget but I could never get it to look exactly as I wanted so this will definitely help me out, thanks! 🙂

    Posted on October 12, 2015 at 10:01 am
    1. oh yay!! So good to hear – thanks for you comment!

      Posted on October 12, 2015 at 10:58 pm
  3. Hi, Mel!
    Thanks for your wonderful tutorials! They are soooo helpful 🙂

    Posted on June 30, 2017 at 1:07 am