Repeating headers & footers

Table of Contents

The default simple template creates a document with a header on the first page and the footer on the last page. If you want the header and footer to repeat on every page you have to make a few changes to the template.

Note: repeating the headers & footers does not work if you also want to print the invoices in bulk, as the footers of multiple invoices will stack on top of each other. If the contents of the header and footer are always the same for each order, this isn’t necessarily a problem when printing (you won’t see it because the stacked text will be the same), but it could give unexpected results when there are order specific contents in the repeating elements. Single exports don’t have this problem.

Repeating the header on every page #

We start with the easy path, repeating headers can be done with only CSS changes. More about custom CSS here: Using custom styles.

First of all, you need to increase the top-margin of the page, because we’re going to print the header into the margin (to prevent text from overlapping).

In this example, I’m making the header 5cm high (+1cm for the regular page margin):

@page {
    margin-top: 6cm;
    margin-bottom: 3cm;
    margin-left: 2cm;
    margin-right: 2cm;
}

Next, we’re going to change the positioning of the header. Note that we’re using a negative top value that is equal to the height of the header.

table.head {
    top: -5cm;
    position: fixed;
}

Repeating the footer on every page #

To make footers repeating, you have to make sure the footer is present on the first page. This may be somewhat counterintuitive, but you can put the footer right below the header. The first step is creating a custom template by copying the template files to your child theme (instructions here)

Do this in every document template (invoice.php, packing-slip.php).

The footer is created with this code:

<?php if ( $this->get_footer() ): ?>
<div id="footer">
    <?php $this->footer(); ?>
</div><!-- #letter-footer -->
<?php endif; ?>

So after you have moved it below the header, the top part of your template looks like this:

<table class="head container">
    <tr>
        <td class="header">
        <?php
        if( $this->has_header_logo() ) {
            $this->header_logo();
        } else {
            echo $this->get_title();
        }
        ?>
        </td>
        <td class="shop-info">
            <div class="shop-name"><h3><?php $this->shop_name(); ?></h3></div>
            <div class="shop-address"><?php $this->shop_address(); ?></div>
        </td>
    </tr>
</table>
 
<?php if ( $this->get_footer() ): ?>
<div id="footer">
    <?php $this->footer(); ?>
</div><!-- #letter-footer -->
<?php endif; ?>

Next, you have to change the positioning of the footer element to position:fixed. Open style.css from your custom template folder and change the #footer positioning (defined all the way at the end of the stylesheet) from absolute to fixed.

The footer will now repeat on every page.

That’s it! Repeating headers and footers.

What are your Feelings