I'm new to PHP, WP, and Beans. I've read through the documentation and most everything truly does make sense when I'm in there reading and sifting through various threads here, but then when I go to convert my design to Beans, I hit a wall.
I've actually gotten a homepage with header, footer, and loops all working pretty well (using the front-page.php method here). But then I went to create my interior pages with layouts and ran into many problems, most of which I came to realize were caused by a malformed header. I created the header (and footer for that matter) by copying the header.php file and dropping my HTML code into it and removing stuff that didn't seem needed. Definitely the wrong way to do things in this framework it would seem...
I feel like if someone could give me a nudge with an example of what I currently have, converted over the Beans way, it might help me get going with the rest of it.
Here is my standard HTML code and my mockup for reference:
<header>
<div class="uk-container uk-container-center uk-margin-top">
<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="#">
<img class="cecil-logo" src="img/cecil-logo.png" alt="Cecil College logo">
<img class="cecil-logo-small" src="img/cecil-logo-small.png" alt="Cecil College logo">
</a>
</div>
<div class="uk-width-1-10 uk-width-large-4-6">
<div class="header-links uk-align-right uk-visible-large">
<a class="uk-button button-secondary uk-margin-right" href="#">Apply</a>
<a class="uk-button uk-margin-right" href="#">MyCecil</a>
<a class="uk-button uk-margin-right" href="#">Directory</a>
<form class="uk-search" data-uk-search>
<input class="uk-search-field" type="search" placeholder="Search...">
</form>
</div>
<!-- Button for off-canvas nav; nav code is at the bottom -->
<a href="#offcanvas" class="uk-align-right uk-margin-small-top uk-hidden-large" data-uk-offcanvas>
<i class="main-nav-menu-icon uk-icon-reorder uk-icon-medium"></i>
</a>
</div>
</div>
</div>
<!-- Desktop nav -->
<nav>
<div class="nav-primary uk-container uk-container-center uk-visible-large">
<ul class="uk-subnav uk-margin-small-top uk-flex uk-flex-center uk-flex-space-between">
<li><a href="programs.html">Programs</a></li>
<li><a href="admissions-and-aid.html">Admissions & Aid</a></li>
<li><a href="#">Continuing Education</a></li>
<li><a href="#">Student Services</a></li>
<li><a href="#">Cecil Life</a></li>
<li><a href="#">Athletics</a></li>
<li><a href="#">Foundation</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</nav>
</header>How would you create this header the proper Beans way?
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.