WordPress: How to make the functions.php less messy

I have been working with WordPress for a while and one thing that irritates me is that the functions.php contains a lot of codes. This makes the file looks messy and hard to follow. There are some methods to improve this, which I have learnt from KnowTheCode to make this file looks cleaner. Briefly what I do:

• Break one functions.php file into smaller files based on the purposes. Save them in a functions folder.
• Define constants to save computing time.
• Add a config.php file to store enqueued JS and CSS.

Let’s go into details.

1. Break functions.php into smaller files based on the purposes

So this is quite straight forward. I just categorized the functions into smaller purposes. Depending on your theme and your functions it will look different than mine. Here are the categories that I come up with:

• styles-scripts-fonts.php: Enqueue styles, scripts and fonts.
• custom-post-types.php: Defines and functions for custom post types.
• post.php: functions used on blog posts (e.g query latest posts, get related posts, etc.).
• remove-scripts.php: WordPress has lots of unnecessary functions that I don’t use and this file shut it down for better web speed.
• third-parties: for example Google Tag Manager scripts installed.

I will not go into the details of each file here because your case will be totally different than mine. Just make sure that you analyze the functions before making a file for each. After categorizing scripts into the right file, let’s include them in the functions.php

So now I think it looks much cleaner.

2. Define constants to save computing time

Defining constants saves computing time. For example, the get_stylesheet_directory_uri() will be defined into a constant, so that whenever the theme needs, it does not need to do the whole process before getting the result.

So instead of looking for and implement this function in the theme, now only a string will need to be retrieved. You will notice later when enqueueing styles and scripts, this constant will be called all the time.

The second thing that can be defined is the theme version.

The last constant is a list of three latest posts because they are written in the footer section of the website. So I think making them into an array constant will make website faster than querying them all over again.

And in the post.php, the function will look something like:

3. Add a config.php file to add/remove enqueued styles and scripts

I don’t like to repeat all the time the wp_enqueue_style() and wp_enqueue_script(). So I make a config file that contains all the styles and scripts with configuration. Then, in the styles-scripts-fonts.php file it will loop through all the items and add them accordingly.

Config.php file:

Now you can see that the constants CHILD_THEME_DIR and THEME_VERSION are used quite often.

Here comes the styles-scripts-fonts.php:

In this project, we use Understrap theme so there are codes to remove the parent theme scripts from Understrap.

Note: So when adding script/style into config.php, there is page_template required. This prevents the item to display in pages where they are not needed. For example, the cocoen is only needed for the gallery page, there is no idea to include them (two .js files and one .css file) to every page. This will make the website loads faster due to decrease in HTTP requests.

Conclusion

I know that there will be other effective ways to make the functions.php less messy. Here I list some that I find useful and to my knowledge. You are welcomed to share your thoughts and improvements. Thanks for reading and I hope this post is helpful to you.