Add Sidebar Buttons to WordPress

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

 

[Tweet “Add Sidebar Buttons to #WordPress without plugins! via @aprettierweb”]

 

Check out the Step-by-Step Video …

 

5 thoughts on “Add Sidebar Buttons to WordPress”

Leave a Comment

Your email address will not be published. Required fields are marked *

I’m a WordPress Web Designer & Developer with over 15 years of experience making websites (including eCommerce and membership websites). If you would like a custom website, please get in touch!