I'm not sure the best way to tackle this one:

I have a menu I saw and like and want to use it as a basis for my own. I have the CSS for it. On the page it comes from its all labeled differently to my own menu on my own wordpress custom theme.

Should I be using functions.php to call the new CSS divs in place of my own or would there be a better way to do this? I am not super good with coding but im willing to give anything a go =)

The Div classes and ID's I want to use in place of my own:


<body class="contact page" data-class='contact'>
    <header id="pageHeader" data-title='/ Top of page'>
        <div class="top-wrapper">
            <div class="top">

This is the existing code in headerstyle3.php that I want to replace:


<div class='absolute'>
<div class='wrapper menu-bg custom-menu-bg border-bottom-black-tr'>
    <div class='container'>

im pretty sure the navigation element for both is "pageHeader" for the new and "container" for the old one.

Any help much appreciated! =)

  • If your menu requires all of the alterations in the code you posted then @IvanHanak has probably the closest thing to a right answer that there is. You can't make those alterations with functions in functions.php. Those alterations are a theme rewrite. That makes this an extremely broad question. – s_ha_dum Oct 19 '13 at 14:46
  • Yeah, I agree it is ambitious, I thought perhaps there might be a way to do it painlessly but that doesn't look to be the case. Thankyou for your reply! – tom Oct 19 '13 at 15:57

I would definitely suggest you rewritting your theme.

Correct me if I am wrong, but WordPress themes are created so that you can manipulate with them. (if you want)

Another thing to take into consideration is, assuming from your filename headerstyle3, you probably have a theme containing more of such pages, varying in numeric index (headerstyle1, headerstyle2), with a different design, so remember to deal with them also.

Please, bear in mind, that I can not tell you, how to replace your code. In order to do that, you need to provide us with a little bit more info, (like whether you want us to help you replace it), i.e. the whole source of your desired menu, your current file content of the file headerstyle3...

  • Ivan thankyou for your reply. The headers are all part of a premium wordpress theme I purchased. I setup a child-theme and im working off that and in my reading I don't think I should be editing the php template files in the parent folder (re updates to core template files amomg other issues) What would you suggest I do, you mention the whole source of the files, I don't currently have a host but I can put the files onto dropbox and explain what I am trying to do a little better, would that help? – tom Oct 19 '13 at 13:32
  • You are right, edit only your child-theme files. Dropbox is just not good idea, paste your code here, or use for example service like paste2.org, – Ivan Hanák Oct 19 '13 at 13:52
  • paste2.org/2KPUABVG is the html doc with header i'd like to use including that particular menu style in my wordpress theme. paste2.org/WHfVaP82 is my current headerstyle3 template that gets called. Besides this I have grabbed the CSS for the menu from the site which I can attach to my style.css in the child-theme. Will this all work nicely tho? The original menu does not appear to use wp_nav but rather an <ul> with <span> and span classes defined in the main.css style sheet, how would something like that translate? All help MUCH appreciated! – tom Oct 19 '13 at 14:12
  • Since i'm still very new to coding/wordpress I spent 5 hours yesterday playing around with this. I loaded up headerstyle3 in espresso and uncommented all the bits I didn't need and replaced it with the relevant code in paste2.org/2KPUABVG it kind of worked but obviously the menu remained hardcoded into the php, I wanted to see if I could do it via Wordpress's own menu system since I feel this is cleaner and I wont be the only person editing/adding things to the site. – tom Oct 19 '13 at 14:19
  • Did I get it right that you inserted your desired menu code into your headertyle3 and it worked like you wanted? Then you are on a good road, now you need only your links with required markuop. In your headerstyle3 take look at line 103, there is function wp_nav_menu used. Markup is taken care through walker. I advise you to study codex.wordpress.org/Function_Reference/wp_nav_menu or codex.wordpress.org/Function_Reference/wp_get_nav_menu_items. This function you can simply use with foreach and create own markup. – Ivan Hanák Oct 19 '13 at 16:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.