Customize Your Footer with a Heart Dashicon

If you take a look at the bottom of the page in my footer, you’ll notice that it does not display the default text that is output by Genesis. Many sites display “Made with Love” or “Handcrafted with Love” in that space, and I wanted to do something similar with mine. In a few quick steps it was easy to do.

Enqueuing Dashicons

Dashicons is the official icon font of the WordPress admin as of 3.8, and it’s very easy to load. Simply use the code below in your functions file:

Since dashicons are shipped with WordPress Core, this is all you need to do. You don’t have to load a custom icon font or to do anything else.

Customizing Your Footer

The next step in the process is quite simple as well. Download and install the Genesis Simple Edits plugin on your website.

For those of you who are unfamiliar, this plugin allows you edit the three most commonly modified areas in any Genesis theme: the entry meta in the entry header, the entry meta in the entry footer and the site footer.

After you’ve activated the plugin, go to the Genesis > Simple Edits screen and look for the Footer Output option box at the bottom of the screen.

(Be sure that the Modify Entire Footer Text option is selected.)

Here you should place the following code:

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 my own website.

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 dashicon.

Below is the CSS that I have used on my website to ensure the best look and placement of the heart dashicon in my site footer.

And that is it — you’ve customized your site footer with a heart dashicon!

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.