One of the first things I began working on with this project was this website. At first, I planned to design and code my own theme, but I soon realized that was going to take longer than the 90 days I’d allotted to get the site up and running. So, I’ll be using one of the free-and-customizable, off-the-shelf themes available at WordPress Themes | WordPress.org.
I’m still planning to create my own theme, however, and so I started to think about the landing page – and really the overall page design. WordPress pages are basically composed of a header, a content area, maybe a sidebar or two (or three), and a footer. The header and footer are, or should be (in my opinion), consistent across all the pages of a site. The footer seems to be pretty straightforward, so I decided to start with the header design and coding.
I personally like the headers that have some branding at the top, then a menu/nav bar in a contrasting color. I also like navbars that are “sticky” once they reach the top of the browser window. That is, once the user has scrolled the page up so that the navbar is at the top of the window, it stays there, possibly with some changes, and the rest of the page scrolls underneath it.
I’ve used plugins on other sites that provide this sticky header behavior, but because I’m creating my own theme, I wanted to build in this capability. What I want is for the navbar to take on a smaller version of the logo, add an indication of what page or article the user is viewing, and keep the main menu items when it sticks to the top of the window.
So… some searching led to a couple of helpful answers on Stack Overflow – Where Developers Learn, Share, & Build Careers that were extremely helpful (as Stack Overflow tends to be). I borrowed some code samples, expanded and customized them for my particular situation, and soon had the beginnings of a header for my theme.
At this point, the JavaScript code was embedded in <script></script> tags in the HTML file for the page. Wanting to follow common, current practices, I decided to move the JavaScript to a file and load it using a <script> tag with a “src=’’” parameter. So I created a separate .js file, copied the code to it, and replace the code in the HTML file with the above mentioned “src=’’” parameter.
I should pause here and give a shout out to the folks at JetBrains: Essential tools for software developers and teams. I use their “IntelliJ IDEA” IDE for most serious coding work (I use Microsoft’s VS Code as well, but JetBrains’ tools are my go-to for project level work).
So, I’m chugging along in IntelliJ IDEA working on this project. Now, one of the nice things that IntelliJ (and I suspect most modern IDEs (and probably VS Code, too)) is keep track of the files in the project and provides a dropdown to select a file when you type “<script src=” in an HTML file. When I started typing that line, I was presented with a dropdown list and chose the .js file I’d recently created. I saved everything and told the IDE to open the HTML file in my default browser. The JavaScript code did not work and the navbar scrolled with the rest of the page and right off the top of the window. Bummer.
At first, I thought maybe I needed to encapsulate the JavaScript code in a formal function declaration. Nope, that wasn’t it. Next, I thought it might be that I needed to attach the function to a DOM event as a handler. No, I was doing that in the .js file, and it still wasn’t working. Then I thought maybe I needed to do something within the HTML to run the code in the .js file. Nope, not that either.
I should note that I did learn a lot from this debugging session, and that’s what I’m trying to do, so this wasn’t a waste of time.
Finally, after spending way more time that I should have on the above, I decided to throw in the towel and open the console window of the developer tools built into Microsoft’s Edge browser (all of the modern browsers have dev tools built in, I just happen to use Edge). Low and behold there was an error message in the console saying that the “myJavaScript.css” file (not really the name I used, but you get the idea) was not executable. Yes, that’s right – when IntelliJ provided the dropdown list, I had chosen the wrong file for the “src=’’” parameter in the <script> tag. Argh! After correcting the file name, it worked like a charm.
I guess we’ll call that Lesson 1.