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

Get the Good Stuff

If you're interested in web design or the Genesis Framework, here's where you take the next step in growing your business. I'll be writing about my experiences with these topics.

Sign up for immediate access to the following:

  • Genesis Simple Share Plugin
  • Minimalist Theme for Genesis
  • Mobile First Theme for Genesis
  • Quote Graphic PSD

You will also be notified every time I publish on my blog.

Want to get FREE content? Click here to register.

Comments

  1. says

    Very nice! I’ve always just used the html heart character “♥” but I really like this way because it allows you to control the styling of the heart separately! Thanks for sharing :)

  2. says

    Very cool Brian! I’ve been playing around quite a bit with both Dashicons and Genericons integrating them all over the place but never considered the footer.

Leave a Reply

Your email address will not be published. Required fields are marked *