This is a short post. Simply put it’s essentially just a code snippet. I wanted to manage the site logo through the WordPress Theme Customizer in the WordPress backend administration area of a WordPress website. That way, my users can add/edit/delete images and directly see an instant update in the Theme Customizer Live Preview
I was working on a Bootstrap project, which had a vertical accordion menu as a means of navigation. I had it set to keep each menu opened, unless clicked again. Where as a typical accordion menu would close all other menus, except the one recently clicked / opened.
At the very bottom of the accordion menu, I had another block. This was the affixed item. On initial page load, as you scrolled down, the block would automatically affix properly and follow you as you continue to scroll down the page (as expected).
The problem was, what if the user had previously opened one or multiple accordion menus above? This has now adjusted the overall height of the page. Now when you scroll down, the affixed item beneath the accordion menu would now start to affix “prematurely”, causing it to overlap the menu unexpectedly. This is due to the top offset assigned to the item on initial page load.
The affixed item was assigned a top offset on initial page load. The height of the page is adjusted post page load. That means, top offset from the initial page load is no longer valid.
Upon doing some research, I’ve figured out a solution that meets my needs specifically. I’ve tested it several times on large and medium screen sizes. This item isn’t affixed on small or extra small screen sizes.
I ran into a situation where I needed to apply a callback function to
the_title filter hook in WordPress. I thought this would be a simple task. After creating my callback function and assigning it to the
the_title filter hook, I thought it did exactly what I needed it to do. Except, then I noticed it was also applying the same filter to navigation items as well. Thus, breaking the layout.
As a WordPress developer, part of my concern for my WordPress users is the ability for them to change their WordPress website content as much as possible; Without having to resort to contacting me to do so for them. This makes me think outside of the box on how I can make the WordPress theme have an intended layout, while allowing the flexibility of dynamic content. That’s where widgets come into play!
This is a mathematical formula which really comes in handy when trying to maintain the proper aspect ratio of let’s say a
<div> container as the screen is resized.