Part One
When building a theme the functions.php file can enhance your theme’s features and in some cases performance. There are many tutorials that give you snippets of code to use but it’s up to you to figure out how to implement it into your functions.php file. The aim of this tutorial will be to give a more indepth understanding of the functions.php file and how to actually use it.
Although there are many functions.php tutorials on the web, not many tell you how to properly create one for a WordPress child theme. This tutorial will provide additional information on how to use it with your Twenty Ten child theme.
The Basics
In the previous tutorials we talked about the structure of WordPress, created the basic files we needed and learned the styling methods. Now we will take a closer look at the second file we created “functions.php”.
In a child theme, if you do not include a functions.php file, then the child theme will inherit the parent theme’s function file. In order to override the parent function file we have to create our own file with override commands.
The Twenty Ten functions.php provides useful instructions within the file; however, they may not always be clear to understand and secondly they may not be clear on how to implement them into a child theme. Let us look at the following example.
Functions.php Explained
After creating our generic child theme, we created an empty functions.php file. Because we have not provided any instructions in our functions file, our child theme has inherited the parent theme’s functions. Let us assume that we want to keep many of the useful features for our theme, but we want to remove features such at the “Background” customisation options in the Appearance section. In addition to that we also want to remove the “Header” customization options. So the question is, “How can I remove the Twenty Ten theme dashboard options?”
Let us begin by using the instructions provided by the Twenty Ten parent theme’s function file.
To override twentyten_setup() in a child theme, add your own twentyten_setup to your child theme’s functions.php file.
Now let’s look at the default code and what we need to change for the child theme. First copy the code below and paste it into your empty functions.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <?php function twentyten_setup() { // This theme styles the visual editor with editor-style.css to match the theme style. add_editor_style(); // This theme uses post thumbnails add_theme_support( 'post-thumbnails' ); // Add default posts and comments RSS feed links to head add_theme_support( 'automatic-feed-links' ); // Make theme available for translation // Translations can be filed in the /languages/ directory load_theme_textdomain( 'twentyten', TEMPLATEPATH . '/languages' ); $locale = get_locale(); $locale_file = TEMPLATEPATH . "/languages/$locale.php"; if ( is_readable( $locale_file ) ) require_once( $locale_file ); // This theme uses wp_nav_menu() in one location. register_nav_menus( array( 'primary' => __( 'Primary Navigation', 'twentyten' ), ) ); // This theme allows users to set a custom background add_custom_background(); // Your changeable header business starts here define( 'HEADER_TEXTCOLOR', '' ); // No CSS, just IMG call. The %s is a placeholder for the theme template directory URI. define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' ); // The height and width of your custom header. You can hook into the theme's own filters to change these values. // Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values. define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) ); define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) ); // We'll be using post thumbnails for custom header images on posts and pages. // We want them to be 940 pixels wide by 198 pixels tall. // Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php. set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); // Don't support text inside the header image. define( 'NO_HEADER_TEXT', true ); // Add a way for the custom header to be styled in the admin panel that controls // custom headers. See twentyten_admin_header_style(), below. add_custom_image_header( '', 'twentyten_admin_header_style' ); // ... and thus ends the changeable header business. // Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI. register_default_headers( array( 'berries' => array( 'url' => '%s/images/headers/berries.jpg', 'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Berries', 'twentyten' ) ), 'cherryblossom' => array( 'url' => '%s/images/headers/cherryblossoms.jpg', 'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Cherry Blossoms', 'twentyten' ) ), 'concave' => array( 'url' => '%s/images/headers/concave.jpg', 'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Concave', 'twentyten' ) ), 'fern' => array( 'url' => '%s/images/headers/fern.jpg', 'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Fern', 'twentyten' ) ), 'forestfloor' => array( 'url' => '%s/images/headers/forestfloor.jpg', 'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Forest Floor', 'twentyten' ) ), 'inkwell' => array( 'url' => '%s/images/headers/inkwell.jpg', 'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Inkwell', 'twentyten' ) ), 'path' => array( 'url' => '%s/images/headers/path.jpg', 'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Path', 'twentyten' ) ), 'sunset' => array( 'url' => '%s/images/headers/sunset.jpg', 'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg', /* translators: header image description */ 'description' => __( 'Sunset', 'twentyten' ) ) ) ); } |
The override child theme code for background removal:
1 2 | // This theme allows users to set a custom background // add_custom_background(); |
By adding the forward slashes, we comment out the “add_custom_background()” feature. This gives you more control over your child theme if you decided to remove this feature.
Next we look at removing the “Header” section from our Appearance box. If you want to completely customize your child theme without these features then we comment out the following:
1 2 3 | // Add a way for the custom header to be styled in the admin panel that controls // custom headers. See twentyten_admin_header_style(), below. // add_custom_image_header( '', 'twentyten_admin_header_style' ); |
So what have we done? We have essentially removed the option for anyone to change their header image through the admin dashboard.
Next, if you want to complete remove the default header image and completely customize your header theme, then we comment out the following:
1 2 | // No CSS, just IMG call. The %s is a placeholder for the theme template directory URI. // define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' ); |
This removes the header image from the homepage. At this point you can add your own header image through your style sheet or through your own custom header.php file.
One more custom bit of code to look at is the section which defines the header dimensions.
1 2 3 4 | // The height and width of your custom header. You can hook into the theme's own filters to change these values. // Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values. define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) ); define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) ); |
These can be commented out if you do not plan to use them in your child theme or you can define your default header image dimensions by changing the height and width. This is important if you plan to use the “post thumbnails” features of Twenty Ten.
This will end part one of the Functions.php tutorial. In part two we will look at how to use the functions.php file to further enhance our WordPress child theme.
Related Links:
I have enjoyed reading your excellent tutorials. I look forward to the next one on
how to use the functions.php file to further enhance our WordPress child theme.
When do you plan to publish it?