Adding a Dynamic Shopping-cart Button to the WordPress Navigation
While working on a responsive WooCommerce-driven e-commerce website for a HyperArts client, I hit a snag. We’re developing the site in WordPress on the Genesis Framework.
One of the requested features was to have a dynamic shopping-cart button in the navigation that updates when products are added to the cart.
WooCommerce provides the bit of PHP needed to make the shopping-cart button dynamic. That’s the easy part. The difficult part proved to be figuring out how to add that PHP button to the navigation.
How to Add Any PHP as a Navigation Item on WordPress Genesis Framework
In our case, the PHP we needed to add to the #nav navigation container was a WooCommerce shopping-cart button, but the information below applies to any PHP you might want to add as a navigation item on a WordPress site using Genesis Framework.)
Why We Wanted the PHP Inside the Navigation Container
If our site was a non-responsive website we could insert our bit of PHP anywhere (using Simple Hooks) and position it relatively or absolutely wherever we wanted.
But because we’re working on a responsive website, we needed this code to live inside the #nav container with the rest of the nav elements, so it can shift responsively.
How do you add elements to the #nav that aren’t regular Pages or Text Links?
First, note that in the Genesis Theme Settings, under the Navigation Settings, there is a checkbox for “Enable Extras on Right Side”. The options are: Today’s date, RSS feed links, Search form, and Twitter link.
That’s great, but I needed a choice for “custom PHP code.”
How to utilize the potential of that widget area with our custom content?
For this, I consulted Bill Erickson’s excellent blog post Adding Content to Genesis Navigation.
Bill recommends creating a filter that you put in your theme’s “functions.php” file, allowing you to add any HTML you want to the right side of the #nav container.
But how do I add PHP to that right side widget?
Create a sidebar!
The method I used was to modify Bill’s code slightly so that I was able to add a Genesis Sidebar through his filter, which would then allow me to add my code using a widget in the WordPress dashboard.
NOTE: If you’re not familiar with Genesis’ Simple Sidebars and how they work, I would recommend reading this post.
In the modified code below, you’ll see that I named my new Sidebar “Nav Right” and registered it as “Nav Right” in the Simple Sidebars plugin in Genesis.
Now I have a new Sidebar that exists on the right side of the #nav container, ready to have widgets dragged into it!
Here’s my modified code, which I put in my theme’s “functions.php” file:
add_filter( 'genesis_nav_items', 'our_fun_button', 10, 2 );
add_filter( 'wp_nav_menu_items', 'our_fun_button', 10, 2 );
function our_fun_button($menu, $args) {
$args = (array)$args;
if ( 'primary' !== $args['theme_location'] )
return $menu;
ob_start();
dynamic_sidebar('Nav Right');
$social = ob_get_clean();
return $menu . $social;
}<!--formatted-->
Now I have a sidebar in the WordPress dashboard:
Can’t put PHP into a standard Text Widget? Use the PHP Code Widget!
Download the PHP Code Widget. Once you’ve activated this plugin, you’ll be able to add it to your sidebar area just like you would any other widget, although you will have to wrap your PHP in <?php> tags.
As you see below, I was able to add my WooCommerce button PHP.
The WordPress Genesis Framework Rocks!
Genesis proves once again that is a flexible and kind-hearted beast.
