Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 6 – Example #3 – Change the Genesis Footer

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’re now at example #3 of ways to use Action Hooks to customize the Genesis theme. For this example we’re going to change the default Genesis footer. We’re going to remove this attribution and we’re going to add our own.

Remove Existing Attribution and Add our Own

I know that there are plugins that will do this for you but again, the purpose for this is to demonstrate how PHP works. You may or may not choose to use a plugin but the amount of code that it takes to make this change is very small so it may be easier simply to use the code.

The way this works right now is we have this footer section with a class of “site-footer”. Inside of “site-footer” is a div class=”wrap” and inside of “wrap” is this paragraph of text. That’s what we are going to change. So we’re going to remove this little attribution and we’re going to add our own attribution.

PHP Structure in the Footer

The PHP structure for this is genesis_open_footer and genesis_close_footer down below. That includes the footer and the wrap. So we’ve got open_footer and close_footer as two functions and then you have genesis_do_footer.

The genesis_do_footer is what creates this paragraph tag and all of its contents so it’s the genesis_do_footer that we’re going to be removing and replacing with our own function and the hook that all of this is hooked to is the genesis_footer hook.

Let’s turn on our hooks from the Genesis Visual Hook Guide. This is the genesis_footer hook and so we’re going to change this section.

Step 1: Use a Remove Action to Delete Existing Attribution

That starts again with a remove_action and this is going to be ‘genesis_footer’. So remove from the hook ‘genesis_footer’ and we are going to remove ‘genesis_do_footer’.

You’ll see that what that does is remove that paragraph tag and all of its contents but leaves all of the structural elements in place. So there’s no text here anymore. Let’s inspect that element so you can see that.

We still have our footer, we still have our wrap, we just don’t have anything inside of that. So next we’re going to create our own text to put in that and we are going to write our own custom function for this.

Important Rules and Advice for Functions

There are a couple of things that I want you to note. A function is a function name with one or more statements in it and the function name needs to be unique.

Functions Must Have Unique Names

You’ll note that if I copy this and put it here again, it’s going to show an error. If you have two functions with the same name you’re going to cause an error.

This is not the object oriented programming answer, this is the procedural programming answer. WordPress is still primarily a procedural system and Genesis is also primarily a procedural system and so you don’t have the ability to use what they call name, space functions and variables. And that means that a function has to be uniquely named.

Use Unique Prefaces

Well, one of the ways you can make sure that your functions are uniquely named is to give them a preface that is unique. Since this is for BYOB Website, I generally preface my stuff with byob.

If I am working on a Genesis plugin, for example the Genesis Child Theme Editor plugin, I preface my functions with a slightly different designator. I do it with byob and then the first letter of each of the words in a plugin name. In this example that would be byobgcte.

I might have a deactivate function in all of my plugins or a delete CSS function in some of my plugins but as long as I maintain this designator as being unique in this plugin, it’s not going to have a conflict.

Use Descriptive Names

So, the first consideration is to give it a unique identifier and then secondly, give it a descriptive name. There’s no benefit in having short names here. What you want to do is give it a name that is essentially self-commenting really. When you read the name of that function you know what it does, that’s one of the things you want to strive for.

This next function we’re going to create we’ll call custom_footer or it could be custom_footer_attribution because that’s actually what I’m doing. Just make sure it’s a descriptive name.

Use Underscores and Lowercase in Function Names

The other thing is that your PHP function names should have underscores rather than hyphens and they should be all lowercase. The typical difference between a class name and a function name is that class names have uppercase characters and function names don’t. It is a WordPress convention that all function names are all lowercase.

It’s not absolutely essential, it will continue to work if you put some uppercase letters in here but having said that, WordPress convention is for it to all be lowercase.

Opening and Closing Parenthesis and Brackets

Every function has an opening and closing parenthesis in it. Beginners generally never have to deal with anything inside of those but it always has an opening and closing parenthesis and then an opening and closing curly bracket.

Indent for Each Function Level

Another thing you want to do is maintain indentation so each level of something gets indented. This keeps the code organized and easy to read.

Step 2: Add a Function to Insert New Text

Let’s say function so that tells it’s a function. Now we do the function name. I’m going to say byob_custom_footer, opening and closing parenthesis, opening curly brace, closing curly brace.

And what we want to do here is is to add a copyright notice. We’re going to have our own copyright notice. Again, we’ll use indentation. In this case, we’re going to add a paragraph tag. But before we do that we have to talk about entering and exiting PHP.

How to Enter and Exit PHP

Up here, we never exited PHP. We said echo and then we said echo this HTML. This is actually a full PHP statement but what is very common in WordPress is to have raw HTML interspersed with PHP content.

So I’m going to show you what that looks like. It essentially means you put in a closing PHP tag which is a question mark and a greater than symbol and then an opening PHP tag which is a less than symbol, question mark, php.

This says close PHP, this says open PHP back up. Since this is part of PHP you need to open it back up. So we’ve got an opening PHP tag and a closing PHP tag and then inside that opening and closing PHP tag we can put HTML.

Here I’ll add an opening paragraph tag and I’m going to say class==”attribution” close out the paragraph. So opening paragraph tag, closing paragraph tag.

Then I can just say “Copyright 2014 so I’ve got my own copyright designator there. Actually, let’s just say 2009 which is when I started this business. “Copyright 2009 – 2014 and save that.

Step 3: Add the Function with an Add Action

We only have one other thing to do and that is to add this function with an add_action to the footer. So again, we’ll copy that and that’ll be add_action ‘genesis_footer’, and then name of this function.

When we save this you’ll see we have a new attribution added to the footer, “Copyright 2009 – 2014

Using a Special Character

Well, let’s add that little copyright symbol and that symbol is called an HTML special character. NetBeans will automatically give me choices. As soon as I type ampersand (&) I now have a choice of HTML special characters. I want the copyright special character so I’ll just click on that. The copyright special character is &COPY.

Ampersand (&) is a starting place and semicolon is the ending place for an HTML special character. And we’ve just added copyright. Save it, upload it, reload it and I’ve got COPYRIGHT 2009 – 2014.

Adding Automated Elements

Example #4 is to bring some custom dynamic content into this Footer text. We are going to say Copyright Genesis 2.1 and then Designed by and while we’re at it let’s add a link tag to this. And then I think I’m also going to say title=”Visit” so there is my link.

I want to bold that up inside the link so I’ll add the bold tag. When we’re all finished this is what it’s going to look like but we’re going to automate some of it.

Now I can hover over it and it says Visit BYOBWebsite and that will link me off to it. Okay, COPYRIGHT CUSTOMIZE GENESIS 2.1 2009 – 2014.

The parts that we’re going to automate are this part here which is the name of the website and then the current date. I know you’ve all seen websites where the last copyright was like 2006. It’s because they didn’t have a method of automatically incrementing the date but I’m going to show you how so that this date changes to 2015 when 2015 rolls along.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one