• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 545
  • Last Modified:

How to convert my HTML|CSS menu into a Wordpress menu

Hey,

I'm working on my first Wordpress theme and I've got my menu looking and working how I want it in HTML|CSS but I don't know how I can now set my theme up so that the style and location are the same?

I noticed when another theme is selected that I have Menus in the theme options (along with widgets but I'll sort that later) but on my theme I don't have that option so I guess that's the first thing but how is that done?

This is the HTML from the header.php

    <div id="navigation">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    </ul></div>

Open in new window


This is the CSS

#navigation {
	padding-top:70px;
	padding-right:30px;
	float: right;
}
#navigation a {
	display:block;
	width:90px;
	height:30px;
	padding-top:4px;
	color: #FFF;
	text-align: center;
	text-decoration:none;
}
#navigation a:hover {
	background-color:#216c9b;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
}
#navigation a:active {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
}

Open in new window


Thanks in advance
0
Tezdread
Asked:
Tezdread
  • 4
  • 3
  • 2
2 Solutions
 
LZ1Commented:
You'll have to add some php to your theme's functions.php.

Check out this link: http://codex.wordpress.org/Navigation_Menus

First add this to your theme's functions file:
function register_my_menus() {
  register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ) )
  );
}
add_action( 'init', 'register_my_menus' );

Open in new window


Obviously you can replace the 'header-menu' and 'Header Menu' with whatever you want.

Then just add this:
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Open in new window


to your header.php file or wherever you want your menu to appear.
0
 
Jason C. LevineNo oneCommented:
Then just add this: (WordPress menu code) to your header.php file or wherever you want your menu to appear.

No points for this post, please.

To expand on LZ1's answer slightly:  When building custom menu support into WordPress, you do the above steps first to get a default menu system in place.  You then edit the style.css file to integrate the menu into your theme's look&feel.

So the process is a little backwards from typical web development.  Add the code and then add the menu items through the backend (Appearnace | Menus) and then style it.  Most of the time people integrate the menu into the page first and holding the dynamic coding until the end of the process.
0
 
TezdreadAuthor Commented:
Hey LZ1,

That's helped thanks, I've now got the menu option and I've adjusted the HTML|CSS and have a Wordpress menu that has the right CSS but I have no control over the menu items and there are items that shouldn't be there.

If I add or remove items in the Wordpress dashboard the changes are not reflected on the site. Even if I remove the menu, it is still there on the site.

Any idea what could be causing this?

http://burninghand.co.uk/blog/

Thanks
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Jason C. LevineNo oneCommented:
I have no control over the menu items and there are items that shouldn't be there.

Did you create the menu in Appearance | Menus, select it as the Primary Menu for the theme and save everything?  

If you don't do all of the above then WordPress may list your site's Pages in lieu of the actual menu.
0
 
LZ1Commented:
In the menus section, on the left hand side, have you specified your menu where it asks what menu to use?

If you have, have you dragged & dropped your menu items in the box?
0
 
LZ1Commented:
Beat me to it Jason. :)
0
 
Jason C. LevineNo oneCommented:
I'm going to get a split on this one way or the other :D
0
 
LZ1Commented:
No problem!  I think you've earned it. ;)
0
 
TezdreadAuthor Commented:
Thank's guys,

I've come at this all wrong from the start without realising then when I did realise I just ran with it just to get the theme 'looking right' and have been cutting & pasting into an existing theme but I've got a much better understanding so once I've finished this run, I'll restart and try and do it correctly.

That said, what I was missing was the Menu 'Theme Locations', I had added menu items (drag n drop) and they were showing on the right on the Menus page but I hadn't selected the Menu from the right...doh!

All sorted (for now)

Thanks
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now