• So I made a page coded with just HTML because that Is how I know how to make websites. I’ve just recently gotten into turning my HTML pages into wordpress templates, but i’ve only done it for myself. So there are a lot of things I leave just in HTML format because I know how to change it myself if it ever needs to be fixed. For me it is simple. But now I am coding a page for someone else and their big concern is being able to add/remove pages and control the navigation without having to edit any code. So I need to convert the HTML I did for the navigation into wordpress coding.

    I already have it styled nice and perfect just the way I want it. I registered the menus in my functions.php file. And I made a nagivation-1.php file for the top menu and a nagivation-2.php file for the menus from a tutorial I saw but I’m not confident on how to edit the given codes for those two files to match my CSS. But here is what I have….

    My Nav. in the Functions.php

    <?php $themename= 'your theme name';
    // This theme uses wp_nav_menu() in two location.
    register_nav_menus( array(
      'primary' => __( 'Main Menu', $themename ),
      'secondary' => __( 'Top Menu', $themename ),
    ) ); ?>

    My Navigation-1.php (top/main menu)

    <div id="access" role="navigation">
            <?php /* Our Main menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
            <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    </div><!-- #access -->

    My Navigation-2.php (bottom/secondary menu)

    <?php /* Start add our second page menu */ ?>
                            <div id="pagemenu" role="navigation">
                                    <?php wp_nav_menu( array( 'container_class' => 'page-header', 'menu_class' => 'page-menu', 'theme_location' => 'secondary', 'depth' => 0, 'fallback_cb' => '' ) ); ?>
                            </div>
    <?php /* End lower page menu */ ?>

    The HTML of how I formated my main menu (horizontal)

    <div id="menu">
    
    <ul id="ddmenu">
    
        <li class="page_item page-item-41"><a class="loftmenu" href="/site">Home</a>
    
        	 			</li>                <li><img src="wp-content/themes/TheLoft/img/arrow_down.gif" alt="TheLoft"/></li>
    
    						<li class="page_item page-item-74"><a class="loftmenu" href="#">About</a>
    
    						<ul class="menu2"><li class="page_item page-item-106"><a href="#">Nu~Dé</a></li>
    <li class="page_item page-item-108"><a href="#">J~Lyte</a></li>
    <li class="page_item page-item-108"><a href="#">Briscoekidd</a></li>
    </ul></li>
    	 					<li class="page_item page-item-90"><a class="loftmenu" href="#">Music</a>
    
        	 			</li><li class="page_item page-item-99"><a class="loftmenu" href="#">Contact</a>
    
        	 			</li> 
    
    </ul>
    
    </div>
    
    </div>

    My HTML of how i formatted my bottom menu (vertical)

    <div style="float: left;">
        <div id="pages">
        <ul id="nav">
        <li class="page_item page-item-41"><a href="#">Home</a></li>
    <li class="page_item page-item-74"><a href="#">About</a></li>
    <li class="page_item page-item-90"><a href="#">Music</a></li>
    <li class="page_item page-item-90"><a href="#">Shop</a></li>
    <li class="page_item page-item-99"><a href="#">Contact</a></li>
    
        </ul>
        </div>
    
    </div>

    I just don’t know how to format the wordpress coding. In the code i got from the not-so-tutorial-just-copy-and-paste-but-ask-no-questions “tutorial” i was following (and it was the best one i could find) i’m not sure what to change exactly to it matches what I have

