asked on

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

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jason C. Levine

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.

Tezdread

ASKER

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

Jason C. Levine

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.

SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

Beat me to it Jason. :)

Jason C. Levine

I'm going to get a split on this one way or the other :D

LZ1

No problem! I think you've earned it. ;)

Tezdread

ASKER

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