Skip to Content

Make a leaderboard load after the content in WordPress

Abstract image of streaming codeIt’s ideal to have your content as close to the top of the source code as possible – maybe even crucial. I’ve run the same site both ways, run two sites simultaneously both ways, and every time the theme with the content closer to the top enjoys a boost from the SERPs. SE bots have short attention spans. You’ve got to grab them fast.

The main problem with most themes is a left-side sidebar. I haven’t figured out how to absolutely position a left sidebar so it loads after the content but ends up where it should be. For now, I use themes that don’t have left sidebars, or that were programmed by someone who knows how to load a left sidebar after the content.

But I can tell you how to create a space at the top for leaderboard ads or recent posts or your logo or whatever you want load visually at the top, but after the content in the source code. It’s impossible to write a tutorial that’ll work on every theme, but here’s a basic guide that should get you started (if you have questions about making it work in a particular theme, post them in the comments and I’ll answer them if I can). The order of the steps doesn’t really matter.

You need to create a space at the top for your leaderboard (or whatever).  Start by creating a CSS ID like this one:
#top_ad {
width: 728px;
text-align: center;
left: 86px;}

The “position:absolute;” line is the big trick here. That tells it that no matter when it loads the #top_ad ID, that stuff should go where the CSS tells it, which is “top:0px; left: 86px;.” You can put some space at the top if you prefer. I got “86” by subtracting my leaderboard width from my theme width and dividing that in two (for center positioning). You can also adjust your measurements to throw in some padding for a nice border around the ad.

If you have something at the top loading after everything else, it’s going to push the other stuff down when it loads – which annoys me when I’m reading someone’s site and suddenly, whump, everything falls. So I took my logo graphic and added 100 pixels of blank height to it, making it 250 pixels high with the logo at the bottom. In the top 100 pixels, I designed an attractive box to hold the ad and make it look good with my theme. Now the logo loads first, then the main content, then the leaderboard, and then the sidebar.

But I’ve skipped a step here. How do you tell the theme when to load the leaderboard? In WordPress, you need to create a new page in your theme folder called “top_ad.php.” Into that page, you insert your code wrapped in div code for the id “leaderboard”:
<div id="top_ad">
[insert your ad code or php calls for recent posts or whatever in here]

Now look in your main theme template, wherever that is – in WordPress it would be “index.php” (and you’d also need to do this on singlepost.php). Toward the bottom you should have some lines that load your sidebar(s) and footer:
<?php include (TEMPLATEPATH . '/sidebarRight.php'); ?>
<?php include (TEMPLATEPATH . '/sidebarleft.php'); ?>
<?php get_footer(); ?>

Just add in a call for the leaderboard:
<?php include (TEMPLATEPATH . '/sidebarRight.php'); ?>
<?php include (TEMPLATEPATH . '/sidebarleft.php'); ?>
<?php include (TEMPLATEPATH . '/leaderboard.php'); ?>
<?php get_footer(); ?>

Remember to do the same in single.php, archives.php, page.php and search.php – any file that calls the sidebars should also call your leaderboard.

That’s it! Just remember: every space you create is another php call which can contribute to overloading a server if you get Dugg. I find reducing PHP calls to be at least as valuable as caching. But if you’re concerned, change all your categories from a php call to straight HTML (how often do you create new categories, after all?) and you’ll more than offset the gain of a couple of php calls.