How to make Fixed Post Meta Data in Twenty Sixteen

Post Meta data in Twenty Sixteen shows information about the article as the author’s name, category, publish date and similar. Making it fixable, you can always give the reader to leave a comment quickly or even to see other articles by clicking on the category link. In this tutorial we will create a small JavaScript part that will make that possible.

This is a quick and simple tutorial. You will have to have some simple understanding of JavaScript. I will also try to make everything easy to understand.

The code we create here can be placed in a plugin or in a child theme to extend the Twenty Sixteen functionality. I would not advise you to put that code in the functions.php of the original Twenty Sixteen because it will get removed on each update.

Adding JavaScript to Footer

We will check for the allowed post types where that meta data will be fixed.

With the filter allowed_types_for_fixed_metadata you can add as many types as you want in there. This can be useful if you have a post type that follows the same layout as a post.

I am adding this script to the footer because it is not a big code. If you minify it, it will be even smaller. For such small codes, it would be a waste of HTTP requests to enqueue them in separate JavaScript files.

Sidebar and Basic Variables

We will now get the meta data sidebar of Twenty Sixteen and also start some basic variables that will be used for positioning our sidebar.

Variable wWidth contains our window width. We don’t want to have a fixed meta data sidebar below 985px because Twenty Sixteen is pushing that sidebar to the bottom on that width. We are also checking if that sidebar exists. There is no point in creating a scrolling event if there is nothing to be fixed.

The comments in the code should suffice for you to understand what is going on there. Basically, we are just getting the height of our sidebar and article and use them to create are starting position and ending position.

Starting position is the point where the sidebar will start to be fixed while scrolling and the ending position is the point where the sidebar will stop scrolling. The end position must be calculated in that way to remove the height of the sidebar because we want the bottom of our sidebar to stop.

Here is some math for that:

Sidebar Height = 200px
Article Height = 400px
Start Position = 100px (from top)
End Position = N/A

End Position = Start Position + Article Height = 500px 
Our sidebar top position will stop at 500px thus going below article for additional 200px (sidebar height)

End Position = Start Position + Article Height - Sidebar Height = 300px
Our sidebar top position will stop at 300px, thus going down for additional 200px and making it end right where the article ends

Some additional pixels where added to acknowledge margins, title height and other. You can always look up the margins, paddings and other heights that can be of importance when creating something like this. Those will be the starting calculations. After that, change those values a little to tune the scroll effect to your own liking.

Scrolling our Post Meta Data

We will have to add a scrolling function that will look for our scrolling position and then choose what to do with our Post Meta Data.

First we are checking the window width. If it is below a certain width, we will not scroll our Post Meta Data. After that we are getting our scroll position in pixels.

If our current scroll position passed the starting position and did not pass the ending position, we will scroll our Post Meta Data.

Here is the math for that:

Our current scrolling position: 400px
The starting position: 100px

TopPosition = Current - Starting = 300px
300px is the number we have to apply to our sidebar to make it fixed in our reader's eye

Additional pixels are there because of the title and margins. Twenty Sixteen also has a border around it, so we had to acknowledge that height also.

We are also giving our Post Meta Data an absolute position.

Getting our Post Meta Data back

We must also take into account the scenario when we scroll back to top and we pass our starting position. In that scenario we have to give our Post Meta Data the static position so it returns to its original position.

Conclusion

In this article we have learned a bit more about JavaScript and how to make a fixed scrolling effect. Take note that this will work on the Twenty Sixteen theme but on some other theme you would have to adjust the classes and the additional pixels.

We used the position absolute here, but I would advise you also to try it with the fixed position. You could have to make some adjustments to the code such as giving the exact scrolling position to our Post Meta Data and removing the calculations.

Become a Sponsor