• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

WordPress: How to make the functions.php less messy

Modified on: July 4, 2020

Table of contents

  1. 1. Break functions.php into smaller files based on the purposes
    1. 2. Define constants to save computing time
      1. 3. Add a config.php file to add/remove enqueued styles and scripts
        1. Conclusion

          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

          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.

          PHP

          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.

          PHP

          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.

          PHP

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

          PHP

          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:

          PHP

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

          Here comes the styles-scripts-fonts.php:

          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.

          Filed Under: Backend, Featured, Wordpress, WordPress Themes Tagged With: clean code, code refactoring, php

          Recent posts

          [WordPress] Let’s Make Plugin E01: A Simple View Count Plugin

          [WordPress] Create custom post type programmatically

          [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

          Reader Interactions

          You are here: Home / Backend / WordPress: How to make the functions.php less messy

          Leave a Reply Cancel reply

          Your email address will not be published. Required fields are marked *

          Primary Sidebar

          Hi! I am a Vietnamese coder living in Oulu, Finland. Currently I am working with PHP, MySQL, HTML, CSS, and JavaScript. This blog is my learning diary, in which I share knowledge from my own experience or research. Hopefully you can find something useful here and don’t hesitate to open a discussion or leave a feedback!

          FOLLOW MY BLOG

          Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.