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.
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).
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.
I guess we’ll call that Lesson 1.