Jumping headers on wordpress make for a long afternoon

There is this great feature of wordpress where it tries to be too smart. For example — you have a killer page template with a lovely header under the top bar.  You create a page and want to add in some interactive tools that are mobile responsive  and need to reference a secondary script or stylesheet. Well, WordPress will get all excited, load the first style, load the direct style, and then jump the view to the interactive section on load.  all this ugly jumping is bad enough, but then you lose the top of the header.

“Say What? That is nuts,” you shout in disbelief.

Yup, that is nuts.

While many of these problems can be resolved by placing your JS into a file on the server, and all CSS into the core stylesheet, there are times when it just wont work.  Desperate times call for desperate measures:

Forced padding style on the header.   Sad, but true.

At it’s simplest, lets say your header class is named ” hero-header ” , then on the offending page, straight into the html, you can write in:

 

<style>

hero-header {

padding-top:194px;

}

</style>

// note that 194 is a fairly random number that happened to be how much one example header was being set under the top bar //

It will force the proper placement of the hero image, eliminating the “jump” after load.   If your header element has text, it is likely you will have to force-set any text elements as well.   Hope this saves you some time.

 

Happy WordPress Coding!

 

Chart.js refresh glitch causes chart to bounce to old data, WordPress hates JS, and what to do about it

So this afternoon was full of coding fun. Two pretty big issues arose when trying to implement a straightforward Chart.js display calculator.

ISSUE #1: Chart js charts bounce around when you hover over them and revert back to old data.

The message boards insist this is fixed, but alas, it isn’t.

For a reasonable workaround, I ended up having to do two things:

#1: Move the chart variable outside the function and destroy the chart, then call the build function

<script>
var chart;
if (chart) {chart.destroy();}
function buildChart()

 

#2: Add chart update to the very end of the buildChart function:

chart.update(); chart.update();

 

Either one of these alone wasnt working, but both did it.   5 hours I will not get back of my life.

 

ISSUE #2: WordPress appends < p > to javascript if you enter in your chart rendering to the text field.

The easiest workaround to this is to eliminate all of your blank lines in Notepad++. Not sexy, but it works.

 

Check out the simple end result:  Simple Chart.js Implementation

 

Happy Coding !

WordPress redirect code with delay for click through tracking

Enterprises using WordPress to run their sites frequently run into an issue with WordPress “over-automating” redirects — it is so smart that in many cases, redirecting a link to a resource happens too quickly for tracking software to capture the clickthroughs (Pardot, anyone?)

One way to force the clickthrough to pause and get tracked is to edit the php on the resource template.

For one company, the solution to this issue was to edit the attachment.php and add this:

 

 

<?php

$wp_get_attachment_var = wp_get_attachment_url();

echo “Please <a href=’$wp_get_attachment_var’>click here </a>if the page does not refresh.”;

echo “<meta http-equiv=\”refresh\” content=\”4;URL=’ $wp_get_attachment_var  ‘\”>”;

?>

 

This will give you 4 seconds for page load and then refresh to the attachment url. If the email tracking can act more quickly, change the content=\”4 to content=\”2 ( where “2”  is the number of seconds).

 

Happy tracking!

Nicole