Getting rid of messy WordPress functions.php files with WBF Theme components

The functions.php is the core of every WordPress theme; developers can use it to customize every WordPress default behavior that has an hook (an action or a filter) attached.

It’s fast and easy to use but WordPress itself does not dictate on how you have to organize it. This is really not a problem if you are an expert: you surely got your method to structure it in way that suits your work methodology. The case is different if you have little to moderate experience with WordPress theming or programming in general, the lack of a fixed structure does not help you and more often then not leads you to decisions that you will regret when you will need to return to the project some time later for some changes.

If you are not so experienced it is relatevely easy to ends up with a very little organized functions.php file, full of copy\paste code or unrelated functions.

There are a numbers of way to organize your hooks and customizations, every famous theme out there has its own method and no one is right or wrong by itself. We at WAGA have developed theme components.

Theme Components represent a structured way to encapsulate theme customizations in isolated contexts that facilitates the code maintenance over extended periods of time. They can also be thought as a sort of snippets repository.

Let’s say, for example, that you have found this code snippet somewhere:

add_action( 'woocommerce_cart_calculate_fees','woocommerce_custom_surcharge' );
/**
 * Adds a % surcharge to cart / checkout in WooCommerce
 * @see: http://wpsnipp.com/index.php/functions-php/add-surcharge-cart-checkout-woocommerce/
 */
function woocommerce_custom_surcharge() {
  global $woocommerce;
        if ( is_admin() && ! defined( 'DOING_AJAX' ) )
                return;
        $percentage = 0.01;
        $surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;
        $woocommerce->cart->add_fee( 'Surcharge', $surcharge, true, '' );
}

You can paste this in your functions.php file and it will works fine, but imagine if you do the same with many more snippets. Eventually you will ends up with a very long file, very problematic to debug. So you can start your own way of hooks management or try out the WBF Theme Components first.

Make sure WBF is installed and activated, then create a new directory in your theme called components. Inside it put a new file under /wcaddons/wcaddons.php.

The file content should look like this:

/**
Component Name: WCAddons
Description: My WooCommerce addons
Category: WooCommerce
Tags: Tag Sample
Version: 1.0
Author: FooBar
Author URI: http://www.foo.bar
*/

if(!class_exists("\\WBF\\modules\\components\\Component")) return;

class WCAddons extends \WBF\modules\components\Component{
    public function setup(){
        parent::setup();
	    add_action( 'woocommerce_cart_calculate_fees',[$this,'woocommerce_custom_surcharge']);
    }
    public function woocommerce_custom_surcharge(){
	    global $woocommerce;
	    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
		    return;
	    $percentage = 0.01;
	    $surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;
	    $woocommerce->cart->add_fee( 'Surcharge', $surcharge, true, '' );
    }
}

With slightly more code, you now have a fully functional component that do just one thing. You can enable \ disable it from the dashboard (/wp-admin/admin.php?page=wbf_components) and customize it even further with some predefined options.

It is easy to see that is more efficient to have many components that groups different functionality and that you can toggle at any moment (for example, in case of bugs or problems) instead of a very long functions.php file or various, scattered, files.

You learn more about WBF Theme Components in the docs.