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 function function( $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 our groovy_get_current_year() just before the page is sent to the client.

In WordPress, go to Divi > Theme Builder. Then select Add Global Footer and choose Build 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!