Wordpress Banner

TUTORIAL: Custom menu WordPress

Adding a custom menu in WordPress can be ‘difficult’. People tend to search for plugins which can change their menu buttons, but little did you know WordPress has a costum menu option. 

First make sure you have a child theme.   There are a few reasons why you would want to use a child theme:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to to learn about WordPress theme development.
  • Easier CSS customization.

EDIT: Since someone asked me to show my child theme I made another blogpost about this.

OK let’s start. This tutorial starts at the child theme so make sure you’ve already installed this! I’ts not necessary tho some theme’s have their own ‘custom css’ option, but a child theme will never get overwritten with new updates.


adding a custom css to your child theme

1. Go to your dashboard > Appearance > editor:

If you’re not using a child theme go to the custom css option instead.

editor

2. Now you’re in the css editor for your child theme:

customcss

This is the custom css I used. I got it from css3buttongenerator.com. This is a custom menu button generator.

This is the css code I used:

.custommenubutton {
  background: #d3d934;
  background-image: -webkit-linear-gradient(top, #d3d934, #5bdaeb);
  background-image: -moz-linear-gradient(top, #d3d934, #5bdaeb);
  background-image: -ms-linear-gradient(top, #d3d934, #5bdaeb);
  background-image: -o-linear-gradient(top, #d3d934, #5bdaeb);
  background-image: linear-gradient(to bottom, #d3d934, #5bdaeb);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #e05ad0;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

Copy paste it or try and create your own menu buttons. It’s fun to try, but it takes some time if you’re not familiar with css.

3. Make sure you save the css file!


adding your custom menu button in your menu

1. Go to your dashboard > appearance > menus:wordpress menu

2. You will see the next screen:

Click on ‘screen options’ in the upper right corner of your screen > You’ll get a ‘show on screen’ menu. check the option ‘CSS Classes’ and close ‘screen options’.

screenoptions

3. Open up any menu button. For me that’s ‘HOME’.

cssclasses

4. Now add your custom ‘Class name’ :cssclassesbutton

5. Okay, are you sure you want to see my awesome year 2000 button? here it is (NSFW!):

button


youtube video; custom menu wordpress

I’ve also made a video, but it will only show you where and how you can add your custom css in the menu. Too be honest it’s kind of short.


If you’ve used my tutorial, please post your website with your custom menu in the comments. I’d love to see your custom menu.

 

Published by

Bas

My name is Bas Wijdenes and I'm working full time as a services engineer at Wortell. In my free time I like to write tutorials about computer problems I encounter on a daily basis. The main reason I started my blog is, because I wanted to work on my English vocabulary. If you've encountered a computer problem you can't get your head around, please do not hesitate to contact me.

One thought on “TUTORIAL: Custom menu WordPress”

Leave a Reply

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