Among the multitude of content man­age­ment systems WordPress is perhaps the most fre­quently used CMS. A WordPress website consists of several com­pon­ents:

  • WordPress Core: the WordPress in­stall­a­tion
  • Theme: a basic framework to display dynamic content
  • Plugins: to extend the core func­tion­al­ity of WordPress
  • Content: created by the owner and stored in the media library

To create a truly suc­cess­ful WordPress, usually small changes are in­dis­pens­able. The in­teg­ra­tion of external scripts is one of the most common changes users make. Often, these scripts need to be in­teg­rated in the WordPress footer. We’ll show you how the process works and what to look out for.

Cheap domain names – buy yours now
  • Free website pro­tec­tion with SSL Wildcard included
  • Free private re­gis­tra­tion for greater privacy
  • Free Domain Connect for easy DNS setup

What is the WordPress footer, and what are its elements?

Generally, a footer sits at the bottom of a page. The footer signals the visitor that they’ve scrolled to the end of the page. The WordPress footer contains two types of elements, which we’ll discuss in more detail below.

  1. Visible elements
  2. Invisible elements

Visible elements in WordPress footer

Unlike a WordPress header, the WordPress footer usually contains secondary and less prominent visible elements. This makes sense because the header acts as the first visual im­pres­sion of a page. A well-con­struc­ted header can also act a bit like a magnet and keep visitors checking out a page for longer. The footer usually contains the following elements:

  • Links to other pages such as privacy policy, contact details, etc.
  • Copyright notice
  • 'Scroll up' link
Tip

Get started building your own WordPress site with pro­fes­sion­al WordPress hosting from IONOS.

Invisible elements in WordPress footer

Unlike the WordPress footer, the header includes several meta tags. Most of these must be included in the HTML head element. However, modern metadata tends to be used outside of the HTML head. Above all, various script elements tend to be used. These are in­teg­rated in the WordPress footer.

A special feature of external script files is that when in­teg­rated into the HTML head, script files block the loading of the page. Therefore, the tra­di­tion­al re­com­mend­a­tion was to place external script elements before the closing </body> tag whenever possible. In WordPress, this cor­res­ponds to in­teg­rat­ing them in the footer.

Tip

The script element now un­der­stands modern at­trib­utes ‘async’ and ‘defer’, with which script files can be in­teg­rated without blocking page loading.

But we need to dif­fer­en­ti­ate a little when speaking of scripts. Scripts can be loaded from an external file, but they can also be embedded on a page. Fur­ther­more, script elements are now used for a much broader range of purposes. The ‘type’ attribute is used to describe the type of the embedded data. In this way, ap­plic­a­tion data and metadata can be embedded on a single page. Here is an overview of fre­quently used script elements:

Script element De­scrip­tion Attribute
Reference to script file External, ex­ecut­able script src attribute with URL
Embedded script Embedded, ex­ecut­able script no src attribute
JSON-LD script mark-up Embedded, non-ex­ecut­able metadata type="ap­plic­a­tion/ld+json"
JSON data Embedded, non-ex­ecut­able ap­plic­a­tion data type="ap­plic­a­tion/json"

How to edit a footer in WordPress?

There are two ways to place ad­di­tion­al code in a WordPress footer:

  1. Use a plugin
  2. Modify the theme code

Both methods have ad­vant­ages and dis­ad­vant­ages that are sum­mar­ised below:

Method Advantage Dis­ad­vant­age
Use a plugin Simple ap­plic­a­tion and use Code snippets are stored in the database; in­suf­fi­cient control; can cause per­form­ance problems
Modify the theme Code snippets form part of the codebase; visual changes possible; control over even complex ap­plic­a­tions Requires editing of the theme code and coding skills
Managed Hosting for WordPress
Create your site with AI, we manage the rest
  • Stress-free, no matter your skill level with easy AI tools
  • Full cus­tom­isa­tion with themes and plugins
  • Hassle-free updates and less admin

Using a plugin to change the WordPress footer

A range of plugins are available as part of the WordPress ecosystem to edit the footer. These are mainly suitable for inserting invisible elements into the WordPress footer. Most are un­suit­able for changing visual elements. Here is an overview of known plugins for editing the footer in WordPress:

We’ll show you how to use the ‘Header and Footer Scripts’ plugin to place ad­di­tion­al code in the WordPress footer step-by-step.

