Custom menu… how to do this in header.php file?

  • w/out plugins i would like to do my own menu… i dont’t want to do this in custom menu in admin panel… i would like to change it in my header php file.

    with php i’m new but i want to change my theme… so ther is a question:

    how do somenthing like this in wordpress: (?)

    Home - static page
About - static page
Work - posts only from 'www' category
Photo - posts only from 'photo' category
mBlog - all posts only but w/out 'www' and 'photo' category

    the structure shoud be like this:

    <div id="<strong>[!!!]</strong>" class="container">
    <header>
        <nav class="topnav">
            <ul>
                <li class="home"><a href="">Home</a>
                <li class="about"><a href="">About</a>
                <li class="work"><a href="">Work</a>
                <li class="photo"><a href="">Photo</a>
                <li class="mblog"><a href="">mBlog</a>
            </ul>
        </nav>
    </header>

    but i dont know what php code put in ‘a href source’ AND! ID in first div should be change for current page…

    for example: when we are in ‘Work’ page should be ‘work’ etc.

    thx everybody for helping my and sorry for my english mistakes ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • <div id="menu" class="container">
    <header>
        <nav class="topnav">
            <ul>
                <li class="home"><a href="<?php bloginfo('home') ?>/">Home</a>
                <li class="about"><a href="<?php bloginfo('home') ?>/about">About</a>
                <li class="work"><a href="<?php bloginfo('home') ?>/work">Work</a>
                <li class="photo"><a href="<?php bloginfo('home') ?>/photo">Photo</a>
                <li class="mblog"><a href="<?php bloginfo('home') ?>/mblog">mBlog</a>
            </ul>
        </nav>
    </header>

    Try this.

    Thread Starter yozz84

    (@yozz84)

    ok now i know how its works… its good… thank you for this part… but its not working with some css which i would like to ‘learn’…

    for learning i’ve copy a style and image from this blog:
    https://www.sohtanaka.com (top navigation)

    i’d like to do something else (this is only example, inspiration) in my theme which i am building… but i would like to use mechanism rollover and stripes…

    i don’t know what i do wrong…

    now i have this:

    HEADER.php:

    <div id= "menu" class="container">
    <header>
        <nav class="topnav">
            <ul>
                <li class="home"><a href="<?php bloginfo('home') ?>/"><span>Home</span></a></li>
                <li class="about"><a href="<?php bloginfo('home') ?>/omnie"><span>About</span></a></li>
                <li class="blog"><a href="<?php bloginfo('home') ?>/www"><span>Blog</span></a></li>
		<li class="contact"><a href="<?php bloginfo('home') ?>/kontakt"><span>Contact</span></a></li>
            </ul>
        </nav>
    </header>
	</div>

    STYLE.css:

    header {float:left; height:102px; width:65%;  float:left;} 

header nav {height:98px; position:absolute; right:0; top:0; } 

header nav ul {margin:40px 50px 0 0; padding:0; } 

header nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

header nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

header nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#home header nav li.home a {background-position:left -86px; }
#home header nav {background-position:right -1px; } 

header nav li.home a {width:49px; }
header nav li.home span {background-position:left -43px; } 

#blog header nav {background-position:right -141px; }
#blog header nav li.blog a {background-position:-64px -86px; } 

header nav li.blog a {background-position:-64px top; width:47px; }
header nav li.blog span {background-position:-64px -43px; } 

#about header nav {background-position:right -421px; }
#about header nav li.about a {background-position:-224px -86px; } 

header nav li.about a {background-position:-224px top; width:55px; }
header nav li.about span {background-position:-224px -43px; } 

#contact header nav {background-position:right -561px; }
#contact header nav li.contact a {background-position:-293px -86px; } 

