Custom Email Footer

Available with picu 1.7.0.

By following this guide, you will learn how to make your email footer look something like this:

Follow these steps:

1. Create a new folder inside your theme called picu.
2. Inside that folder create another folder called emails.
3. Inside of that, create a file called email-footer.php.
4. Paste the following code below into that file.

<?php
/**
 * Custom Email Footer
 *
 * @see https://picu.io/docs/filter-examples/custom-email-footer/
 * @version 1.0.1
 */

defined( 'ABSPATH' ) || exit;
?>
                </div>
            </td>
        </tr>
    </table>
    <table class="footer-wrap">
        <tr>
            <td class="container">
                <div class="content">
                    <style>
                        .signature {
                            margin-bottom: 30px;
                            color: white;
                            font-size: 12px;
                        }

                        .signature td {
                            line-height: 1;
                        }

                        .signature__profile-wrap {
                            width: 116px;
                        }

                        .signature__profile-image {
                            width: 90px;
                            height: 90px;
                            border-radius: 50%;
                            border: 3px solid #7ad03a;
                        }

                        .signature__spearator {
                            margin: 0 5px;
                        }

                        .signature__phone {
                            padding-top: 5px;
                        }

                        .signature__social-media {
                            padding-top: 7px;
                        }

                        .signature__social-media-icon {
                            display: inline-block;
                            margin-right: 5px;
                            width: 30px;
                            height: 30px;
                            border-radius: 30px;
                        }

                        .signature__social-media-icon img {
                            border-radius: 50%;
                        }
                    </style>
                    <table class="signature">
                        <tr>
                            <td width="signature__profile-image">
                                <img class="signature__profile-image" src="<?php echo get_stylesheet_directory_uri(); ?>/picu/emails/profile.jpg" />
                            </td>
                            <td>
                                <table>
                                    <tr>
                                        <td><strong>Clicky McClickerton</strong><br /> Photographer</td>
                                    </tr>
                                    <tr>
                                        <td class="signature__phone">(300) 523-3504 <span class="signature__spearator">|</span> <a style="color: white;" href="mailto:info@mcclickerton.com">info@mcclickerton.com</a></td>
                                    </tr>
                                    <tr>
                                        <td class="signature__social-media"><a class="signature__social-media-icon" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/picu/emails/twitter.png" /></a> <a class="signature__social-media-icon" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/picu/emails/instagram.png" /></a> <a class="signature__social-media-icon" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/picu/emails/linkedin.png" /></a></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td align="center">    
                                <?php if ( $args['picu_logo_uri'] ) {
                                    echo '<p>powered by</p><a href="https://picu.io/"><img src="' . $args['picu_logo_uri'] . '" width="80" style="width: 80px; height: auto;" alt="picu Logo"></a>';
                                } ?>
                            </td>
                        </tr>
                    </table>
                </div>    
            </td>
        </tr>
    </table>
</body>
</html>
<?php

A couple of notes:

• You can download the example images we used in this example from here. But you should probably replace them with your own, when using them on your site. 🙂
• In the example we saved the images directly inside the your-theme/picu/emails folder as well, hence the src="<?php echo get_stylesheet_directory_uri(); ?>/picu/emails/image.jpg". If you place the images somewhere else you need to adjust that path accordingly.
• Also, don’t forget to fill in the href attributes for the social media links and to replace the email address.
• All styles will be inlined right before the email is sent. That being said, with many different email clients doing a horrible job interpreting style definitions, to make really sure a style applies, you can also write them inline, as we did in this example for the email link.

Let us know if this worked or if you have any questions or ideas about customizing emails.

We’re looking forward to your feedback and also to see what you were able to create with it!