|

How to add Menu Theme Support for WordPress and display it on your WordPress Theme

Add menu support in wordpress theme

If you deal with WordPress Theme on you own you need to add custom menus around your theme to display specific links.

So the codes below will show you how to add menu support in your WordPress custom theme easy.

First of All you need to create new menu in your admin Dashboard and add your Pages or Links:

  • Go to Dashboard – > Appereance – > Menus – > create a new menu
  • Add some Pages from your website and save this new menu

Four my Demo i will use 5 pages menu with links.

Watch The video Below to learn how to create your Custom WordPress Menu and Display in in your Header.

Open functions.php and add the lines below to add Menu Theme Support for WordPress

Open your functions.php file in your FTP where is the Location of your WordPress Theme and add this lines in the php tag.


/*
If you don't have functions.php file you need to create a new one and add the line below
*/
<?php
function register_my_menu() {
register_nav_menu('your_new_menu',__( 'Your New Menu' ));
}
add_action( 'init', 'register_my_menu' );
?>
/*If you have functions.php file just add the code below at the bottom of your functions.php file before the closing ?> php tag*/
function register_my_menu() {
register_nav_menu('your_new_menu',__( 'Your New Menu' ));
}
add_action( 'init', 'register_my_menu' );

View How to add Menu Support in your functions.php and display it anywhere in your theme

Now open your header.php and add the code below to display your new custom menu


<?php wp_nav_menu( array( 'theme_location' => 'your_new_menu' ) ); ?>

If you want to add CSS to your new menu you need to add class to your php code


/* Add some style to your menu*/

<div class="mynewmenu">
<?php wp_nav_menu( array( 'theme_location' => 'your_new_menu' ) ); ?>
</div>

This will close your menu in div class and you can modify it like you want.

/* This is a simple CSS style for my DEMO so you can try to do it different color, style and positions etc.*/
.mynewmenu {
 height: 40px;
 margin: 0 auto;
 padding: 0;
 width: 50%;
}
.mynewmenu ul {
 height: 40px;
 margin: 0;
 padding: 0;
 width: 100%;
}
.mynewmenu ul li {
 background: none repeat scroll 0 0 #ccc;
 float: left;
 list-style: outside none none;
 margin: 2px;
 padding: 0 5px;
 width: auto;
}
.mynewmenu ul li a {
 color: #000;
 font: lighter 14px/30px "Arial",sans-serif;
 text-decoration: none;
}

 

Facebook Comments

Leave a Reply

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