Image: Install new WordPress plugin
Select ‘Plugins’ from the left-hand menu and click ‘Install’.
Image: Search for Header and Footer Scripts Plugin
Enter ‘Header and Footer Scripts’ in the search field to the right.
Image: Install Header and Footer Scripts plugin
Select the plugin and click on ‘Install Now’.
Image: Activate Header and Footer Scripts plugin
Click on ‘Activate’ on selected plugin.
Image: Navigate to your Header and Footer Scripts plugin
Click on ‘Settings’ in the left-hand menu and select ‘Header and Footer Scripts’.
Image: Insert script mark-up in WordPress footer
Copy the code you want to insert in the WordPress footer in the ‘Scripts in footer’ text window and click ‘Save settings’.
New call-to-action

Modify the theme code to change the WordPress footer

A WordPress theme is the basic framework for dis­play­ing the content on a WordPress site. Editing the theme gives you full control over the footer; both visible and invisible elements can be added, removed, and modified.

Below, we’ll focus on invisible elements, because changes to visible elements usually depend on the theme you’ve used which would require the inclusion of style sheets for our ex­plan­a­tions. There is one exception: if you are well-versed in HTML and PHP, you can easily remove a visual element.

When you want to make changes to a theme, it’s worth creating a a href="t3://page?uid=2815">child theme which guar­an­tees that changes are safe from updates and can be reversed at any time. The benefits outweigh the slightly higher effort.

You can edit the WordPress footer in the following ways:

  1. Modify the code in the template file footer.php
  2. Create ad­di­tion­al functions in functions.php
Method Advantage Dis­ad­vant­age
Add code to footer.php The principle of action is easy to un­der­stand; Control over the sequence of the scripts; visual changes can also be im­ple­men­ted Changes are hard-coded; Multiple changes made risk creation of confusing code
Create functions in functions.php Clear sep­ar­a­tion of present­a­tion and func­tion­al­ity; detailed control over in­teg­rated script tags May be confusing for beginners; higher com­plex­ity

First, let’s take a look at the general structure of a modern HTML page. Many WordPress themes follow this pattern, albeit with slight vari­ations. We point out the WordPress-specific patterns in the comments:

<!-- `header.php` starts here -->
    
        <!--—Invisible elements in HTML head ---->
    
    
        <header></header>
            <!--—Visible elements in header ---->
        
        <!-- `header.php` ends here -->
        <main></main>
            <!--—Visible elements in main area ---->
        
        <!-- `footer.php` starts here -->
        <footer></footer>
            <!--—Visible elements in footer ---->
        
            <!--—Invisible elements at end of document ---->
    
<!-- `footer.php` ends here -->

A HTML document consists of the two elements: <head> and <body>. In our example, the <body> element contains the elements <header>, <main>, and <footer>. In a WordPress theme, this element structure is dis­trib­uted across several template files. Almost all themes use the files header.php and footer.php to encode the header or footer.

Modify code in footer.php

Perhaps the fastest way to modify the WordPress footer is to edit the template file ‘footer.php’. Let’s take a look at the official WordPress theme ‘TwentyT­wenty’ to exemplify how a typical footer.php file is struc­tured. Note that the code below is shortened.

<footer id="site-footer" role="contentinfo" class="header-footer-group"></footer>
        <!--—Visible elements are displayed here ---->
        <!-- #site-footer -->
        <!--?php wp_footer(); ?-->
        <!-- Invisible elements are displayed here -->
  1. The footer.php starts with an opening
    tag.
  2. This is followed by visible elements and the closing tag.
  3. Then the WordPress hook wp_footer is called.

Ad­di­tion­al elements are dy­nam­ic­ally inserted (we’ll get to this further down in our guide).

  1. Finally, the closing </body> and </html> tags are following.

You’ll notice that the WordPress footer in the TwentyT­wenty theme contains the text ‘Powered by WordPress’. Let’s remove this from the footer.php by editing the file using the following code:

<p class="powered-by-wordpress">
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
    </a>
</p><!-- .powered-by-wordpress -->

By deleting the relevant lines of code and saving the file, the text on the page is no longer displayed. But beware! The WordPress footer is in­teg­rated on every page. Errors made when you’re adapting the code can affect your entire site. Be sure to make a copy of your file before you get started.

