Keeping your theme’s functions.php file clean and well organised means you can do more with your WordPress site without getting lost is a sea of code. It’s not difficult to do. Even if you don’t have much coding experience, you can add all sorts of new functionality without ending up in a great big spaghetti-code mess.
There are lots of articles out there saying things like “copy and paste this into your functions.php”. All well-and-good, but before long you’ll end with a long and ungainly functions.php file. It’ll be difficult to find a particular function when you need to go back to it in six month’s time to make some changes.
A key goal of writing software, especially larger systems, is to keep your code well organised and easy-to-read. Don’t try and be too clever with how you put the files and functions together. Make sure that someone else will be able to read your code and find their way round it.
What we’re going to do is split functions.php into multiple, smaller files. We’ll only use functions.php as a place where we can glue-together all the smaller functions files.
If you don’t already have a functions.php file then you should create a custom child theme that references a parent/template theme. Let’s say your theme’s parent is the Storefront theme. Storefront is a great parent theme to build a child theme around, as you’re inheriting a fully-working shop right at the start. Your child theme is really just about laying-out your shop’s bits-and-pieces so it looks just right.
Let’s Write some Clean Code
Probably the first thing you’ll want to do is change the copyright notice in the website footer, because the default text is something like “Built with Storefront”. The code snippet for overriding the footer/copyright text will be something like this:
if (!function_exists('storefront_credit')) {
function storefront_credit() {
printf(
'Copyright © %d <a href="%s">Headwall Hosting</a>',
date('Y'),
get_home_url()
);
}
}Instead of just pasting this straight into functions.php, we’re going to do it a bit differently. Create a new file in your child theme’s folder called functions-storefront.php and set it up like this:
<?php
/**
* https://wp-tutorials.tech/add-functionality/clean-functions-php/
*
* functions-storefront.php
*
* Override default Storefront (parent) theme functions, filters and actions in here.
*/
// Block direct access.
defined('WPINC') || die();
/**
* Set the site's copyright notice in the footer area.
*/
if (!function_exists('storefront_credit')) {
function storefront_credit() {
printf(
'Copyright © %d <a href="%s">Headwall Hosting</a>',
date('Y'),
esc_url(get_home_url())
);
}
}Now create another file called settings.php and paste this into it.
<?php
/**
* settings.php
*
* Global settings for my child theme.
*/
// Block direct access.
defined('WPINC') || die();
// Settings go in here...
// ...Finally, set up your functions.php file so it looks like this…
<?php
/**
* FILE: functions.php
*
* Custom functions for my child theme.
*/
// Block direct access.
defined('WPINC') || die();
require_once dirname( __FILE__ ) . '/settings.php';
// Other functions files can go here...
require_once dirname( __FILE__ ) . '/functions-storefront.php';
// require_once dirname( __FILE__ ) . '/functions-shortcodes.php';
// require_once dirname( __FILE__ ) . '/functions-rest-api.php';
// ...
function custom_enqueue_scripts() {
$theme_version = wp_get_theme()->get('Version');
$base_uri = get_stylesheet_directory_uri();
wp_enqueue_style('child-style', $base_uri . '/style.css', false, $theme_version);
// You can add additional JavaScript CSS files here...
// wp_enqueue_style('my-post-styles', $base_uri . '/post.css', array('child-style'), $theme_version);
// wp_enqueue_style('my-shop-styles', $base_uri . '/shop.css', array('child-style'), $theme_version);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
Your functions.php is now clean, well structured and your various WordPress functions & hooks are split into smaller files,. When you come back to your code somewhere down-the-road, you should find your code is now much easier to navigate.
