Advertisement
Theme Development

Creating a WordPress Theme from Static HTML: Adding Navigation

by

If you've been working through this series, you now have a working theme with template files which you've uploaded to WordPress. In this tutorial, you'll continue to work on the header.php file that you created in Part 2. You'll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen. To do this you'll also need to create a new file for your theme: the functions file.


What You'll Need

To complete this tutorial, you will need the following:

  • your code editor of choice
  • a browser for testing your work
  • a WordPress installation, either local or remote
  • If you're working locally, you'll need MAMP, WAMP or LAMP to enable WordPress to run.
  • If you're working remotely, you'll need FTP access to your site plus an administrator account in your WordPress installation.

1. Registering a Navigation Menu

To register a navigation menu, you use the register_nav_menu() function, which you will need to add to your theme's functions.php file.

As your theme doesn't have this file yet, you start by creating one.

In your theme folder, create a new blank file called functions.php.

Open the new file and add the following to it:

<?php
function wptutsplus_register_theme_menu() {
    register_nav_menu( 'primary', 'Main Navigation Menu' );
}
add_action( 'init', 'wptutsplus_register_theme_menu' );
?>

You've just created your theme's first function, pat yourself on the back!

The function you've created is called wptutsplus_register_theme_menu(), and I've added a wptutsplus prefix at the beginning of its name to ensure the name is unique and doesn't clash with any other functions registered by the plugins you might run on your site.

The function includes the register_nav_menu() WordPress function which creates a menu. Your function is then activated via the init action hook, which means WordPress will run your function when it initializes.

Note: that you must activate functions like this via the correct hook or they will not work.

The register_nav_menu() function has two parameters:

  • One of these parameters include the location of the menu. In this case, we have called the location 'primary'. You will add this to your header.php file later so that WordPress displays the correct menu.
  • The second parameters is the menu's description. In this case, 'Main Navigation Menu'. This will be visible in the 'Menus' admin screen.

2. Setting Up Your Navigation Menu

You'll now have access to the 'Menus' dashboard screen, which wasn't available before as your theme didn't have a menu registered. Right now, its contents aren't perfect but we'll soon change that:

creating-wordpress-theme-from-static-html-menus-admin-screen-before

As you create pages, posts and other content, you can add these to your navigation menu via this screen. I'm going to add a two new pages called 'Blog' and 'About'. I'll specify the 'Blog' page as the page where my posts are displayed via the Settings screen. You can create whatever pages you like.

Having done this, return to the 'Menus' screen to edit the menu, adding the new pages. Once you've dragged the new pages across to the menu, click on 'Create Menu' to create the new menu.

Finally, check 'Main Navigation Menu' under Theme Locations to ensure that this menu will be displayed as the main menu you've just registered and save the menu.

creating-wordpress-theme-from-static-html-menus-admin-screen-menu-saved

Note: Always remember to save your menu after you make any changes to it—unlike widgets, Menus aren't auto-saved by WordPress.


3. Adding the Menu to Your Theme

Right now, this menu still won't be visible on your website; you need to add the menu to your header file to make this happen.

Open your theme's header.php file and find this code:

<nav class="menu main">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Skip to content" href="#content">Skip to content</a>
    </div>
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Latest news</a>
        </li>
        <li>
            <a href="#">Featured articles</a>
        </li>
    </ul>
</nav><!-- .main -->

And replace it with this:

<nav class="menu main">
    <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class="skip-link screen-reader-text">
        <a title="Skip to content" href="#content">Skip to content</a>
    </div>
    <?php wp_nav_menu( array( 'container_class' =--> 'main-nav', 'theme_location' => 'primary' ) ); ?>
</nav><!-- .main -->

This adds the navigation menu you've registered at this place in the theme, using the wp_nav_menu() function and specifying 'primary' (the location you specified for your menu when you registered it) as the 'theme-location'.

This is now reflected in my site's navigation menu:

creating-wordpress-theme-from-static-html-menu-in-theme

Summary: Menus Aren't Just for the Site Header!

In this tutorial, you've learnt how to register a navigation menu, add items to it and add it to the site header.

It's important to note that menus don't just have to be in the site header. You could add menus in a variety of places, including:

  • The sidebar—maybe a section menu for a section of the site or a list of subpages of the current page
  • The footer—a menu of your 'small print' pages or the most commonly accessed pages.
  • Below the main navigation—maybe a section menu immediately below the main navigation.

You can add menus in more places in your theme in one of three ways.

I've listed them in ascending order of difficulty:

  • create extra menus via the 'Menus' admin screen and then use the 'Custom Menu' widget to display them anywhere in your theme where you have a widget area
  • create extra menus via the 'Menus' admin screen and then add them to your theme's code as you've done above. In this case you add an additional parameter to the array called by the wp_nav_menu() function, specifying the 'menu' parameter as the name you give each menu you create.
  • register multiple menus using the register_nav_menus() function and add them to the relevant place in your theme as above

Why not give it a try?


Resources

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding Featured ImagesCreating wordpress theme from html 400
    You've now worked through a number of steps to create a WordPress theme from static HTML files. Specifically, we've looked covered the following: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages creating an archive template file. Your theme now has a template file for displaying archive pages, but at the moment it's not displaying images properly. In this tutorial, you'll learn how to add featured image support to your theme and how to display and style them in your archive template.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Code
    Theme Development
    How to Integrate Bootstrap Navbar Into WordPress ThemeBootstrapd 400
    Have you ever wanted to speed-up the process of theme development? I assume the answer is "yes" and you already know about Bootstrap and use it in mock-ups for development. This raises the question: "How can you integrate Bootstrap components into a WordPress theme?"Read More…