Want to personalize your website footer with a sweet touch? Adding a “Made with ❤️” message is a small but meaningful detail that can make your site feel more human and memorable.
In this quick tutorial, we’ll show you how to do it without any plugins — just a simple HTML or PHP tweak.
🔧 Method 1: For Elementor or Page Builder Users
If you’re using Elementor, follow these steps:
- Go to Appearance > Footer (or Templates > Footer).
- Add a Text widget or HTML widget.
- Paste this code:
“`html
<p style="text-align:center; font-size:14px;">
Made with <span style="color:red;">❤️</span> by <a href="https://codexcool.com" target="_blank">CodeXcool</a>
</p>
Style it as needed with Elementor controls.
💻 Method 2: Add to Your WordPress Theme Footer
If you want to add this globally to your site footer:
- Go to your WordPress Dashboard.
- Navigate to Appearance > Theme File Editor.
- Find the
footer.php
file. - Before the
</body>
or</footer>
tag, insert:
<p style="text-align:center; font-size:14px;">
Made with <span style="color:red;">❤️</span> by <a href="https://codexcool.com" target="_blank">CodeXcool</a>
</p>
⚠️ Important: Always back up your theme files before editing them directly.
🌈 Bonus Tips
- You can animate the heart using CSS if you want a cute pulsing effect.
- Add your brand link, portfolio, or support page beside the message.
- Use this footer in your child theme to preserve it through theme updates.
✅ Final Output Preview:
Made with ❤️ by CodeXcool
💡 Why Add This?
- Adds human touch to your brand.
- Boosts trust and relatability.
- Shows off a bit of your personality.
That’s it! A quick and heartfelt way to enhance your site’s footer.
Want more WordPress tricks like this?
👉 Explore more tutorials on EncodeByte
Another Advance Way
Open up your theme’s functions.php file and place the code below. Feel free to place this at the very bottom of the file, if you want.
// Enqueue Ionicons.
add_action( 'wp_enqueue_scripts', 'sp_enqueue_ionicons' );
function sp_enqueue_ionicons() {
wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}
To see a comprehensive list of their icon font library, click here.
Customizing Your Footer
The next step in the process is quite simple as well.
(Be sure that the Modify Entire Footer Text option is selected.)
Here you should place the following code.
<p class="love">Made with <i class="icon ion-heart"></i> By Franchbabu</p>
Obviously you can edit the HTML provided with your own name and links to other places. This is simply the code that I use on Authentik.
Styling the Heart Dashicon
Depending on what size and color of fonts you have declared in your style sheet, you might need to tweak the CSS a bit for your heart Ionicon.
Below is the CSS that I have used on my website to ensure the best look and placement of the heart Ionicon in my site footer.
/* Heart Icon
--------------------------------------------- */
.site-footer .icon {
font-size: 20px;
}
.site-footer .love .icon {
font-size: 12px;
margin-left: 2px;
margin-right: 2px;
And that is it—you’ve customized your site footer with a heart icon!