Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Using the world’s most popular front-end component library, this article gives an example on how to add a Bootstrap 4 navigation menu to a Genesis Child Theme.
I tried to avoid it. I didn’t want to do it. I didn’t think it would be absolutely required. But after much trial and error I finally gave up and conceded there was no way to successfully add a Bootstrap Navigation Menu to a Genesis child theme without using the Walker_Nav_Menu class. Then, just before I started write any lines of code, I stumbled upon a GitHub project by WP Bootstrap named wp-bootstrap-navwalker. This project was exactly what I needed! I didn’t need to write any code because someone else did the hard work for me. And they probably did a much better job than I would have.
But wp-bootstrap-navwalker seems to specifically target WordPress themes and not necessarily Genesis child themes. Could I use this project to achieve my goals? Fortunately, yes I can thanks very much to Genesis’ excellent library of hooks and filters and also those from WordPress.
Genesis WP Bootstrap Navwalker
Genesis WP Bootstrap Navwalker is a spin-off project which is 100% dependent on the original project named wp-bootstrap-navwalker. You can view Genesis WP Bootstrap Navwalker on its GitHub Project Page.
Follow these steps to use Genesis WP Bootstrap Navwalker in your Genesis child theme project.
- Make a backup of your current Genesis child theme.
- Review functions.php for potential conflicts that could affect your current Genesis child theme.
- After your review, copy and paste the contents of functions.php to your child theme’s existing functions.php file.
- Copy the class-wp-bootstrap-navwalker.php file to the root of your child theme. If you store the file elsewhere, be sure to update the
require_oncestatement to point to the new file system path.
- Finally, if you haven’t already done so, create and assign a primary navigation menu to your Genesis child theme.
Genesis WP Bootstrap Navwalk targets the primary navigation menu. Other menus are not affected.
Bootstrap does not support navigation menus deeper than 2 levels. So, if your navigation menu contains items deeper than 2 levels, they will not be displayed. This is a development decision by the authors of Bootstrap. If you absolutely must have a navigation menu deeper than 2 levels, However, a quick Google Search should reveal multiple working solutions.
According to WordPress current_user_can() documentation, use of this method is discouraged.
While checking against particular roles in place of a capability is supported in part, this practice is discouraged as it may produce unreliable results.WordPress Developer Code Reference
So, how should you check a user’s role the right way? For that we need to a WP_User object. To help make things easy we can use the wp_get_current_user() function to return an instance of that object. See the below snippet for an example.
WordPress has the plugins_url() function. According to its documentation, the function returns the absolute URL to the plugins or mu-plugin directory. The optional first parameter alters the output so that a string is appended to function’s default return value.
For example, assuming the code above is run, the return value will be similar to
http(s)://example.com/wp-content/plugins/my-plugin. The issue here is that you can type anything you want as a parameter including a fat fingered value. This introduces potential for unwanted errors. Also, hard coded values decrease your code’s portability.
Our goal will be to get the name of a plugin’s root directory dynamically without hard coding any values. This will help minimize coding errors errors and application bugs and also increase success at application portability.
How to Do It
We could use
plugin_dir_url( __DIR__ ) but the function seems to assume it is always called in a plugin’s root directory. If this were called in a sub directory of the plugin several levels deep, the result would contain a file system path that extends beyond our plugin’s root directory. This is not helpful for our exercise.
SIDE NOTE: Apparently you can use empty quotes as a parameter. For example,
plugin_dir_url('') which returns the URL for the root directory of the plugins directory. Originally, I did not know it was allowed or think of trying it to find out. But it works!
echo explode( '/', plugin_basename( __DIR__ ) );
The return result is an array of strings delimited by a forward slash (“/”). The first delimited value, or token, unquestionably identifies the name of the current plugin’s root directory. No matter where in the plugin’s directory structure the code is called this will always be true. in the example below, the plugin’s root directory name is
NOTE: If on a Microsoft Windows machine, the file system uses backslash (“\”) rather than a forward slash. Don’t worry. WordPress handles this internally by using the wp_normalize_path() function.
With our new delimited string, we use PHP’s explode() function to create an array of values to then revisit our good friend
plugins_url(). Don’t forget this function accepts as a parameter a string that is appended to the default value. In our case we want to append the first token of the array created from our previously delimited string.
And there you have it! We have achieved our goal. The variables on the last two lines of the code snippet above represent URL and file system path to the root directory of the
plugins directory of a WordPress installation.
To make this code better, and even more portable, drop the code into a class that contains functions that return either the URL or directory path of the plugin root.
As with any updated release of the Genesis Framework you can always expect changes. One change brought to version 3.0.0 is
genesis_register_responsive_menus(). According to the change log this function brings added AMP support with assistance from the WordPress AMP plugin.
Added AMP support if the WordPress AMP plugin is installed and active (https://wordpress.org/plugins/amp/). This includes an AMP-compatible, responsive menu that theme developers can add via genesis_register_responsive_menus(), in place of having to enqueue their own responsive menu scripts.Genesis Developer Docs
As per the above, the WordPress AMP plugin should be installed and activated for your theme to gain full benefit of the new
In this post we will discuss how to prepare the
functions.php file and use the new
genesis_register_responsive_menus() function which is able to accept an array as a parameter. This array is stored in a configuration file which is read by a separate function named
The below resources help to familiarize yourself with how all connecting parts of this process work together.
- Genesis AMP Support
- Provides information necessary to understand the new
genesis_register_responsive_menus()function added to Genesis Framework 3.0.0.
- Provides information necessary to understand the new
- With the release of Genesis 3.0.0, this is no longer the recommended solution, yet this source contains valuable configuration setting details.
To create our new responsive menu we need a minimum of 2 files.
The heart of any theme is the
functions.php file. In the code snippet below, the two main points of interest are the lines that read
wp_enqueue_style( 'dashicons' ) and
genesis_register_responsive_menus( genesis_get_config( 'responsive-menus' ) ); respectively.
[gist id=”d65cf3b88cba848605b9d34f07ddad9d” file=”functions.php”]
Normally seen on smaller than desktop displays, the hamburger icon is a popular responsive menu feature. To get the hamburger icon on your theme, simply enqueue dashicons which is built in to WordPress. How this works is described later when discussing the
genesis_get_config()was released in Genesis Framework version 2.8.0. This function reads a configuration file stored in a directory named
config. This file returns an array. The array contains configuration information which, according to this example, is stored in a file named
Of course you can pass a array as a parameter directly to
genesis_register_responsive_menus() but doing so ignores certain benefits. To learn more about these benefits, be sure to read Load child theme settings from your theme’s config folder.
As explained above,
responsive-menus.php returns an array read by
genesis_get_config(). The Genesis AMP Support documentation states we are only required to write values that differ from default values. For example, in the code snippet below,
.nav-primary is set to a value corresponding to a Genesis theme’s primary menu’s CSS. By passing in
.nav-primary as a value, we overwrite the default value of an empty array. If this does not make sense please read the Genesis AMP Support documentation.
[gist id=”d65cf3b88cba848605b9d34f07ddad9d” file=”responsive-menus.php”]
Note: The code snippet above is a copy and paste taken from the Genesis Sample child theme as stated in the Genesis AMP Support documentation.
Don’t forget! If you are not sure what these parameters mean, you can read more about them on the StudioPress GitHub project page.
You now have a fully functioning responsive menu. To test it out, simply resize your web browser and notice how the hamburger menu appears and disappears depending on the window size.
In this post we learned how to configure a responsive menu by using the new
genesis_register_responsive_menus() function made available beginning with Genesis Framework 3.0.0. We also discussed how
genesis_get_config() retrieves an array from a configuration file for use when creating responsive menus.
It is a good practice to use HTML Headings when writing blog posts. Doing so builds structure around your content and helps to make reading a bit easier for your visitor.
To further help your reader, wouldn’t it be nice to have a table of contents section that matches your headings and is displayed alongside your post? Wouldn’t it be even better if the table of contents were dynamically populated as you update existing posts and create new ones?
Before you read further, it is important to know the code below is specific to the Genesis Framework. If your theme is not a child theme of the Genesis Framework you will need to modify this code to fit your specific need.
Post Template Files
WordPress takes advantage of Post Template Files to help change the look and feel of a particular page on your website. There are several template files to choose from. For this example we will concentrate on the single.php file.
The Single.php File
edwinvelez_do_sidebar() function there is a skeleton, or the beginnings of a
<section></section> which also contains an empty
<ul></ul>. This is the location and future home of the soon to be populated table of contents.
[gist id=”cdeace5a855d78a8b54e23be4e56db84″ file=”single.php” lines=”11-40″]
An example of this table of contents in action is seen on this very same page you are now reading.
<h6> tags and automatically populates the skeleton created in the single.php file. Notice how the
$in_footer parameter of the wp_enqueue_script() function is set to
[gist id=”cdeace5a855d78a8b54e23be4e56db84″ file=”genesis-build-sidebar-toc.js” lines=”11-78″]
There are at least two important things to keep in mind before you decide to use this code on your Genesis Framework child theme.
Below are two simple changes you may want to make when keeping the above notes in mind.
Restore Your Configured Widgets
When the remove_action() function is called it effectively removes all widgets previously added to the sidebar in the WordPress Dashboard for your theme. What though if you want to keep these widgets? Simply comment out this one line and your widgets are restored.
Change the Position of the Table of Contents
But wait! When the widgets are restored the table of contents is at the very bottom of the widget list. How do you bring it to the top? That is easy!
The add_action() function uses the default
$priority value of 10. Change the priority value to a lower number, for example 5, and the position of the table of contents is brought to the top of the widget list.
Creating Page Jumps
To Do List
I would like subheadings to be clearly identified if one is found under a another in order to apply a more visual structure. For example, when a
<h2> tag is found under a
<h1> there should be an indent, hyphen or leader dots showing it is a subordinate of the previous heading.