CSS Fix For Sticky Headers with the WordPress Admin Bar

December 8, 2019

If you’ve developed themes with HTML & CSS for WordPress, you know that the admin bar often interferes with sticky headers.  The elements overlap each other making one illegible. Both elements are usually placed at the very top and depending what z-index value is used, one is going to appear on top of the other.

Let’s assume you are using a mark-up similar to what is below:

And your CSS for that element could be as simple as:

Well, that unfortunately renders right where WordPress likes to put the admin bar.   It will render something like the image below where the header and admin bar overlap one another.

Luckily, there is a quick CSS fix which will move the sticky element below the admin bar when it is rendered.  If the WordPress admin bar is being used, the <body>  element gets a class of .admin-bar which makes it incredibly easy to make a rule for.  Since the admin bar is 32px in height on desktop and 46px on mobile, we can simply add:

This moves your sticky element below the admin bar, if present, and renders the site how you would expect to see when having two position:fixed; elements.

Spacing for Fixed Elements in the Header

You’ll notice on this site that I use a position:relative; element called .header-spacer  to serve as a “margin” for the fixed header.  I like using this trick to account for the correct spacing you’d like to see with a sticky element so the relative elements aren’t pushed to the top of the page.  Below is an example of the mark up on how I prefer to accomplish this:

And the CSS would be:

The caveat is you need to know your fixed element’s height.  I have found over the years that it is pretty easy to identify and maintain this, even when styling for responsive and mobile. People often use Javascript to calculate the height of the header and then apply that to the header-spacer, but this can often be inconsistent when there are images involved depending on when they are rendered.

I prefer to just code the fixed element, figure out the height, and hard code it in my CSS.  There are many ways to accomplish what I am doing, but I have found that this is the most seamless when manipulating with Javascript actions on scroll.  When the margin/spacing for the main page content is determined in the header, rather than the content, it tends to be more consistent for development going forward.

So in the event I would like this spacing to remain the same with the admin bar present, I would add this to my CSS:

This means going forward, I will have a 100px spacing that is calculated into my page height and content, whether I have the admin bar present or not.  It will adjust accordingly thanks to my CSS.

Again, there are a myriad of ways to accomplish this same task but I prefer this method.  Hopefully it helps you going forward.  Happy coding!

Change the form recipient in Contact Form 7 before sending mail

March 19, 2019

In some cases, I want to simplify the process for clients to change their contact form recipient address.  Rather than have them directly modify the Contact Form 7 settings, I would prefer if they changed the “To” setting when editing the contact page, or the site settings, or something else.  In my case, Advanced Custom Fields always provides a better editing experience to accomplish this.

To the short and sweet, add this to your theme’s functions.php  file:

Let’s talk about what’s happening here.

The wpcf7_before_send_mail is very powerful and allows you modify tons of things before the email sends.  You are creating a custom function here to change what those modifications are.  In this case, we are changing the recipient.

Now, I had mentioned before that I use Advanced Custom Fields to change how someone would update this, so let’s look at how to do that.

Let’s say that I have a contact page and that’s where I would like my client’s to edit the recipient address.  First, I would need to set up a Field Group for that page, and then create a field for them to enter that email address.  Let’s call it “Recipient” and the field name will be “recipient”.

The next part is determining how to grab that field value if we are outside of a loop. In ACF’s case, it’s very simple, but it is completely dependent on your site.  Simply put, you will need the POST ID of your page.  How do you find that?

Easily enough, you can find it in the URL when you are actually editing the page.  It would look just like this:

That “###” is your Post ID.  You can now call your “Recipient” field value outside of the loop:

Let’s put this all together in our function to make it dynamic:

Now, whenever someone edits the “Recipient” field in the Post you selected, the email address will get updated before the email sends out.  If it is left blank, CF7 will use the traditional “To” field to determine the recipient.

There is a ton more customization you can accomplish with this hook.  Don’t be afraid to explore more and have more control over the editing process you provide for your clients.  Thanks, and happy coding!

Toggle A Caption in Fancybox 3

March 27, 2018

View Demo on CodePen View Project on GitHub

Since the release of Fancybox 3 and all of its new options, I started looking for a way to incorporate the caption of an image and toggle it.  The default effect of this JQuery lightbox plugin is to hide and show the caption (along with all of the UI) when the lightbox is hovered.  I have adjusted this slightly so there is a toggle button added to the options and it toggles the caption.

There are two sections to creating this effect, the Javascript and the CSS.

Adjusting the CSS

While I don’t recommend adjusting the CSS file you call when implementing Fancybox 3, you can easily add your own CSS lines to override the default styling.

I am adding a little padding, adjusting the transition property to accommodate the toggle-in, and placing it out of the viewport so the user can’t see it.  I am also declaring a property for the class I will add to the Fancybox caption when toggled.  This allows us to control the styling and transition when it is in toggled on and off.

I am also adjusting the width of the custom button I plan on creating so it is not fixed like the others.

Adding Javascript to modify Fancybox 3 and its settings

Thanks to the Fancybox 3 documentation, it is incredibly easy to modify how the plugin animates and controls your content.  Normally, Fancybox 3 will work out of the box by simply adding a data-fancybox  attribute to your HTML element, but in this case we need to go a little further to adjust the settings.