Often, it’s easier and less risky to add a line of CSS instead of modifying the PHP code. However, this only works if the theme code is neat. For the TwentyT­wenty theme, you can hide the text with the following CSS code:

#site-footer .powered-by-wordpress {
    display: none;}

Create functions in functions.php

The functions.php file is a special theme file that contains code for cus­tom­ising the theme and the WordPress site. Among other things, it serves as an entry point for the dynamic injection of code in the WordPress footer. The wp_footer hook is linked to specially defined functions: if the hook works, the functions are executed. Let’s look at a few examples.

The begin with, we embed a block with script mark-up metadata on the WordPress homepage. To do this, we add the following code in JSON-LD format to functions.php:

The begin with, we embed a block with script mark-up metadata on the WordPress homepage. To do this, we add the following code in JSON-LD format to functions.php:

function load_start_page_meta() {
    // Are we on the homepage?
    if ( is_front_page() ) {
        // Script element output
        echo <<<'EOT'
        <script type="application/ld+json"></codesnippet></script>
        {
            "@context": "http://www.schema.org",
            "@type": "Florist",
            "name": "Happy Flower",
            "address": {
                 "@type": "PostalAddress",
                 "streetAddress": "Floral Street 1",
                 "addressLocality": "Berlin",
                 "postalCode": "10243"
            }
        }
        
EOT; // this line must not be indented!
    }
}
// Link the function with the `wp_footer` hook
add_action( 'wp_footer', 'load_start_page_meta' );
Note

In this example, we’re using the ‘Nowdoc syntax’ to integrate JSON code within an HTML script element in PHP.

In the following example, we want to add a script element with JSON data only on pages where comments are activated. Let’s say we want to hide comments from specific users or within a specified time frame. We add the name of the user and the year on the pages as follows:

function load_comments_exclusion() {
    // are we on the page with comments?
    if ( is_single() && comments_open() ) {
        // Script element output
        echo <<<'EOT'
        <script type="application/json"></codesnippet></script>
            {
                "userName": "Mark Jones",
                "cutoffYear": "2018"
            }
        
EOT; // this line must not be indented!
    }
}
// Link the function with the `wp_footer` hook

Embedding ad­di­tion­al script files in a WordPress footer – here’s how

The in­teg­ra­tion of external scripts is one of the most common changes made to a WordPress footer. It’s usually not a good idea to include external script files via a plug-in or by editing the footer.php. Instead, you should use the specific func­tion­al­ity provided by WordPress. The wp_enqueue_script () function and the wp_enqueue_scripts hook are used to make the changes in functions.php.

Using the WordPress-specific functions to integrate external scripts has several ad­vant­ages:

  • You can specify that Script A loads only once Script B has loaded. This step ensures that de­pend­en­cies are being met.
  • You can specify that a script must be output in the WordPress footer. Al­tern­at­ively, the script ends up in the HTML head.
  • You can add an explicit version number for a script. This is added to the script URL. If the version changes, the script is assigned a new URL. It forces the script to reload rather than use the old version from a cache.
  • You can define which scripts and how you want to integrate them. WordPress takes care of the rest. This is an essential step to optimise per­form­ance. For example, a caching plug-in can take over the list of scripts to be in­teg­rated and process them. Fre­quently used op­tim­isa­tion tech­niques such as ‘mini­fic­a­tion’ and ‘con­cat­en­a­tion’ are based on this mechanism.

Let’s take a closer look at the structure of the wp_enqueue_script () function. Here is the basic script to call up the function with all its para­met­ers:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Below is a summary of the wp_enqueue_script () function and ex­plan­a­tions of its para­met­ers and an example:

wp_enqueue_script() $handle $src $deps $ver $in_footer
Ex­plan­a­tion Internal ab­bre­vi­ation Path to JavaS­cript file De­pend­ency array Version Output in footer?
Example 'main-script' '/js/main.js' in theme folder array('jquery') false true

Finally, let’s look at how the example in the table is trans­lated into code. If we put the following code in the functions.php file, our script will be loaded as a de­pend­ency on jQuery. The version number of the WordPress in­stall­a­tion is added as a version to the script URL. The script is in­teg­rated in the WordPress footer:

function add_theme_scripts() {
    # Load script based on jQuery in the footer
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup
Go to Main Menu