We’re going to get a little bit more complicated in our examples of how to use PHP to customize the Genesis theme. In example #5 we’re going to make this menu that we changed the position of earlier sticky so that when you scroll through the pages it stays up at the top.
Studio Press Tutorials Method
There is a little tutorial at StudioPress on how to do that and we’re going to use parts of it. In the first place, we’re not going to put it in our functions.php file because, as I said in my introduction, if we put it in our functions.php file we can’t upgrade.
Move the Secondary Nav Menu
This tutorial suggests that you essentially move the menu into the place that you want and that’s up at the top for us. That’s the first thing to do, move the secondary nav menu up to the top.
And so that’s what this is, remove_action ‘genesis_after_header’, ‘genesis_do_subnav”. They put genesis_before that’s interesting. Instead of ‘genesis_before_header’ they’re using ‘genesis_before’ and since we’re making it sticky that probably makes sense. Doing it that way means that it’s not inside of any of the wrappers.
What is Enqueue Script and How to Use It
Issues with Conflicting jQuery
What would happen is that you might have 3 different plugins that all use jQuery and so everybody would add jQuery and you would have potentially conflicting versions of jQuery being added to your site and things sometimes just didn’t work because of the conflicting scripts.
There are lots and lots of shared scripts in these kinds of things. Lots of plugins use jQuery, jQuery UI and all kinds of other things so there is opportunity for conflicting scripts. Because of this WordPress came up with this system called enqueue script which allows as many plugins and themes as want to call the script as possible.
It doesn’t matter how many times the script is called. It’s only inserted once and so you can say to yourself, I know I need jQuery so I’m going to enqueue jQuery but you also know that by using enqueue scripts to enqueue jQuery, jQuery will only be added once and it’s going to be added at the right place.
Where to add the Scripts
There are two places that any script can be added generally speaking. You can either add them in the head of the document or you can add them at the foot of the document.
However, some scripts need to be loaded in the head because the page requires them in order to render. Generally speaking, if all of the scripts that need jQuery are in the foot then jQuery can be loaded in the footer but if there’s a script that needs jQuery that’s in the head then jQuery needs to load in the head and needs to load before that script.
Order of Script Loading Matters
The order of script loading also matters. If I’ve got a script that needs jQuery in order to be loaded, jQuery has to be loaded first. If jQuery gets loaded after my script then my script doesn’t see jQuery and doesn’t work. So there’s both a location and the order matter and it gets to be kind of complicated.
WP Enqueue Script
We’ve got this wp enqueue script and this is a WordPress function with it has these parameters here.
- The Handle
- The Source
I went through that explanation because what we’re working on here requires jQuery.
So if we were enqueuing our script like this, we would have jQuery as a script that we depend on then you can specify a version of the script that you’re currently using and you can specify whether or not your script can load in the footer. These are your different parameters for your script.
Re-visit the Studio Press Tutorial
So if we come back and look at Studio Press’ tutorial here, they’ve got wp_enqueue_script. They gave their script a little name ‘sample-sticky-menu’. The URL of the src is get_bloginfo ‘stylesheet_directory’. Then they said put it in a folder called js and call it sticky-menu.js.
So this is the URL or the src, the source, and then it is dependent upon jQuery. So it has an array of dependents and the dependents have to be registered scripts. We’re not going to talk about script registration because generally speaking you don’t have to worry about it but jQuery is a registered script.
How to Specify Loading in the Head or Foot
All we’re doing here is putting jQuery’s handle in so that’s its dependent. Here’s is its version and then they’re not saying anything about whether or not it needs to be loaded in the header or the foot so it’s going to be loaded in the head. If you don’t say anything then load in footer is false. So that’s the way they’re saying to do this.
Let’s come back over here and look down at the bottom, these are the handles. WordPress has lots of scripts that come with it. This is a whole list of the scripts that WordPress has inside of its core that come along with it. Then these are the handles for that.
So jcrop and jquery is the handle for jQuery, jquery-form, jquery-color, jquery-masonry, all of these scripts already exist inside of WordPress. If you’re doing something that is dependent upon them all you have to do is specify their handle in that dependent section.
That’s what they were doing with jQuery in this tutorial. They’re saying our little script is dependent upon jQuery so we’re going to say jquery as one of the scripts it depends on.
This dependents means that jQuery is going to load first so WordPress looks at all the scripts and if any of them are going to load in the head and it’s dependent on jQuery then WordPress makes sure that jQuery gets loaded ahead of it in the head. So that’s the beauty of this little system here.
Typical Hook to Enqueue a Script
The typical hook that you would use to enqueue a script is ‘wp_enqueue_scripts’ and so the way they’ve got this is add_action ‘wp_enqueue_scripts’, and then the name of their function ‘sp_enqueue_script’. That’s what they’re doing here.
Using a Different System to Keep the Site Faster
We aren’t going to do it this way and the reason is because this ends up requiring an http action and the script is tiny. This is all the script there is. In my mind, there is no reason to slow your site down with an http request when you can simply embed this code in your webpage so that’s what we’re going to really do.
Using Their Code but Not Their System
We’re going to use their code but we’re not going to follow their system because I don’t think it’s actually very good practice. I think it’s much better practice in this case, for you to include this directly in the body of the page rather than making it a separate script file that is enqueued.
Create the Function for the Sticky Menu
So what we’re going to do here is create a function and that function is going to be function byob_sticky_menu_script. Now, remember that they said that this was dependent on jQuery so we need to make sure that jQuery gets added at the right place.
So what we’re going to do here is enqueue script, wp-enqueue_script but the script we’re going to enqueue is jQuery. Let’s go back and look at these parameters. Actually, all of these parameters for enqueue script are optional. Everything is optional except for the handle.
So wp_enqueue_script could just be enqueue script with handle and in this case, since jQuery is already registered with WordPress we don’t need to give it an src. jQuery itself doesn’t have any dependents.
We don’t have to worry about a version and we’re not going to specify in footer because we’re actually going to let jQuery be loaded wherever jQuery needs to load. So all we have to do is say ‘jquery’. That’s our enqueue script. That’s the only thing we have to do because we don’t need to specify anything else to add jQuery.
So we’re going to have an opening script tag and a closing script tag and then come back over to their tutorial and grab their script. Let’s get this stuff indented correctly.
Add the Hook
We’re enqueuing a script. We’ve got our script and this script actually works just fine in the footer. And the hook that we’re going to hook this to is ‘genesis_before’. So add_action ‘genesis_before’, which is the very last Genesis hook on a page. It’s just before the end of the closing body tag. Then the byob_sticky_menu_script.
Add CSS for the Sticky Menu
And then we’re going to save it, upload it, reload it. Now, nothing is happening yet. Well, it sort of happens. You can see it disappearing there. The problem is we need to add the CSS that also makes this work.
They provided us with the CSS so let’s just view it raw again and just copy their CSS. Now, we’re going to come back over to my plugin and add it to the CSS editor in my plugin, the Child Theme Editor plugin. We’ll just paste that there.
Review the Sticky Menu on the Site
Now we can just save our Custom CSS and then come over and refresh this. See how the menu shows up here? It’s being hidden under the admin so you don’t see that secondary menu anymore because it’s deliberately intended not to be seen.
Add a CSS Rule to Change the Location on Certain Pages
But when you scroll up you can see it’s trying to show up. So what we need to do is add our own rule to get it down below the admin bar.
As you may know WordPress adds a variety of classes to the body tag. So if we look at the body tag here, one of the classes it automatically adds is admn-bar. It will add that when the admin-bar is being shown.
So what we’re going to do is we’re going to edit our CSS code here add a rule for when it’s the admin-bar. Let’s come down here and look at this. You can see that .nav-secondary is fixed in position. It has a top of 0.
What we really need to do here is just take this and in front of .nav-secondary we’re going to add .admin-bar and then we don’t need anything except for top. It’s admin-bar is 32 pixels tall so top we’re going to do 32px.
In this case, what it says is stick that menu to the top and what we’re saying here is in the case of a page that has the body class of admin-bar, stick it to the top but bring it down 32 pixels. Let’s save our Custom CSS and now you can see the menu dropped down.
Make Color Modifications
Unfortunately, our colors are off as well. So we need to make some color modifications. For example, we need to make our text here is white and we’re also going to want to change the color of the drop down menu and that sort of thing.
Change Text Color
We’ll just come back over to our editor here and in our .genesis-nav-menu a, this is where you want to set the color for the regular link. And that is just color:#fff. Let’s save that and take a look at it. There we go, so we don’t see the menu till we scroll down. Now that we scroll down we see the menu.
Change Background Color
We made that text color white but the background is white so you can’t see it anymore. Now we need to change the background color to this dark grey #333 color. What we’re looking for is the .sub-menu a background color. So we’ll come down here to .nav-secondary .sub-menu a and this is where we’re going to add the background color #333.
Note that if don’t spell it right it tells you. This has error checking essentially so if you’ve got an error in here some place you’re going to see that in the coloration.
Change Border Color
Let’s refresh this now and we’ve got that background color but we also have border problems to address. If we look at this one, it’s got a nice darker border which is the color #222. I already know that but you can see that here border-color:#222.
This is on .nav-primary .sub-menu a. Essentially we want to find corollary to that which is actually where we want to put a border color. So, border-color and that worked everywhere except for the top of the submenu and so we need to come down here to this without the link. It’s no a and then all we need is border color and it’s border-top-color. Save that, refresh this and it’s working.
Remove Extraneous Code
The other thing I want to do is get rid of extraneous code they have that doesn’t apply to anything. If you look down here they’ve got this .nav-secondary .sticky-right and @media only screen .sticky-right stuff. Let’s get rid of that.
I tried to figure out what on earth they meant by that, couldn’t figure it out and just decided that we’d just throw that away. There’s no reason to have code in here that doesn’t mean anything. Let’s save our Custom CSS and refresh this. It goes away at the top but when you scroll down it comes back.