0

Adding Code in the footer to place an admin bar at the top of the page seems extremely unintuitive. Even using the word wp_footer opposed to something like wp_header to add a header seems awkward. Is there something I’m missing? I coming from a Java background.

  • 1
    It's a normal frontend approach to bend things with position absolute. In this case it is performance for most reasons. Imagine the admin bar blocking the whole page while loading > bad experience. While loading it in the footer enables the browser to build the page much faster first, then load all the admin stuff when the "important part" is finished. – user3135691 Jun 9 at 20:47
  • Welcome to WordPress Development. Our site is different from most - if you have not done so yet, consider checking out the tour and help center to find out how things work. – Matthew Brown aka Lord Matt Jun 10 at 9:32
1

The reason is because wp_footer() was the only place WordPress could output HTML into a theme when the admin bar was introduced.

The front-end output of themes is determined pretty much entirely by the theme, but WordPress needs to support themes and plugins loading their own scripts and styles. To support this WordPress added two functions in version 1.5 (2005): wp_head() and wp_footer(). Theme authors add these to their templates so that they, and plugin developers, can hook into them to add scripts and styles. wp_head() is placed between the <head> tags, for scripts that need to be loaded there, and wp_footer() gets put before the closing </body> tag (i.e. at the foot of the page), for scripts that need to be loaded there.

The admin bar was introduced in WordPress 3.1 (2011). The reason it uses wp_footer() is because at that time it was still the only way to add the HTML for the admin bar to the front end in a way that was compatible with existing themes. This means that the HTML for the admin bar is output at the bottom of the page, but CSS is used to position it at the top of the screen.

Theoretically WordPress could've required that theme developers add a new hook at the top of all pages, and output the admin bar there, but that would mean that none of the themes that were already available would be compatible.

Finally, in WordPress 5.2 (2019) a new function was introduced: wp_body_open(), which is placed at the very top, after <body>. This hook could be used to output the admin bar HTML at the top, but this has not been done, likely for backwards compatibility reasons, and because wp_body_open() is nowhere near as widely adopted as wp_footer() at this stage.

When it comes to developing a theme, wp_footer() is required for more than just the admin bar. It's also required to support plugins loading their scripts at the bottom of the page. Since it's been required for 15 years now, omitting it will prevent many plugins from working, not just the admin bar. This is in fact its main purpose, which is why it's called wp_footer(), and not wp_header().

| improve this answer | |
  • Wow! Great answer Jacob! Thank you! – LeeMatt3000 Jun 10 at 17:21
0

There are at least three good reasons to do this.

First, you want the page content to load first so the visitor has a reason to stay on site. By removing things that are not the main content to the end, the visitor can start reading while the page is still loading.

Second, SEO. You want the first content that Google finds to be the article if at all possible. SEO aware themes put sidebars and everything else after the post even if they will display before or above.

Third, the bar is rendered with a lot of Javascript. Best practice (for the above to reasons) is to render Javascript only when the content is finished. after all, Javascript cannot work with DOM objects that are not yet loaded. Thus all Javascript is put at the end of the page so that the Document Ready Function can fire moments after it has been included in the page.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.