Converting HTML theme with submenu into WordPress theme

  • Resolved anon2694

    (@anon2694)


    5 years ago

    A client has asked me to convert their static html site into a wordpress theme with blogging functionality. The only problem I’m having is setting up the navbar properly in header.php as the navbar has 3 sub menus. Here is a link to codepen with the html for the navbar that is in my header.php – https://codepen.io/GKM3/pen/PopGrVE

    From the research I’ve done it seems that under ‘menus’ in wordpress I need to create a category which will be the submenu and place my menu links under the relevent category. So for example, create a category for “boiler” and place the appropiate menu links in it.

    Normally I would add the following php to my navbar in header.php and assign css styling to the list that it creates. 

    <?php
                wp_nav_menu (
                    array (
                        'theme_location' => 'navbar',
                        )
                        )
                        ?>

    However, with this navbar, the submenu category has span with a class of “arrow”. How would I add this using wp_nav_menu and is placing the wp_nav_menu code within the opening unordered list tags even the right thing to do in this case?

    Thanks

    • This topic was modified 5 years ago by anon2694.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Joy

    (@joyously)

    5 years ago

    No, you don’t need to create a category for the submenu. At least, not a category as WP knows it (a taxonomy). WP menus can have whatever links you want to put in them, including placeholders (which is likely what you meant).
    The wp_nav_menu function has parameters so you can assign some classes. There are also filters called, so you can modify the output that way, and even write your own menu walker which you can pass in.
    https://developer.ww.wp.xz.cn/reference/functions/wp_nav_menu/

    You don’t have to keep the same class names as before. Your menu CSS can simply style the menu as it is output.
    And if you want a vertical menu, you could just use a menu widget instead of the theme making it a menu_location. I have that on one of my client sites. The menu is in the sidebar and it’s a widget. The theme can still style it so it looks like you want.

    Thread Starter anon2694

    (@anon2694)

    5 years ago

    Thanks for your reply. I’ve worked out how to add a placeholder by creating a custom link with # and then created the sub menu.

    My problem now is when I add wp_nav_menu into the div where the nav links were in the original html navbar, the links are stacked as a column and not in a row like the original template. Here’s a link to the site – https://wordpress-572627-1929875.cloudwaysapps.com/

    Using the broswer inspector I can see that wp_nav_menu has created a div with a class of “menu-navbar-container” which contain my submenu and links. I’ve tried applying some stlying to this div using “display: flex”, “flex-direction: row” but it’s not doing anything.

    What am I doing wrong?

    Thanks again for your help, it’s much appreicated as I’ve been pulling my hair out all week over this.

    Joy

    (@joyously)

    5 years ago

    The menu is the trickiest part of theme styling. You can copy from existing themes or work on adapting the HTML version’s CSS to work with the new markup.
    You can also adjust parameters on wp_nav_menu to change what is used for the wrapper and put classes on the menu.

    Thread Starter anon2694

    (@anon2694)

    5 years ago

    I’ve got it working by adding ‘menu_class’ to wp_nav_menu and using the original classes from the html navbar. Thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Converting HTML theme with submenu into WordPress theme’ is closed to new replies.

Tags