Repeating headers & footers

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 eachother. If the contents of the header and footer this doesn’t necessarily cause troubles when printing, but it could give unexpected results. Single exports don’t have this problem.

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;
}

To make footers repeating, you have to make sure the footer is present on the first page. This may be somewhat counter intuitive, 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.