Viewing 10 replies - 1 through 10 (of 10 total)
  • Comments is PHP ae not /* stuff */

    This is wrong:

    <?php /* Start add our second page menu */ ?>

    This was right:

    // This theme uses wp_nav_menu() in two location. <em>(nothing else on this line)</em>

    Thread Starter misabby

    (@misabby)

    Ok, now i am not a newbie to this. but this did not explain what i was asking for and if it did, idt you explained it well….

    Personally, I’d use the WP generated code and move your CSS to it – using the classes and tags that are already there which are likely to be sufficient.

    This is wrong:
    This was right:

    The right and wrong way to add ‘comments’ in PHP…

    Rookie error ??

    Wrong:
    /* Start add our second page menu */
    Right:
    // This theme uses wp_nav_menu() in two location.

    Since the issue is with your menu and the wrong code is in that part of your PHP, perhaps that is the issue?

    Thread Starter misabby

    (@misabby)

    I wasnt asking what code was right, wrong, whatever.

    My page was fully coded as an HTML website and I am adapting it to wordpress. I posted the HTML coding and asked how do I transform that into a menu’s code to keep my styling.

    The PHP I posted I said I got from a copy and paste menu’s “tutorial”. I’m asking what in that PHP code do I edit to make sure my style settings in my HTML is showed in the menu and is consistent with the style of the theme and my style.css file.

    THESE ARE THE HTML CODING I CURRENTLY HAVE AND USE ON THE PAGE. THEY ARE JUST PERFECTLY FINE! I NEED TO FIGURE OUT HOW TO CODE THEM SO WHEN I ADD A MENU, IT SHOWS IN THIS STYLE

    top nav (horizontal)

    <div id="menu">
    
    <ul id="ddmenu">
    
        <li class="page_item page-item-41"><a class="loftmenu" href="/site">Home</a>
    
        	 			</li>                <li><img src="wp-content/themes/TheLoft/img/arrow_down.gif" alt="TheLoft"/></li>
    
    						<li class="page_item page-item-74"><a class="loftmenu" href="#">About</a>
    
    						<ul class="menu2"><li class="page_item page-item-106"><a href="#">Nu~Dé</a></li>
    <li class="page_item page-item-108"><a href="#">J~Lyte</a></li>
    <li class="page_item page-item-108"><a href="#">Briscoekidd</a></li>
    </ul></li>
    	 					<li class="page_item page-item-90"><a class="loftmenu" href="#">Music</a>
    
        	 			</li><li class="page_item page-item-99"><a class="loftmenu" href="#">Contact</a>
    
        	 			</li> 
    
    </ul>
    
    </div>
    
    </div>

    bottom nav (vertical)

    <div style="float: left;">
        <div id="pages">
        <ul id="nav">
        <li class="page_item page-item-41"><a href="#">Home</a></li>
    <li class="page_item page-item-74"><a href="#">About</a></li>
    <li class="page_item page-item-90"><a href="#">Music</a></li>
    <li class="page_item page-item-90"><a href="#">Shop</a></li>
    <li class="page_item page-item-99"><a href="#">Contact</a></li>
    
        </ul>
        </div>
    
    </div>

    I read what you wrote:

    My Navigation-2.php (bottom/secondary menu)

    And now the comment error. Please don’t shout. You need to fix the PHP comment error.

    I have no idea what “I NEED TO FIGURE OUT HOW TO CODE THEM SO WHEN I ADD A MENU, IT SHOWS IN THIS STYLE” means.

    Add a menu where?

    Thread Starter misabby

    (@misabby)

    I only put in caps to set apart, rather than just a new paragraph (so you know the key-part of my post), not to “shout.”

    And i do not get any errors with those PHP codes. They are pretty irrelevant to me other than knowing it is the base code I need to show the menu’s on my page.

    MAIN POINT: I’m trying to figure out how to STYLE the menus. I have them styled how I want in HTML, but with PHP I have no idea how to style them. I’m trying to take my styling from my HTML and apply it to the PHP code so it comes out in the correct font, color, etc. thats what “I NEED TO FIGURE OUT HOW TO CODE THEM SO WHEN I ADD A MENU, IT SHOWS IN THIS STYLE” means!

    I have the option to add menus in my theme functions. So I can create menus via wordpress. The navigation-1.php and such I posted is how I’ve been putting them in place. But they are not styled how I want them to by styled. The HTML I posted was the original coding when I made the full page in HTML. I need my PHP code to be styled that way. I dont understand the proper coding for the styling attributes in the PHP

    All caps really isn’t cool here… and per the question, did you read what I posted above?

    Thread Starter misabby

    (@misabby)

    @wpyogi I didn’t see your post. sorry. but what do you mean by the WP generated code? My WP “lingo” isn’t up to par, i guess.

    [moderated – please respect the few rules here ]

    So please excuse me if I offend anyone. But I really dont see the issue.

    If you want to use WP menu functionality, the easiest way to add your styles is to change your existing CSS so that it works on the WP-generated classes in the menu items. You’re trying to work backwards and that’s much harder and/or impossible.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Turning HTML page to wordpress: Trouble Creating Menus’ is closed to new replies.