Server-Side Like a Pro
Adding JavaScript to your child theme is great when you want to render data on the client-side. But what if you want to add some server-side logic like page routing and security? functions.php
to the rescue! Let’s take a look at how to edit your functions.php file.
First, a Simplistic Case Study
Imagine I have a site called sunjaysbananas.com
. I don’t own this URL, obviously, but consider what might happen if you went to the sunjaysbananas.com/send-fruit
page in your browser.
If it was a WordPress site, your browser would request the send-fruit
page from the server that my site lives on. If the page exists, the WordPress application uses PHP to build the page and send it to the client (your browser, in this case).
We can customize how WordPress constructs these pages and resolves requests from the client. There are many ways to do that, but my favorite way for simple server-side logic is with functions.php.
An Example with a Current Year Shortcode
One fun demonstration of customizing functions.php
is by creating a shortcode that returns the current year. You can use this in your site’s footer to ensure the copyright year is always updated. Let’s see this in action.
- Under the code we wrote earlier, add the following code block:
// Create current year shortcode function
function groovy_get_current_year() {
// Return current year in a shortcode
add_shortcode( 'groovy_current_year', function( $atts = null, $content = null, $shortcode_tag = 'groovy_current_year' ) {
return date("Y");
} );
}
add_action( 'init', 'groovy_get_current_year' );
Here’s what this block does:
groovy_get_current_year()
is the name of our function that builds our shortcode.add_shortcode()
is a WordPress function used to add a new shortcode. This function takes two parameters: a name for the shortcode'groovy_current_year'
, and a callback functionfunction( $atts = null, $content = null, $shortcode_tag = 'groovy_current_year' ) {return date("Y");} )
.- The callback function simply returns the current year with the built-in
date()
PHP function. add_action()
with the'init'
hook fires ourgroovy_get_current_year()
just before the page is sent to the client.
- In WordPress, go to
Divi > Theme Builder
. Then selectAdd Global Footer
and chooseBuild Global Footer
. - Yay! You’re now editing the Global Footer Layout for your Divi site. Add a new row with a text module. In the
Body
of your text module, add the text below. Then save the module and save the template.
Copyright © [groovy_current_year] Groovy, LLC. All rights reserved.
Do you see [groovy_get_current_year]
? That’s our shortcode that returns the current year!
- View your site and head to the bottom of the page. Now revel in your ninja PHP skills! 🥷🏽 Huzzah! The current year! ✨
Recap
So, what did we just do? First we wrote a shortcode function to return the current year and used an init
action in our functions.php
file. Then we used that shortcode in our Divi footer template and watched it work after the template was saved.
You can do whole lot more in functions.php
using a similar process. I’ve added shortcodes for custom menus, redirect functions, and form logic to fight spam. Try something on your own to get the hang of it!