Newbie getting started

Over the past week, I've largely figured things out (I think) and have created a working header.

First of all, I found this thread invaluable. Alexandra's post led me to her repo for her personal site which helped me so much! I picked through her code step by step and even adopted a lot of the ways she's organizing things. This cleaned up my functions.php file tremendously, so much thanks to her for sharing that with the community.

Here's what I ended up with in case someone else that's new to Beans might want a working example:

// Replace default class for <header>
beans_replace_attribute( 'beans_header', 'class', 'uk-block', 'top-header' );

// Add a class of 'uk-margin-top' to wrapping div after opening <header>
beans_add_attribute( 'beans_fixed_wrap[_header]', 'class', 'uk-margin-top' );

// Display the the logo, button links, and a search input at the top
add_action( 'beans_fixed_wrap[_header]_prepend_markup', 'cecil_branding_buttons_and_search' );

function cecil_branding_buttons_and_search(){
  ?>
  <div class="uk-grid uk-grid-collapse">
    <div class="uk-width-9-10 uk-width-large-2-6">
      <a class="cecil-brand uk-responsive-width" href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <img class="cecil-logo" src="<?php echo CHILD_IMG . 'cecil-logo.png' ?>" alt="Cecil College logo (large)" />
        <img class="cecil-logo-small" src="<?php echo CHILD_IMG . 'cecil-logo-small.png' ?>" alt="Cecil College logo (small)" />
      </a>
    </div>
    <?php

    // Register this div with Beans so we can hook into it and move the off-canvas menu button
    beans_open_markup_e( 'cecil_links_and_search[_header]', 'div', array( 'class' => 'header-links uk-width-1-10 uk-width-large-4-6' ));

    ?>
      <div class="uk-align-right uk-visible-large">
        <a class="uk-button button-secondary uk-margin-right" href="https://my.cecil.edu/ICS/Admissions/Home.jnz?portlet=Apply_Online_2.0">Apply</a>
        <a class="uk-button uk-margin-right" href="https://my.cecil.edu/ICS/">MyCecil</a>
        <a class="uk-button uk-margin-right" href="#">Directory</a>
        <form class="uk-search" data-uk-search>
          <?php
          // Note to self: try replacing this code with the standard search form and styling that to make it animate like the mockup
          // example here: https://community.getbeans.io/discussion/menu-questions/#post-696
          beans_replace_attribute( 'beans_search_form_input', 'class', 'uk-width-1-1', 'uk-search-field' );
          beans_remove_markup( 'beans_search_form_input_icon' );
          get_search_form();
          ?>
        </form>
      </div>
      <!-- Button for off-canvas nav goes here; I've moved the default button placement with the 'beans_modify_action_hook' function below -->
    <?php

    beans_close_markup_e( 'cecil_links_and_search[_header]', 'div' );

    ?>
    </div>
  </div><!-- This closes out the wrapping container div -->
  <?php
}

// Replace default classes for <nav>
beans_replace_attribute( 'beans_primary_menu', 'class', 'uk-float-right uk-navbar', 'nav-primary uk-container uk-container-center uk-margin-small-top' );

// Replace default classes for <ul> that contain nav links
beans_replace_attribute( 'beans_menu[_navbar][_primary]', 'class', 'uk-navbar-nav', 'uk-subnav uk-margin-top uk-flex uk-flex-center uk-flex-space-between' );

// Move off-canvas menu button above the <nav> for layout purposes
beans_modify_action_hook( 'beans_primary_menu_offcanvas_button', 'cecil_links_and_search[_header]_append_markup' );

// Replace default classes for off-canvas menu button link
beans_replace_attribute( 'beans_primary_menu_offcanvas_button', 'class', 'uk-button', 'uk-align-right uk-margin-small-top' );

// Make the off-canvas menu slide over the page content instead of pushing it (default)
beans_add_attribute( 'beans_primary_menu_offcanvas_button', 'data-uk-offcanvas', '{mode:\'slide\'}' );

// Replace default classes for icon associated with off-canvas menu button
beans_replace_attribute( 'beans_primary_menu_offcanvas_button_icon', 'class', 'uk-icon-navicon uk-margin-small-right', 'main-nav-menu-icon uk-icon-reorder uk-icon-medium' );

// Remove the word 'Menu' from the off-canvas button
add_filter( 'beans_offcanvas_menu_button_output', 'cecil_modify_offcanvas_menu_button' );

function cecil_modify_offcanvas_menu_button() {
  return '';
}

If anyone has any feedback on how I did this, I'd appreciate it. Is this correct? Is there a better way of doing it? It's working and I've learned a lot about using Beans the past week, so at least there's that!

I'm currently sorting out the off-canvas menu customizations (I have more than just the nav in there; a search input, some additional links and styling), then off to do the footer.

Hi Joseph, welcome to Beans Community!

Wow, your learning curve is impressive! It looks like you really dived deep into it 🙂 Here are my only two advises for the code you shared.

1. The following could move outside of the cecil_branding_buttons_and_search() function

beans_replace_attribute( 'beans_search_form_input', 'class', 'uk-width-1-1', 'uk-search-field' );
beans_remove_markup( 'beans_search_form_input_icon' );

2. Replace the following

add_filter( 'beans_offcanvas_menu_button_output', 'cecil_modify_offcanvas_menu_button' );

function cecil_modify_offcanvas_menu_button() {
  return '';
}

with

add_filter( 'beans_offcanvas_menu_button_output', '__return_false' );

Note that __return_false() is a WP Core function which simply returns false 🙂

Happy coding,

Thanks for the encouraging words and tips on cleaning up what I've done, Thierry. I've made those changes and will definitely keep that stuff in mind moving forward.