Ex04 Part 3: Functions – dynamic nav menus and sidebars

Part 3: Functions—Nav Menus & Sidebars

You can change the behavior and add dynamic features by adding a functions.php file to your theme. You can call functions that WordPress has built-in, or write your own.

Two common uses of functions are to add custom navigation menus and widgets (small applications) areas to your theme.

Note that any blank spaces or lines at the end of your functions.php could cause errors. Be sure to delete all characters after the closing 
?>

Errors in functions.php could cause your site to break completely (white screen) or prevent you from logging in to your dashboard. If that happens you can attempt to fix the code, or at least remove or rename functions.php temporarily.

Enable Custom Menus in Your Theme

Custom nav menus can be easily controlled and modified in the Dashboard under Appearance>Menus. As new pages and child pages are added, menus can be updated dynamically without having to edit HTML.

By default, custom nav menus will list all parent pages in the order they were created, then all child pages. New pages will automatically be added to the menu. This behavior can be changed by creating a new menu in Appearance>Menus. Menu item appearance and behavior can be set in styles.css. 

  1. CREATE FUNCTIONS.PHP and REGISTER MENUS
    Create a New File in Atom and name functions.php. To register menus in your theme, add the following code: 
    <?php function register_my_menu() { register_nav_menu('header-menu',__( 'Header Menu' )); } add_action( 'init', 'register_my_menu' ); ?>
  2. ADD AN AREA IN YOUR HEADER.PHP FILE FOR THE CUSTOM MENU TO APPEAR
    To display the menu in the theme, add the following code to the header.php file between the <nav> tags, replacing the old content: 
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
  3. CREATE AND PLACE A CUSTOM MENU
    • Check all pages in the Pages box, and click Add to Menu. Reorder, if necessary. Create sub-items by dragging an item under and to the right of a parent.
    • Use the Links section to create main nav links to pages that might exist outside of your site.
    • Check the boxes to “Automatically add new top-level pages to this menu” and to place this menu in “Header Menu”. Click Save Menu.
    • View your site to see the new menu in place.
    • Create one or two new pages and see how they appear in the menu.
  4. ADD AND EDIT CSS DROP DOWN STYLES FOR YOUR MENUS TO DISPLAY PROPERLY
    Adjust the CSS so the items display properly, and to create the drop-down effect of sub items. Paste the below code into style.css, above the media query: 
    /* ===== Drop Down Menus ===== */ nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    }
    nav ul li {
    display:inline-block;
    background-color: #FF4649;
    }
    nav a {
    display:block;
    padding:0 .8em;
    color:#FFF;
    font-size:1.2em;
    line-height: 1.4em;
    text-decoration:none;
    }
    nav a:hover {
    background-color: #333;
    }
    nav ul ul {
    display: none;
    position: absolute;
    top: 1.8em;
    }
    nav ul li:hover > ul {
    display:inherit;
    }
    nav ul ul li {
    width:100%;
    float:none;
    display:list-item;
    position: relative;
    }
    nav ul ul ul li {
    position: relative;
    top:-60px;
    left:230px;
    }
    nav ul ul li {
    border: 1px solid white;
    }
    li > a:after { content: ' ▼'; }
    li > a:only-child:after { content: ''; }
  5. ADD CSS TO HIGHLIGHT THE NAV LINK OF THE CURRENT PAGE
    Use the following code (edit as needed) to alter the display of the Navigation link of the page currently being viewed. Note that you will not see this effect until after you have activated Custom Menus, below.
nav ul li.current-menu-item a, nav ul li.current-page-ancestor a, nav ul li.current-menu-ancestor a {
    background: #db0000;
color: #fff;
}

Add Widget Areas

Widgets are small applications that add content and features to  Sidebars, most commonly, or to any widgetized area of your theme. Many widgets  come with WordPress: for post categories, tag clouds, navigation, search, etc. Plugins can also add their own widgets.

Widgets can be added, removed, and rearranged in the Dashboard: Appearance>Widgets panel. The order and placement is set by the WordPress Theme in the functions.php file.

For your theme to support widgets, you must register widget areas in functions.php using the below code:

Be sure to paste this code below the previously entered register_my_menus function, but above the closing ?> php tag. There should be only one opening <? php tag and one closing  ?> php tag on the functions.php page.

/**
 * Register our sidebars and widgetized areas.
 *
 */
function arphabet_widgets_init() {
	register_sidebar( array(
		'name' => 'Home right sidebar',
		'id' => 'home_right_1',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );

To display widgets and widget areas on your theme pages, add the below code to the appropriate location within your theme files. Add this to sidebar.php to a new line under the <p> element.

<?php if ( dynamic_sidebar('home_right_1') ) : else : endif; ?>

> Continue to Part 4