Customize Genesis Site Footer

I’ve been asked on a number of occasions what is the best way to change the text that’s found in a site footer using the Genesis Framework. Depending on your comfort level, there’s a few ways to do this.

Genesis Simple Edits

I’ll start with the easiest method to kick things off, and this one you will allow you to customize your site footer without having to learn PHP or write functions, filters, or mess with hooks.

With over 280,000 downloads, the Genesis Simple Edits plugin makes life easy for you. In just a few clicks, you can update the text to your site footer.

Go to the Genesis > Simple Edits page in your WordPress dashboard, check the “Modify Entire Footer Text” option and enter your HTML code.

Write a Custom Function

If you’re like me and prefer not to use a plugin, another method for customizing your site footer in Genesis is to write a custom function.

Open up your theme’s functions.php file and place the following code:

You might notice that I’ve removed the site footer markup and contents and redefined that back in my custom markup. I figured some folks may want to wrap their footer in addition code for styling purposes.

Genesis Simple Hooks

Alternatively to the Genesis Simple Edits plugin, you might find that you are already using the Genesis Simple Hooks plugin. If you are using that for another purpose, you can also use it to customize your site footer.

Go to the Genesis > Simple Hooks page in your WordPress dashboard, scroll down to the “genesis_footer Hook” section and be sure to check the “Unhook genesis_do_footer() function from this hook” option.

There you can place and enter your HTML code. Unlike the example of Genesis Simple Edits or the custom function listed above, you do not need to include the .site-footer and .wrap divs in the code.

If you’re looking to jazz up your site footer, I wrote a simple tutorial that shows you how to customize your 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.

Add a Sticky Message to Your Website

The other day I was designing a personal site and implemented a feature that I thought would be really fun to share. It’s called a Sticky Message, which I also added to my Mobile First theme that’s freely available for you to download.

If you’re wondering how to add the Sticky Message into your Genesis website, I’ve got good news for you. It’s quite simple, and I’m going to show you below.

Adding a Sticky Message

The first thing you need to do is register the Sticky Message widget area. Open up your theme’s functions.php file and place the following code:

Next you’ll need to use a function to hook the output of the Sticky Message widget area in place. In your theme’s functions.php file, place the following code:

The last function you need to add to your theme’s functions.php is the function that enqueues the JS file that is required. Place the following code:

It’s possible your theme already has a function which enqueues scripts and styles, and it’s perfectly ok to combine the wp_enqueue_script line of code in that.

Create a sticky-message.js file and use the code below. You’ll need to to add this file to your theme’s /js/ folder.

The javascript you see above will add the .reveal class to the .sticky-message element after a person has scrolled 100px down from the top of the screen.

Now that you’ve got all of the code in place, style the Sticky Message container. The CSS you see below displays what you see on the Mobile First demo.

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.

Add Typekit Fonts to Your Website

It’s no secret that I’m a fan of Google Fonts, but I’m also an huge advocate of Typekit Fonts as well. I love the variety of fonts that Google offers, and that they are free to use, but once in a while I want to take my website to a higher level.

If you’re wondering how to add Typekit Fonts into your Genesis website, I’ve got good news for you. It’s quite simple, and I’m going to show you below.

Adding Typekit Fonts

If you are using any of our StudioPress themes, you’ll need to remove the code that loads Google Fonts first. There’s no reason to keep it in, especially since it would add an additional http request on your site load.

Using Remobile Pro theme as an example, you’ll see this in the functions file:

You’ll want to remove the following line of code from that function:

The next step in adding Typekit Fonts to your Genesis website is to create a “kit” through your Typekit account. After you have done that, you should be provided with an Embed Code that looks something like this:

You’ll need to copy that code and place it into the Header Scripts option box on the Genesis > Theme Settings page in your WordPress dashboard.

Here’s an screenshot that shows you where to place the code:

Typekit Fonts Embed Code
Place your Typekit Fonts embed code in the Header Scripts box.

The last thing you need to do is update the CSS in your style sheet. You’ll want to do a search and replace, as this will ensure you replace all instances.

For example, you’ll notice that our Remobile Pro theme uses the Neuton font from Google, as shown in the CSS below:

Simply replace the font-family with your Typekit Fonts, as shown below:

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.