header nav li.contact a {background-position:-293px top; width:78px; }
header nav li.contact span {background-position:-293px -43px; }

    The image is here: https://stblog.tanaka.netdna-cdn.com/wp-content/themes/SohTanaka-2010/images/navigation_bg.png

    its not rollover when i place mouse on it, and its not showing currnet page… ;(

    <div id="header" class="container">
 <div class="nav">
            <ul>
                <li class="home"><a href="<?php bloginfo('home') ?>/">Home</a>
                <li class="about"><a href="<?php bloginfo('home') ?>/about">About</a>
                <li class="work"><a href="<?php bloginfo('home') ?>/work">Work</a>
                <li class="photo"><a href="<?php bloginfo('home') ?>/photo">Photo</a>
                <li class="mblog"><a href="<?php bloginfo('home') ?>/mblog">mBlog</a>
            </ul>
</div>
    #header {float:left; height:102px; width:65%;  float:left;} 

#header .nav {height:98px; position:absolute; right:0; top:0; } 

#header .nav ul {margin:40px 50px 0 0; padding:0; } 

#header .nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

#header .nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

#header .nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#header .nav li.home a {background-position:left -86px; }
#header .nav {background-position:right -1px; } 

#header .nav li.home a {width:49px; }
#header .nav li.home span {background-position:left -43px; }
    Thread Starter yozz84

    (@yozz84)

    ok… there are some changes but i’ve done to to work this menu (rollover and links). Thank You for Your fast help ?? i’m realy grateful

    the final working code is:
    Header:

    <div id= "menu" class="container">
        <div class="nav">
            <ul>
                <li class="home"><a href="<?php bloginfo('home') ?>/">Home</a></li>
                <li class="about"><a href="<?php bloginfo('home') ?>/omnie">About</a></li>
                <li class="blog"><a href="<?php bloginfo('home') ?>/www">Blog</a></li>
	        <li class="contact"><a href="<?php bloginfo('home') ?>/kontakt">Contact</a></li>
            </ul>
        </div>
	</div>

    CSS:

    #menu {height:102px; width:65%;  float:right} 

#menu .nav {height:98px; position:absolute; right:0; top:0; } 

#menu .nav ul {margin:40px 50px 0 0; padding:0; } 

#menu .nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

#menu .nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

#menu .nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#menu .nav li.home a:hover {background-position:left -86px; }
#menu .nav {background-position:right -1px; } 

#menu .nav li.home a {width:49px; }
#menu .nav li.home span {background-position:left -43px; }

#menu .nav {background-position:right -141px; }
#menu .nav li.blog a:hover {background-position:-64px -86px; } 

#menu .nav li.blog a {background-position:-64px top; width:47px; }
#menu .nav li.blog span {background-position:-64px -43px; } 

#menu .nav {background-position:right -421px; }
#menu .nav li.about a:hover {background-position:-224px -86px; } 

#menu .nav li.about a {background-position:-224px top; width:55px; }
#menu .nav li.about span {background-position:-224px -43px; } 

#menu .nav {background-position:right -561px; }
#menu .nav li.contact a:hover {background-position:-293px -86px; } 

#menu .nav li.contact a {background-position:-293px top; width:78px; }
#menu .nav li.contact span {background-position:-293px -43px; }

    ps. what i must to add in header or mayby only in css to show the current page?

    the class “.current_page_item” will be work here or it mus be some more in header.php ?

    use conditions.Like

    <li class="home <?php if(is_home()): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/">Home</a></li>
                <li class="about <?php if(is_page('about')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/omnie">About</a></li>
<li class="blog <?php if(is_page('blog')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/www">Blog</a></li>
	        <li class="contact <?php if(is_page('contact')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/kontakt">Contact</a></li>

    Thread Starter yozz84

    (@yozz84)

    hmm.. i think its to much css for me and something is not good ?? or i dont see my mistake…

    for example:
    <li class="home <?php if(is_home()): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/">Home</a></li>
    css ?

    #menu .nav {background-position:right -1px; }
#menu .nav li.home a {width:49px; }
#menu .nav li.home a:hover {background-position:0 -43px;}
#menu .nav li.home span {background-position:0 -86px; }
<strong>#menu .nav li.home .current_page_item {background-position:0 -86px; }</strong>

    ??

    if its good its not working.. its not showing me that this is current page :/

    this wrong #menu .nav li.home .current_page_item {background-position:0 -86px; }

    it will be
    #menu .nav li.current_page_item {background-position:0 -86px; }

    Thread Starter yozz84

    (@yozz84)

    ok, I understand… but it doesnt work… i try this earlier…

    after that, there is no appeal to the current tab, for example: “about” or “home”…

    maybe better solution would be to do like this?
    if this is the current tab: “.curent_tab_home” If not this: “.home” and as for the rest in header.php…

    what do you think?

    #menu .nav li.current_page_item a {background-position:0 -86px; }

    try once it.

    Thread Starter yozz84

    (@yozz84)

    the same…

    at this image witch i use are 4 buttons… so for each “current tab” must be diferent “x” & “y” position… thats why i try to do this for each current tab with class for example: .home or .about

    you know what i mean?

    hmm. i think .home class overwrite the .current_page_item class

    hope it will this
    <li class="<?php if(is_home()): ?>current_page_item<?php else: echo 'home '; endif;?>"><a href="<?php bloginfo('home') ?>/">Home</a></li>

    can you give your site link?

    Thread Starter yozz84

    (@yozz84)

    i would like to give you but i try to do my own wordpress theme on local server (app: Webserv)… its not on internet right now

    maybe i will copy everything once more to show what we’v got because the line which you wrote still dont work ??

    unless you have other suggestions?

    HEADER (there are two lines with “home” but they dont work as we want):

    <div id= "menu" class="container">
        <div class="nav">
            <ul>
	       <li class="<?php if(is_home()): ?>current_page_item<?php else: echo 'home '; endif;?>"><a href="<?php bloginfo('home') ?>/">Home 1</a></li>
                <li class="home <?php if(is_home()): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/">Home 2</a></li>
                <li class="about <?php if(is_page('about')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/omnie">About</a></li>
                <li class="blog <?php if(is_category('www')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/www">Blog</a></li>
	       <li class="contact <?php if(is_page('kontakt')): ?>current_page_item<?php endif;?>"><a href="<?php bloginfo('home') ?>/kontakt">Contact</a></li>
            </ul>
        </div>
	</div>

    CSS:

    #menu {height:102px; width:65%;  float:right} 

#menu .nav {height:98px; right:0; top:0; } 

#menu .nav ul {margin:40px 50px 0 0; padding:0; } 

#menu .nav li {list-style-position: outside; list-style-type: none; list-style-image: none; list-style:none !important; float:left; margin:0 7px; overflow:hidden; padding:0; position:relative; } 

#menu .nav li a {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:43px; overflow:hidden; text-indent:-9999px; } 

#menu .nav li span {background-image:url(navigation_bg.png); background-repeat:no-repeat; float:left; height:36px; left:0; overflow:hidden; position:absolute; top:0; width:0; } 

#menu .nav {background-position:right -1px; }
#menu .nav li.home a {width:49px; }
#menu .nav li.home a:hover {background-position:0 -43px;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#menu .nav li.home span {background-position:0 -86px; }

#menu .nav li.current_page_item {background-position:0 -86px; }

    and link to image is on my second post from top…

    <li ><a href="<?php bloginfo('home') ?>/" class="<?php if(is_home()): ?>current_page_item<?php else: echo 'home '; endif;?>">Home 1</a></li>

    #menu .nav li a .home{width:49px; }
#menu .nav li a.home:hover {background-position:0 -43px;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
#menu .nav li a .home {background-position:0 -86px; }
#menu .nav li a .current_page_item {background-position:0 -86px; }
    Thread Starter yozz84

    (@yozz84)

    still not ??

    i probably give up this idea (current page only) because it doesnt work and i dont know why…

    what you think?

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Custom menu… how to do this in header.php file?’ is closed to new replies.