In this case, we will be doing two things –

  1. Declaring a custom button for Fancybox 3
  2. Adding a click event to the button which toggles a CSS class

So, how do we do that?

Well, first, we are going to create the button with this Javascript:

Now, we need to ensure that when Fancybox is called that it understands to use our new button.  Let’s call Fancybox and determine which buttons it should use:

Lastly, we need to add a click event on this button, so it knows what to do!

Here we are saying — if this button is ever clicked, see if the caption already has our toggled class, and if not — add it!

That’s it!  You now have a Fancybox 3 plugin that toggles the caption.

Hopefully with this example, you are able to see the flexibility and customization the developers at FancyApps provide to their already stellar plugin.  You could easily develop a custom user-experience that goes much further than a simple Lightbox effect.  Feel free to comment and send me examples!

 

Embed A Tumblr Feed In WordPress

January 19, 2017

Below is an example showing how to embed multiple Tumblr posts as a feed into a WordPress site.  You will need a little coding experience with PHP and access to your WordPress theme files.  It is also required to have a Tumblr API key.

1. Get A Tumblr API key

This is required to use Tumblr’s API for requests.  In this case, we will be using it to fetch the latest posts from a Tumblr user.  You can visit here to set up an APP and retrieve your API key.

2. Set Up Your Shortcode

A shortcode is a simple WordPress snippet that you can pop into the page/post editor to place some code, make a query, or anything else you could possibly want.  Today, we are going to fetch Tumblr posts with PHP and place them in the site.

Editing the functions.php file of your WordPress theme, place this code at the bottom before the PHP end tag:

Let’s talk a little about what is happening here.

There are 3 variables you need to define at the beginning of the code:

  1. Your API key
  2. The amount of posts you want
  3. The Tumblr URL of the posts you want

The code will then fetch those posts and return them in JSON format.  In your foreach loop, you could cycle through each one of those objects in the array and pull any information you would need from each post.  In this case, I only want the post URL.

I only want the post URL because I am going to use a very handy function from WordPress to do the hard work for me.  Instead of figuring out whether each post is a link, a video, a photo, an embed, and then trying to format the HTML for each one, I will use what WordPress already provides, the oEmbed function.  That functionality takes whatever URL you paste in your WordPress text editor and then tries to find the embed code for it and place it within your content.

WordPress also provides a function to initiate this feature however you please: wp_embed_get();

So for this line of code:

we are just looping through each returned Tumblr post via JSON, and running it through the WordPress embed function wp_embed_get().

3. Place your shortcode where you want the feed

By adding the line below, you will call the function we placed in our functions.php file, and it will place it where the shortcode was used.

This shortcode can be placed anywhere on a page, post, or custom post type in the content editor.

You can customize a lot of the functionality to suit your needs, but hopefully this gets you started working with the Tumblr API and the many ways you can dynamically call Tumblr content on your WordPress site.

Credit

I want to credit @groovycarrot for his post describing how to first work with the Tumblr API in PHP which inspired the idea.

Call A Relative Font, Image, or Javascript File in a Custom Weebly Theme

November 30, 2016

I had the task of creating a custom Weebly theme recently.  One of the simplest, yet most difficult, things I found in creating and uploading a theme was how to properly call javascript files, fonts, images, and anything else relative in the theme.  While I cannot dive into the entire theme structure and requirements, there is a lot of provided documentation from Weebly on how to do this.

View Weebly Documentation

Instead, I want to focus on the document structure of a Weebly theme and where the files should be located when you upload them.  Then, I want to talk about how they can be called.

This is an example of the document structure you would upload to Weebly as a custom theme.  To learn more about the anatomy of a template, visit here.

  • /
    • assets/
      • fonts/
      • images/
      • custom.js
    • main_style.css
    • landing.html

What I am showing here is about the absolute minimum for a Weebly theme.  I have my HTML page (landing.html), my stylesheet (main_style.css), I have my assets directory, and within that directory I have 2 sub-directories (fonts, images) and a javascript file (custom.js).

Calling A Javascript File in the HTML

In our HTML file (in this case landing.html), we can call our javascript file (custom.js) through the following script tag:

You can basically think of it as “/assets/” = “/files/theme/” when it comes to being called.

A couple things I note found:

  • Calling Javascript files worked best at the end of the HTML right before </body>
  • Almost none of the Javascript files worked in Preview/Edit.  Only until I Published did they work.

Calling Images or Fonts in the stylesheet

In the stylesheet (main_style.css), you would think it is necessary to call an image with this relative path:

but, you’d be wrong.  The relative path should be:

The same goes for calling fonts within the “/font/” sub-directory of assets:

This is because your stylesheet is moved into your “/assets/” directory when it is uploaded, even though it is in your root when it is uploaded/downloaded.  Even when you download the Weebly provided base theme, your stylesheet is in your root, but it is moved to an “/asset/” directory after upload.

Call An External File in the HTML

Below is an example of how I would call Font Awesome in an HTML file:

Troubleshooting

If you run across any issues, there are a few things you can check or keep in mind:

  • Zip up the contents of your root directory when you upload, not the directory itself!
  • The javascript files rarely work in the Editor, at least, for me.  It wasn’t until I published the site that I could actually see a lot of the javascript working
  • Create an “/assets/” directory because Weebly will create one for you anyway

Hopefully, this helps during the development of a custom theme for a Weebly site.