PHP is infamous to be a messy language in the developer world. That’s because it allows bad code to run.<\/p>\n\n\n\n
And WordPress runs on PHP which inherits the same problem<\/strong>.<\/p>\n\n\n\n Let’s take a look at several tips to avoid that:<\/p>\n\n\n\n The snippet below is a common mistake I see in themes and plugins. You can’t see what this file does unless you scroll until the very end.<\/p>\n\n\n\n This is fixed simply by grouping the Now you only need to read the top part to see everything that file does.<\/p>\n\n\n\n For example, you want to check if a visitor is using Internet Explorer. You might create a function like this:<\/p>\n\n\n\n There’s nothing wrong with that, but it’s clearer if you write it like this:<\/p>\n\n\n\n The general idea is to use fewer inline comments.<\/strong> Because a lot of inline comments actually made your code harder to read.<\/p>\n\n\n\n Let’s say you want to register a new Gutenberg style. You must first check whether Gutenberg is enabled or not. So you might do this:<\/p>\n\n\n\n Seems good? Yes, but there’s a better way:<\/p>\n\n\n\n You break the function early when the condition is not met. This way you keep the indentation as low as possible, making it easier to read. <\/p>\n\n\n\n Your functions file can easily grow big. It is best if you split the related chunk of codes into its own file.<\/p>\n\n\n\n It’s up to you how you organize it. My personal preference is to create a folder named Then your functions.php only acts as a gateway:<\/p>\n\n\n\n I often see themes and plugins re-create a function that is already provided by WordPress. Most likely because they’re not aware of them.<\/p>\n\n\n\n So I recommend scanning through the list of functions here codex.wordpress.org\/Function_Reference<\/a><\/p>\n\n\n\n One day when you need it, you will vaguely remember that there’s a function for that. Then you can find it with Google search.<\/p>\n\n\n\n Below are some useful native WP functions:<\/p>\n\n\n\n If you create a function that accepts arguments, define the available one with Tip #1: Group Up Filters & Actions<\/h2>\n\n\n\n
add_action( 'after_setup_theme', 'my_theme_supports' );\nfunction my_theme_supports() {\n \/\/ ...\n}\n\nadd_action( 'wp_enqueue_scripts', 'my_public_assets', 99 );\nfunction my_public_assets() {\n \/\/ ...\n}\n\nadd_action( 'widgets_init', 'my_register_sidebar' );\nfunction my_register_sidebar() {\n \/\/ ...\n}<\/code><\/pre>\n\n\n\nadd_action<\/code> and add_filter<\/code> in one place:<\/p>\n\n\n\nadd_action( 'after_setup_theme', 'my_theme_supports' );\nadd_action( 'wp_enqueue_scripts', 'my_public_assets', 99 );\nadd_action( 'widgets_init', 'my_register_sidebar' );\n\n\nfunction my_theme_supports() {\n \/\/ ...\n}\n\nfunction my_public_assets() {\n \/\/ ...\n}\n\nfunction my_register_sidebar() {\n \/\/ ...\n}<\/code><\/pre>\n\n\n\nTip #2: Use Variable for Long Expression<\/h2>\n\n\n\n
function is_browser_ie() {\n \/\/ is IE10 or IE11\n return preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) ||\n preg_match('~Trident\/7.0(; Touch)?; rv:11.0~',$_SERVER['HTTP_USER_AGENT']);\n}<\/code><\/pre>\n\n\n\nfunction is_browser_ie() {\n $is_ie10 = preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']);\n $is_ie11 = preg_match('~Trident\/7.0(; Touch)?; rv:11.0~',$_SERVER['HTTP_USER_AGENT']);\n\n return $is_ie10 || $is_ie11;\n}<\/code><\/pre>\n\n\n\nTip #3: Conditional Return Early<\/h2>\n\n\n\n
add_action( 'init', my_register_block_styles );\n\nfunction my_register_block_styles() {\n \/\/ if Gutenberg is active\n if ( function_exists( 'register_block_type' ) ) {\n register_block_style( 'core\/heading', [\n 'name' => 'has-underline',\n 'label' => 'Has Underline'\n ] );\n\n register_block_style( 'core\/buttons', [\n 'name' => 'transparent',\n 'label' => 'Transparent'\n ] );\n }\n}<\/code><\/pre>\n\n\n\nadd_action( 'init', my_register_block_styles );\n\nfunction my_register_block_styles() {\n \/\/ if Gutenberg is not active\n if ( !function_exists( 'register_block_type' ) ) { return; }\n \n register_block_style( 'core\/heading', [\n 'name' => 'has-underline',\n 'label' => 'Has Underline'\n ] );\n\n register_block_style( 'core\/buttons', [\n 'name' => 'transparent',\n 'label' => 'Transparent'\n ] );\n}<\/code><\/pre>\n\n\n\nTip #4: Split functions.php into Several Files<\/h2>\n\n\n\n
functions\/<\/code> and split them like this:<\/p>\n\n\n\nadmin.php<\/code> – Hooks that affect the admin panel.<\/li>frontend.php<\/code> – Hooks that affect the front-end site.<\/li>helpers.php<\/code> – Reusable utility functions.<\/li>setup.php<\/code> – Hooks that initialize the site. It includes: theme support, custom post type, enqueue assets, register widget.<\/li>timber.php<\/code> – If you’re using Timber plugin<\/a>. Contains the global variable and custom filter (Learn How<\/a> \u00bb<\/a>)<\/li>shop.php<\/code> – If you’re using WooCommerce.<\/li><\/ul>\n\n\n\n$function_dir = __DIR__ . '\/functions';\n\nrequire_once $function_dir . '\/helpers.php';\nrequire_once $function_dir . '\/setup.php';\n\nif( is_admin() ) {\n require_once $function_dir . '\/admin.php';\n} else {\n require_once $function_dir . '\/frontend.php';\n require_once $function_dir . '\/timber.php';\n}\n\nif( class_exists('WooCommerce') ) {\n require_once $function_dir . '\/shop.php';\n}<\/code><\/pre>\n\n\n\nTip #5: Utilize WordPress Native Functions<\/h2>\n\n\n\n
wp_is_mobile<\/a><\/code> – Check if the visitor is using a mobile browser.<\/li>human_time_diff<\/a><\/code> – Compares two dates and shows them in a relative format like “3 days ago”.<\/li>wp_trim_words<\/a><\/code> – Cut a string into a certain number of words.<\/li>wp_redirect<\/a><\/code> – Redirect to specified URL.<\/li>wp_remote_post<\/a><\/code> – Post API request.<\/li>wp_remote_get<\/a><\/code> – Get API request.<\/li><\/ul>\n\n\n\nTip #6: Define Available Arguments<\/h2>\n\n\n\n
wp_parse_args<\/a><\/code>. This will also set the default value.<\/p>\n\n\n\n