Don’t forget your functions.php file! It’s powerful.

In the world of WordPress theme customization, back end customization is often neglected. I would say for good reason too. If you’re mostly a front end programmer like me, it’s daunting and complicated: database table and column architecting, server configurations, and then that whole world of plugin authoring….and I say all this having taught PHP and SQL for more than a decade.

You don’t want to go down that road. I hear ya. (Even though I would argue that PHP syntax is more logical than JS syntax, but that’s another story.)

There is, however, one powerful, fairly simple component to WordPress theme customizing that is generally under utilized. Yeah, I’m talking about the functions.php file.

It sits there in your child theme, pathetically empty.

I want to show you a simple way to utilize it then. Once you understand this very simple example, you can grasp the concept and then go off on your own tangent, getting all “codey” and creative.

Here we go…

Step 1: Locate your functions.php file

This tutorial already assumes that you’ve created your WordPress child theme, and that you already have the basic file structure in place.

That file structure should look something like this:

wp-theme-structure

If you haven’t declared a child theme, and don’t how to do so, I hope to cover that in another article, but in the meantime, just check out the WordPress Codex on creating child themes.

If you only see your style.css file in your child theme folder, simply open up a new, blank document in your favourite code editor, and save it completely empty as functions.php in your child theme folder.

Done.

Step 2: Open your functions.php file

When you open your functions.php file, it should be blank, assuming you have just declared your child theme, or just created the file itself as I described above. One of the reasons that it is blank is because you can’t declare custom functions more than once. (PHP will freak out!) All the original theme functions are safe and sound in the parent theme you’re leaching off of. From here, in the child theme, in the empty functions.php file, you move forward and create your own, new functions. (So don’t look back!)

Ok, so here is my blank functions.php file:

The empty functions.php file on WordPress George!

Go here.

Step 3: Add a function

I say “add” here and not “create” because we’re going to keep things simple. Working with PHP syntax and building custom functions in PHP is a secondary issue, and the topic for another article. All we are going to do here is import a pre-existing custom function, because I just want to show you how this works in WordPress, not to show you how to build custom functions per se.

For that, guess who comes to the rescue? Why, none other than w3schools of course!

On this page we have a few custom PHP functions to choose from:

http://www.w3schools.com/php/php_functions.asp

I’m going to choose the one at the bottom of the page called, “PHP Functions – Returning values”.  It seems to be the most relevant of the bunch.

It looks like this:

<?php
function sum($x, $y) {
$z = $x + $y;
return $z;
}
?>

and the way it’s later called when you need it is like this:

<?php
echo “5 + 10 = ” . sum(5, 10) . “<br>”;
echo “7 + 13 = ” . sum(7, 13) . “<br>”;
echo “2 + 4 = ” . sum(2, 4);
?>

 

I’m not even going to get into what’s going on in the function here, but suffice it to say that, every time you call it, it outputs a bunch of mathematical sums. If you’ve taken interest in reading this article, I’m assuming you know at least some very basic PHP. If not, you might want to back up and start that w3schools PHP tutorial set from the top, from the very first tutorial.

Ok, so I’m taking that PHP function and straight dumping it into my functions.php file like so:

A function in a functions.php file on WordPress George

(Don’t forget to add the <?php ?> delimters.)

Then I save.

Step 4: Call the function

Once the function lives in the functions.php file, all I have to do is call it by name in one of my child theme files.

First, though, I have to actually have a file in the child theme folder to work with. For that, I’m going to use the footer.php file, so I’m going to go back to the parent theme, copy the footer.php file from there, and drop the file into my child theme.

Now my folder structure in my child theme should look something like this:

wp-theme-structure-with-footer

Since I copied that footer.php file from my parent theme, it’s not blank. It has all the footer code the original footer.php file had.

Ok, so let’s open up that footer.php file.

For my example, I’m going to use none other than this site you’re reading from, wordpressgeorge.com!

This is how I’m going to call my function within footer.php:

echo “<br><br><strong>This site received 100 good reviews last year, and 200 good reviews this year, for a total of = ” . sum(100, 200) . ” great reviews!</strong><br><br>”;

(The part in red is the actual function call.)

Let’s see it in the footer.php code for more context. Just so we can see it clearly, I’ve decided to add the function call near the credits of the footer:

A function call in the footer.php on WordPress George!

(Outlined in red.)

And here’s the output on the front page:

Function in WP footer example on WordPress George

(Also outlined in red.)

So?

Big deal, right? Ooooh! A number appeared!

Well you get the idea. You get the concept and, if you think about it, just that one specific function is powerful itself. Why? Because it handles numbers!

You can imagine a scenario where you build a little HTML form on your theme, and that form is feeding the numbers into this little w3schools function. That means your user can potentially determine that “300” number which I’ve just hardcoded to appear. Also, because we are dealing with numbers, that means you can apply them to CSS values too!

For example, [1] you could have your user fill out numbers in an HTML form. [2] Those numbers could get processed by this w3schools function in the functions.php file in your WordPress child theme, and finally [3] those processed, summed up numbers could be passed on to CSS to determine, say, the size of a div box on your home page.

In other words, just with this one simple example that I just showed you, you could have a user determine the dimensions of the same interface that s/he is looking at.

That’s just this function! Imagine all the other functions and potential functions out there that could be utilized too.

So take the leap. Don’t get stuck on customizing your WP child theme only using CSS or JQuery–you’re really limiting yourself that way.

Remember the power of the functions.php file!

 

Comments

comments

Leave a Reply